vue中的常用指令

vue常用指令

• v-cloak：防抖动

  [v-cloak]{
      display:none;
  }
  

• v-text ：类似于innerText 不可以解析富文本，原文输出，都会覆盖原来的值

• v-html ：类似于innerHTML 可以解析富文本

• v-bind：绑定属性 语法糖 是:

  v-bind绑定class

    <div id="app">
      <!-- <h2 v-bind:class="{类名1:true,类名2:boolean}">{{message}}</h2> -->
      <!-- 在class里放了一个对象，(对象语法)里面都是键值对的形式存在 ，当class为true时，这个类名起作用
          当属性值为false时，这个类名不起作用。而且标签内部的class不会覆盖
         -->
      <h2 class="title" v-bind:class="{ active: isActive,line: isLine }" v-cloak>
        {{message}}
      </h2>
      <button v-on:click="btnClick()">按钮</button>
    </div>
  
    <div id="app">
      <div class="red">鹅鹅鹅，拔毛烧开水，铁锅炖大鹅！</div>
      <div :class="color1">鹅鹅鹅，拔毛烧开水，铁锅炖大鹅！</div>
      <!-- 三目表达式 -->
      <div :class="isLogin?'red':'fs40'">鹅鹅鹅，拔毛烧开水，铁锅炖大鹅！</div>
      <!-- 数组（元素加引号的是字符串，不加引号的是变量，去data中查找变量的值） -->
      <div :class="['red','fs40']">鹅鹅鹅，拔毛烧开水，铁锅炖大鹅！</div>
      <div :class="[color1,fs4]">鹅鹅鹅，拔毛烧开水，铁锅炖大鹅！</div>
      <div :class="[isLogin?color1:color2,fs4]">
        鹅鹅鹅，拔毛烧开水，铁锅炖大鹅！88888888888
      </div>
      <!-- 对象 （属性名默认都是字符串的形式，加不加引号都是字符串）-->
      <div :class="{color:isLogin}">鹅鹅鹅，拔毛烧开水，铁锅炖大鹅！999999999999</div>
      <div :class="{'red':false}">鹅鹅鹅，拔毛烧开水，铁锅炖大鹅！</div>
    </div>
  

  vue中绑定style样式 通过函数的返回值设置样式 尽量的把一些逻辑放到methods函数中处理,不会覆盖原来的类名

   <!-- 方法中加小括号是立即调用执行的意思，我们想要的就是div加载前就把样式展示出来 -->
  <div :style="getStyle()">{{message}}</div>
  
  

      methods: {
        getStyle() {
          let obj = {
            color: 'red',
              //如果属性名中有连接符则必须用引号引起来
            'font-size': '50px'
          };
          return obj
        }
      },
  

• v-on: 绑定事件 语法糖 @

事件修饰符

• .stop 阻止事件冒泡，事件触发默认是从外向里执行，由里向外冒泡，从外向里是捕获，由内到外是冒泡
• .capture 变为捕获模式（默认冒泡模式），被捕获的事件会在从外到里的时候触发
• .self 只有作用于自身是才执行 不会阻止冒泡事件
• .prevent 阻止事件的默认事件，有两个，a链接的跳转，表单的提交事件
• .once 事件触发时只执行一次

v-if 和v-show

相同点：都可以控制元素的显示与隐藏

区别：

• v-if 删除dom元素，操作dom元素很耗费性能

  可以使用v-if v-else-if v-else 但必须连着写

• v-show 操作display，控制显示与隐藏

应用场景：

• 只操作一次或少次时，用v-if 比如登录退出
• 需要频繁操作时，用v-show

全局过滤器和私有过滤器

• 全局过滤器 Vue.filter(“过滤器函数名”,function(data,format){})

  <div id="app">
      <p>{{msg | 过滤器函数名(format)}}</p>
  </div>
  

  // 在全局中通过过滤器过滤敏感词汇和对日期格式化 
  Vue.filter("过滤器函数名",function(data,format){
     retuen data + format
  })
  

• 私有过滤器 filters() ,只在当前vue实例中有效

const app = new Vue({
    el:"#app",
    data:{
        msg:"年轻人不讲武德"
    },
    filters:{
        //data 是要处理的数据，format是处理的格式，
        // <p>{{msg | 过滤器函数名(format)}}</p>  数据和方法之间通过  管道符分割
        函数名(data,format){
            // 通过过滤器实现过滤敏感词汇
            return data.replace("年轻人","**")
        }
    }
})

通过过滤器格式化日期：

 <td>{{item.time | timeFormat('YYYY-MM-DD hh:mm:ss') }}</td>

        // 私有过滤器        filters:{          timeFormat(data,format){            let Y = data.getFullYear();            let M = (data.getMonth() + 1).toString().padStart(2, 0);            let D = data.getDate().toString().padStart(2,0);            let h = data.getHours();            let m =data.getMinutes().toString().padStart(2,0)            let s = data.getSeconds().toString().padStart(2,0)            return             format.replace('YYYY',Y).replace("MM",M).replace("DD",D).replace("hh",h).replace("mm",m).replace("ss",s)          }        }

键盘修饰符

定义：监听任意一个指定的按键

• .enter 回车
• .tab 制表符
• .delete 删除
• .esc 退出
• left
• right
• up
• down
• space 空格

自定义按键别名 ：Vue.config.keyCodes.f1 = 112

意义：增加代码的可维护性 和可读性

自定义指令

全局自定义指令

自动聚焦指令只能有一个生效，绑定多个的话只有最后一个生效

<input v-color="'red'">

Vue.directive("color",{    //el 是我们要绑定的dom元素    bind(el,binding){                console.log(binding.value)    },    inserted(el){            },    update(el){            }，  })

私有自定义指令

const app = new Vue({
    directives:{
     //自定义color指令
        color2: {
          // 初始化   binding是一个对象，value属性表示我们指令等于的值
          bind(el, binding) {
            console.log(binding);
            el.style.color = binding.value;
          },
          //  数据渲染到页面上后触发
          inserted(el) {
            el.style.fontSize = "40px";
          },
          // 数据更新时触发，第一次渲染不会触发
          update(el) {
            el.style.color = "blue";
          },
        }
    }
})

v-for

1. 遍历数组，参数(item,index) in list

2. 遍历对象，参数(value,key,index) in list

3. 遍历数字，num in 10 (1~10) 使用场景：循环占位符，占位符都是相同的，我们需要几个就循环几个

   v-for=（num in 10）

一般是循环数组

<li v-for="(item,index) in arr" :key="index">{{item}} {{index}}</li>

因为删除dom元素的操作是非常耗费性能的，使用key属性可以提高重排效率。

只要使用了v-for就必须添加key属性

聊一聊key

• key只能是数字或字符串
• key必须是唯一的，我们通常使用index或者是作为key的属性值
• 有v-for循环的地方就必须要加上，养成良好习惯

v-model 数据双向绑定

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，
通过Object.defineProperty()来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。