用new Vue()创建实例的时候,里面传递的参数一个对象,该对象有很多默认的属性。
const app = new Vue({
el:'#app'; //用于挂载要管理的元素
data:{
};//定义数据。可以是自己定义的,也可也是服务器请求来的
methods:{
}, //调用几次就会执行几次,没有缓存,性能不好。
computed:{
},//计算属性用于简便的对数据进行变换,可不加小括号()。
components:{
cpn1:cpnC,cpn2:`<div></div>`}, //注册局部组件
filters:{
function},//过滤器,在调用数据时比如{
{data|function}},可将data传入function中显示改变后的值
watch:{
data中的属性:function(newValue,oldValue){
}} //监听data中数据改变的话会做出一定的反应。
生命周期函数。。。
})
computed和methods的区别
其中computed和methods是初学者经常弄混的一个点。
- methods定义的是该实例所拥有的方法。
- computed所定义的则是一个属性(类似于data里保存的变量,只是这个变量由于data中的数据发生变化而得来),他定义的不是方法。属性对应的是一个对象,其含有get和set方法。当调用计算属性时,会自动调用get函数,所以可以不加小括号。但是计算属性很少用到set,所以便简写。
- 计算属性是有缓存的。如:如果系统检测到firstname和lastname没有发生改变,可以直接用原来的fullname,而不用重新调用fullname中的get。methods是每次调用必重新执行一次。
//完整写法(当data里定义了firstname和lastname属性时)
fullname:{
//此时fullname是只读属性,fullname属性本质对应的值是一个对象,对象会自动调用get,所以可不加小括号。
get:function(){
return this.firstname + this.lastname //调用属性返回的值
}
}
//简写
fullname:function(){
return this.firstname + this.lastname
}
---------------------------------------------------
fullname:{
//此时fullname属性可读也可写入
set:function(newValue){
const names = newValue.split(' ')
this.firstname = names[0];
this.lastname = names[1];
}
get:function(){
return this.firstname + lastname
}
}
app.fullname = "kobe bryant" //即可改变data中firstname和lastname的值
watch
watch只能监听data数据发生变化,如果对象内部属性发生变化他是检测不到的,除非设置deep:true
watch:{
obj.name{
function(){
},
deep:true //设置deep可以让watch监听到对象内部
}
}