属性1:el
–element 选择器, 通过el指定vm1所管理的view的位置
属性2:data
– 是用来在viewmodel中组织从页面上抽象出来的数据结构
属性3:methods
– 方法参数,该参数内部存放各种方法
methods:{ //约定一种方式
say(){
return 21131
},
learn(){
alert("学习编程!")
}
}
属性4:template
– 字符串模板 (可以放在view视图里,也可以作为mobel数据里vue对象属性)
方式1:在view视图里
<template id="v2-view">
<div>...</div>
</template>
方式2:作为vue属性
template:"<div><h1>template view</h1></div>"
属性5:render
– 定义视图的一种方法,创建createElement
render(createElement){
let tree= createElement("div",{},[
createElement("h1",{},"helloworld"),
createElement("p",{},"hello world vue vnode")
])
console.log(tree)
//<div>helloworld</div>
return tree;
}
属性6:compudted
–计算属性, 把方法写在computed方法里,方法名当属性名来用
属性7:watch
– watch为一个vue对象属性
watch:{
msg:function (newObj,oldObj) { // 前面的参数为新的 后面的为原来的
console.log(newObj,oldObj)
if(newObj === "hello"){
console.log("you are ok")
}
},
user:{ // 这类方法表示 watch不能监听内部还嵌套的数据 不然渲染不出来
handler:(n,o)=>{
console.log(n)
},
deep:false
}
}
拓展:
----//在创建的时候没有指定viewmodel的视图的位置
----手动绑定 不用在data里写el属性 手动vm指定到view 手动把viewmodel挂载
作者:@八度余温*
个人博客:https://mp.csdn.net/