计算属性 computed
从现有数据中计算出新数据（存在缓存）
computed:{
"rmsg":function(){
return this.msg.split("").reverse().join("")
}
}
监听事件 watch
检测数据是否发生变化，并执行相应操作
<body>
<div id="app">
<button @click="num++">{{num}}</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
num:1
},
//现有数据计算出新数据（缓存）
watch:{
"num":{
handler:function(news,old){
localStorage.setItem("num",news)
//数据存储到本地
console.log("num从"+old+"变为"+news)
}
}
},
//监听 检测数据是否发生变化，并执行相应操作
created(){
this.num=localStorage.getItem("num")*1||1
}
})
</script>
</html>
利用watch制作简易计算器
<body>
<div id="app">
<input type="text" v-model="obj.v1">
<select name="" id="" v-model="obj.type">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">/</option>
</select>
<input type="text" v-model="obj.v2">
<input type="text" v-model="obj.v3">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
obj:{v1:0,v2:0,v3:0,type:"+"}
},
methods:{
},
computed:{
},
//现有数据计算出新数据（缓存）
watch:{
"obj":{
handler:function(nval){
if(this.obj.type==="+"){
this.obj.v3= this.obj.v1*1+this.obj.v2*1
}else if(this.obj.type==="-"){
this.obj.v3= this.obj.v1-this.obj.v2
}else if(this.obj.type==="*"){
this.obj.v3= this.obj.v1*this.obj.v2
}else if(this.obj.type==="/"){
this.obj.v3= this.obj.v1/this.obj.v2
}
},
deep:true //可以深度检测到对象的属性值的变化
}
},
//监听 检测数据是否发生变化，并执行相应操作
})
</script>
</html>
过滤 filters
数据的格式化显示
用法：{{num|price}} {{num|price(’$’)}}
过滤器用于处理简单的文本转换，如格式化日期，字母全部大写，金额每隔千位要加分隔符等；要实现更为复杂的数据变换，应当使用计算属性。
<body>
<div id="app">
<h1>{{num}}</h1>
<h1>{{num|price('￥')}}</h1>
<h1>{{num|price('￥',4)}}</h1>
<!-- | 管道符-->
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
num:888.56278389,
},
filters:{
price:(val,type='',num=2)=>{
return type+val.toFixed(num) //省略小数点后num位
}
}
})
</script>
自定义指令directives
获取dom
<div v-img="xxx"></div>
directives:{
img:{
inserted(el,binding){
//el指令所在的dom
//binding.value 自定义指令的值
}
}
}
生命周期钩子函数
created
当vue创建完毕 可以获取到this