指令
-
v-model： 双向绑定数据 -
v-text： 绑定文本 -
v-html： 相当于innterHTML -
v-once：初始化的时候绑定一次，以后不发生变化 -
v-bind： 动态绑定属性
🌞🌞
自定义指令
例如：<p v-sushaod > sushaod </p> <p v-color="'red'" > sushaod </p>
new Vue({
el:'#app',
data:{
sushaod:true
},
diectives:{
sushaod(el){
el.style.color = 'red'
}
color(el , bindings){
el.style.color = bindings.value
}
}
})
事件
-
@click： 绑定点击事件(不写括号、默认传入事件对象event如果写fn()需要传入事件源fn($event))
事件修饰符 修饰符可以串联
-
.stop： 阻止冒泡 -
.prevent： 阻止默认行为 -
.capture： 捕获阶段发生，先执行带有该属性的方法，在执行事件源方法 -
.self： 自己作为事件源的时候才会发生 -
.once： 只能执行一次 -
.passive： 一般在移动端的滚动事件中使用 表示不阻止默认行为 提高性能
表单数据绑定
-
text： 绑定v-model 数据 -
checkbox： 绑定v-model 数组（注意加value） -
radio：自动变数组sex:'男' -
select：
v-for
-
<p v-for='item in 5' />： 循环数字5 从1到5
filters 过滤器过滤前面的变量 例:{{0.11111|toFixed}}
- 所有的过滤函数需要写在
filters:{}中，他相当于methods:{}VUE规定用来存放函数 - 🌞🌞
Vue.filter()：全局过滤器，在任何组件中都可以使用
例：Vue.filter(’toFixed‘,(target,n) => target.toFixed(n))
计算属性
- 所有的过滤函数需要写在
computed:{}中，他相当于data:{}在computed里面的属性，data里面就不可以在写 -
计算属性参与计算的值改变（值必须是在data里面初始化过的），计算属性会跟着改变
- 只有
get的情况下可以简写
watch 监听属性 自己改变影响别人 打开页面第一次默认不会执行
watch监控的属性是data中的属性-
如果监控的是
obj对象地址不变newVal和oldVal都一样需要深度，不然改变里面的属性是监控不到的 -
watch:{}: 里面放函数当监听data中的数据发生变化时，就会执行函数
v-if & v-show如果频繁操作使用 v-show 来提高性能
-
v-show： 原理是元素的样式display : none -
v-if： 原理是操作DOM，删除元素
ref操作DOM
<p ref='sushaodP'> {{sushaod}} </p>- vue 中 提供了让我们直接操作DOM的属性
ref -
this.$ref.sushaodP来调用 - 如果循环过个使用一个
ref： 则现在的$ref是一个数组
