Vue屬性、方法和生命週期

時間 2019-11-12

標籤 vue 屬性方法生命週期简体版

原文原文鏈接

實例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue的屬性、方法和生命週期</title>
    <script src="Vue.min.js"></script>
  </head>

  <body>
    <div id="main">
      <span>{{ message }}</span>
      <br/>
      <span>{{ number }}</span>
      <br/>
      <button v-on:click="add">add</button>
    </div>
  </body>
</html>

<script>
  const App = new Vue({
    //  選擇器
    el: '#main',
    //  數據
    data: {
      // 在data裏面不只能夠定義字符串，咱們還能夠定義number
      message: 'Welcome to Chivalrous Island!',
      number: 85,
    },
    // 若是咱們從服務器獲得的數據並非咱們須要的，多是上面數據的結合，這時咱們能夠用到一個Vue提供的一個屬性：計算屬性
    // 計算屬性：能夠把data裏面的數據計算一下，而後返回一個新的數據，它被叫作computed。
    computed: {
      // 能夠定義函數，而後返回須要的數據，好比下面咱們要獲得上面number的平方，計算結果爲：
      getSqure: function () {
          return this.number * this.number;
      }
    },
    // 定義函數
    methods: {
      add: function() {
        this.number++;
      }
    },
    // 監聽屬性（監聽器），它能夠監聽一個函數或者是一個變量
    watch: {
      // 函數接收兩個參數值，afterVal表明改變以後的值，beforeVal表示改變以前的值
      number: function(afterVal,beforeVal) {
        console.log('beforeVal',beforeVal);
        console.log('afterVal',afterVal);
      }
    }
  });

  // 打印出來的結果
  console.log(App.getSqure);
</script>

屬性

從上面的案例能夠知道，屬性能夠分爲計算屬性（computed）和監聽屬性（watch）。html

計算屬性有一個好處在於它有一個緩存機制，所以它不須要每次都從新計算。vue

監聽屬性（監聽器），它能夠監聽一個函數或者是一個變量。緩存

方法

methods常調用的函數。服務器

上面的示例中，getSqure，add，number，像這些都是咱們自定義的方法。函數

生命週期(鉤子函數)

生命週期就是從它開始建立到銷燬的經歷過程，這個生命週期也就是一個 Vue 實例，從開始建立，到建立完成，到掛載，再到更新，而後再銷燬的一系列過程，這個官方有一個說法咱們也被叫做爲鉤子函數。ui

<script>
window.onload = () => {
	const App = new Vue({
		......
	
		// 生命週期第一步：建立前（vue實例還未建立）
    	 beforeCreate() {
        	 // %c 至關於給輸出結果定義一個樣式
			console.log('%cbeforeCreate','color:green', this.$el);
			console.log('%cbeforeCreate','color:green', this.message);
    	 },
    	// 建立完成
    	created() {
        	 console.log('%ccreated','color:red', this.$el);
         	console.log('%ccreated','color:red', this.message);
    	},   
		// 掛載以前
		beforeMount() {
			console.log('%cbeforeMount','color:blue', this.$el);
			console.log('%cbeforeMount','color:blue', this.message);
		},
		// 已經掛載可是methods裏面的方法尚未執行，從建立到掛載所有完成
		mounted() {
			console.log('%cmounted','color:orange', this.$el);
			console.log('%cmounted','color:orange', this.message);
		},
		 // 建立完以後，數據更新前
		beforeUpdate() {
			console.log('%cbeforeUpdate','color:#f44586', this.$el);
			console.log('%cbeforeUpdate','color:#f44586', this.number);
		},
		// 數據所有更新完成
		updated() {
			console.log('%cupdated','color:olive', this.$el);
			console.log('%cupdated','color:olive', this.number);
		},
		// 銷燬
		beforeDestroy() {
			console.log('%cbeforeDestroy','color:gray', this.$el);
			console.log('%cbeforeDestroy','color:gray', this.number);
		},
		destroyed() {
			console.log('%cdestroyed','color:yellow', this.$el);
			console.log('%cdestroyed','color:yellow', this.number);
		}
	});
// 打印出來的結果
	console.log(App.getSqure);
	window.App = App;
};

// 銷燬vue實例
function destroy() {
	App.$destroy();
}
</script>

html：this

<body>
	<div id="main">
      <span>{{ message }}</span>
      <br/>
      <span>{{ number }}</span>
      <br/>
      <button v-on:click="add">add</button>
       <br />
      <button Onclick="destroy()">destroy</button>
	</div>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。