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>