超简单的VUE入门2~VUE实例

在上一篇主要说些Vue中的常用指令，主要编写在HTML页面中，但是VUE实例中也有许多的属性和方法，这里总结下，首先说vue实例，如果需要让HTML代码页面与VUE结合在一起，必须创建一个对应的VUE实例，创建语法如下：

var vm = new Vue({
	//属性
})

主要属性都有

1、el 通过ID绑定对应的HTML元素
例子：
var vm = new Vue({
el:"#id" // HTML ：

})

2、data 绑定数据，可以HTML动态绑定数据

HTML:
<div id="id">{{data}}</div>

JS:
var vm = new Vue({
	el:"#id",
	data:{
		da:"数据",
		das:[
			"数组"
		]
	}
})

3、生命周期钩子，组成生命周期函数，在页面在使用期间默认调用的几个函数，直接上例子

beforeCreate() {
	console.log("beforeCreate，实例创建之前")
},
created() {
	console.log("created，实例创建")
},
beforeMount(){
	console.log("beforeMount，挂在DOM节点前，数据data在模板中占据位置")
},
mounted() {
	console.log("mounted，挂在DOM节点，HTML代码中数据显示")
},

beforeUpdate(){
	console.log("beforeUpdate，data数据发生变化，重新渲染DOM之前")
},
updated() {
	console.log("updated，重新渲染页面")
},

beforeDestroy(){
	console.log("beforeDestroy，销毁之前，实例仍然可用")
},
destroyed(){
	console.log("destroyed，销毁所有实例")
}

4、computed，计算属性，声明一个带有返回值的函数，可以在HTML页面和函数进行绑定

HTML：
<div id="d1">
	{{getNum}}
	{{getNum2}}
</div>

JS:
<script>
	var vm = new Vue({
		el:"#d1",
		computed: {
			getNum() {
				return 10*20 
			},
			getNum2: function(){
				return 10*20 
			}
		},
	})

计算属性在使用上比较类似于方法，两者的区别在于缓存，计算属性会把结果进行缓存处理，只要所依赖的数据不发生变化就不会重复执行，而方法是每次调用都会执行一次，如果是复杂运算会增加资源损耗，案例如下：

HTML：
<div id="d1">
	{{getNum}}<br>
	{{getNum}}<br>
	{{getNum}}<br>
	{{getNum}}<br>
	<br>
	{{getNum3()}}<br>
	{{getNum3()}}<br>
	{{getNum3()}}<br>
	{{getNum3()}}<br>
</div>

JS：
var vm = new Vue({
	el:"#d1",
	computed: {
		getNum() {
			console.log("计算属性");
			return Date.now() 
		}
	},
	methods:{
		getNum3(){
			console.log("普通方法")
			return Date.now() 
		}
	}
})
效果：
1565486842912
1565486842912
1565486842912
1565486842912

1565486842915
1565486842915
1565486842916
1565486842916

计算属性的set方法，计算属性默认只有get（取值时调用）方法，除此之外还可以定义set（设置值时调用）方法。

HTML：
{{getName}}
<button @click="getName='张三'">点击</button><!--也可以在控制台直接设置-->

JS：
var vm = new Vue({
	el:"#d1",
	data:{
		name:"洒家"
	},
	computed: {
		getName:{
			get(){
				return this.name
			},
			set(newValue){
				// set方法在属性传值的时候增加额外处理
				console.log("set"+newValue)
				this.name = newValue+"~李"
			}
		}
	}
})

5、watch侦听器，在值发生变化后，进行调用

HTML：
<div id="d1">
	<h1>{{question}}</h1>
</div>	

JS：
var vm = new Vue({
	el:"#d1",
	data:{
		question:"1",
	},
	watch:{
		question:function(newValue,oldValue){
			console.log(newValue);
			console.log(oldValue);
			console.log("侦听器")
		}
	}
})