When creating an instance with new Vue(), the parameter passed inside is an object, which has many default properties.
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中数据改变的话会做出一定的反应。
生命周期函数。。。
})
The difference between computed and methods
Among them, computed and methods are a point that beginners often confuse.
- Methods defines the methods owned by the instance.
- What computed is defined is an attribute (similar to a variable saved in data, except that this variable is derived from changes in the data in data), and what he defines is not a method . The attribute corresponds to an object, which contains get and set methods. When the calculated attribute is called, the get function is automatically called, so the parentheses can be omitted. However, set is rarely used in calculation properties, so it is abbreviated.
- The calculated attributes are cached. For example, if the system detects that the firstname and lastname have not changed, the original fullname can be used directly instead of calling the get in fullname again. Methods must be re-executed every time it is called.
//完整写法(当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 can only monitor changes in data data. If the internal properties of the object change, it cannot be detected unless deep: true is set.
watch:{
obj.name{
function(){
},
deep:true //设置deep可以让watch监听到对象内部
}
}