表单修饰符
lazy
将 v-model 由原来 input事件改为 change事件触发number
将v-model绑定的值，自动过滤成数字（按照parseFloat 顺序解析）（如果需要开头就是非数字字符，失去功能）trim
去除开头结尾空格
<input type="text" v-model.lazy="pro.goodNum">
ref 方便获取dom元素
Vue 尽量减少dom操作，以数据驱动为主
<body>
<div id="app">
<div ref="box">aaa</div>
<p ref="op">ppp</p>
<a href="" ref="aa">dwdw</a>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
},
mounted(){
//获取到所有设置ref的dom元素
console.log(this.$refs);
this.$refs['box'].style.background="red";
//document.querySelector("div").style.background="green"
}
})
</script>
</body>
计算属性
语法:
let vm = new Vue({
data:{
msg:'hello world'
},
computed:{
msg2(){ // 写法是 方法 编译到实例上 是和 data中的属 性一样的 值（不是函数）
return this.msg.split('').reverse().join('');
}
}
})
注意：
计算属性 名字 不能和 data（methods）中 已存在的 属性 重名
计算不要去修改 计算属性的值 应该去修改 计算属性依赖的值
如果需要修改计算属性
计算属性 需要 使用 get和set的写法
{
data:{
msg:'hello world'
},
computed:{
msg2:{
get(){
return this.msg.split('').reverse().join('');
},
set(val){
// 每一次修改 计算属性时，set触发，同时，修改的值，通过val传入
this.msg = val;
}
}
}
}
