JSFiddle - React, Tailwind, and code Playground

by Chris_Walter

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div id="wrap">
      <button @click="toggleShow" class="btn btn-primary">
      	<span v-if="isShowing">Hide</span>
				<span v-else>Show</span>
      </button><br/>
			<keep-alive><!--沒有加上keep-alive(用來緩存資料)不會觸發activated()、deactivated()
                      有加上的話當再次觸發會直接執行activated()，而前面的生命週期便不會執行。
			-->
			  <message v-if="isShowing" :title-data="title"/>
			</keep-alive>
    </div>
		
<script type="text/x-template" id="mes">
 <div>
   <span>{{ titleData }}</span><br/>
   <input type="text" v-model="text">
 </div>
</script>
  </body>

</html>

JavaScript

Vue.component('message', {
  data() {
	  return {
		  text: '',
			name: 'Ting'
		}
	},
  props: {
	 titleData:{
	 	  type: String,
		  default: ''
	 }
	},
  template: '#mes',
	beforeCreate() {
	  alert(` beforeCreate: ${this.text}`);
	},
	created() {
	  alert(` created: ${this.text}`);
	},
	beforeMount() {
	  alert(` beforeMount: ${this.text}`);
	},
	mounted() {
	  alert(` mounted: ${this.text}`);
	},
	beforeUpdate() {
	  alert(` beforeUpdate: ${this.text}`);
	},
	updated() {
	  alert(` Updated: ${this.text}`);
	},
	activated(){
	  alert(`activated: ${this.text}`);
	},
	deactivated() {
	  alert(`deactivated: ${this.text}`);
	},
	beforeDestroy() {
	  console.log(` beforeDestroy: ${this.text}`);
	},
	destroyed() {
	   console.log(` destroyed: ${this.text}`);
	},
});



const vm = new Vue({
  data(){
	  return{
		  title: '輸入框元件:',
			text: '',
			isShowing: false
	  }
	},
	methods: {
	  toggleShow() {
		  this.isShowing = !this.isShowing
	  }
	},
});


vm.$mount('#wrap');