vue 001 模版指令和事件

指令

• 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是一个数组