在上一篇主要说些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("侦听器")
}
}
})