Vue指令

v-text

不能解析标签，会替换标签内的内容，相当于innerText

    <div v-text="d"></div>

v-html

与v-text相似但可以解析标签，相当于innerHTML

   <div v-html="d"></div>

v-show

根据表达式的真假，切换元素的显示和隐藏（v-show后可以接布尔值 data中的变量 表达式等）

 <!-- v-show 引起的是 redraw 性能消耗比 reflow更小 -->
      <div v-show="c" style="display: flex;"> 是否显示 </div>

v-if

• 根据表达式的真假，切换元素的显示和隐藏（操控dom元素）
• v-if 后可接布尔值 data中的变量 表达式等
• 与v-show类似，区别为v-show是display显示与隐藏
• v-if 直接在dom文档中将元素注销，因此需要更多的内存

<!-- v-if 根据状态的布尔值来决定是否渲染 -->
      <!-- v-if 因引起reflow -->
      <div v-if="b">  是否渲染 </div>

v-else-if

• 充当v-if的else if，可以连续使用
• 必须配合v-if 一起使用 ，否则不会被识别

v-else

当前面的v-if，v-else-if均不符合条件时执行，所以v-else后不需要跟判断条件

    <!-- v-if 和 v-else-if 和v-else的条件判断一定要组合使用 不能中间穿插有其他的没有绑定条件的节点  -->
      <div v-if="g1"> place1 </div>
      <div v-else-if="g2"> place3 </div>
      <div v-else> place2 </div>

v-for

• 根据数据生成列表结构，相当于js中的for in循环，可以根据数据多次渲染元素
• 特点：可以遍历数组、字符串、数字、对象
• 使用v-for必须要配合：key使用，提升性能，防止列表状态紊乱（key的值只能是字符串或数字，且必须具有唯一性）
• 建议把id作为key，使用index作为key没有意义（index会变动）

        列表渲染
        <!-- v-for 里面可以是 in 也可以是 of -->
        <!-- 使用 v-for一定要有 key的绑定！！！ -->
        <div v-for="item in  m" :key="item.id">
           {{ item.id }} -  {{ item.title }}
        </div>

        <div v-for="(item,index) in  m" :key="item.id">
          {{ item.id }} - {{ item.title }} - 索引 {{ index }}
        </div>
        <!--  v-for 可以循环一个字符串 -->
        <div v-for="it in 'abcdefg'" :key="it">
            {{ it }}
         </div>
         <!-- v-for 还可以循环一个整数 -->
         <div v-for="it in 5">
           {{ it }}
         </div>

	data{
		 m: [
                { id:1,title: '我是标题1' },
                { id:2, title: '我是标题2' },
                { id:3, title: '我是标题3' },
              ]
	}

v-for与v-if无法连用 如果需要一起使用需要模板

<template v-for="(item, index) in arr" :key="index">
      <li  v-if="item.checked">
        <input type="checkbox">
      </li>
    </template>

v-on

为元素绑定事件

<div v-on:click="fn1">  事件的绑定1 </div>

使用v-on进行绑定或简写成@ 事件执行函数则在Vue实例的methods中
当methods中的函数需要对data中的变量进行修改时，this.变量就能读取
可以携带参数，在调用的函数名后传入形参

事件对象
当v-on绑定事件需要使用事件对象时
当调用函数没有传参，那可以在函数内部直接使用e事件对象（与事件监听相同）
当调用函数需要传参时，则需要在传参时使用$event传入并在函数内部进行接收

事件修饰符

事件修饰符	说明
.prevent	阻止默认行为
.stop	阻止事件冒泡
.capture	捕获阶段处理事件函数
.once	只触发一次
.self	只会触发自己范围内的事件，不会包含子元素
.native	监听组件根元素的原生事件
.left	只有点击鼠标左键触发
.right	只有点击鼠标右键触发
.middle	只有点击鼠标中键触发
.passive	以 { passive: true } 模式添加侦听器
. { keyCode | keyAlias}	只当事件是从特定键触发时才会触发回调

键盘事件修饰符

事件修饰符	说明
.enter	回车键
.tab	制表键
.delete	含delete和backspace键
.esc	返回键
.space	空格键
.up	向上键
.down	向下键
.left	向左键
.right	向右键

鼠标事件修饰符

事件修饰符	说明
.left	鼠标左键
.middle	鼠标中间滚轮
.right	鼠标右键

修饰键

可以用修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应

事件修饰键	说明
.ctrl	ctrl键
.alt	alt键
.shift	shift键
.meta	mac 的 command 键 (⌘)
.exact	控制由精确的系统修饰符组合触发事件（有且仅有加入的修饰符才有效）

详细用法介绍

• 绑定事件如果是等于函数名的写法 那么第一个参数就是event对象

<div v-on:click="fn1">  事件的绑定1 </div>

 methods:{
              fn1(ev){
                console.log('fn1 fired',ev)
              }
         }
 // 在methods当中可以声明自定义的函数 
 // 这里声明的函数也会挂在在 vue实例上

• 如果绑定的值是函数执行 那么需要手动的传入$event才能获取event对象

 <div v-on:click="fn2($event,'abc')"> 事件的绑定2</div>

 methods:{
              fn2(arg1,arg2){
                console.log('fn2 fired')
                console.log('参数1',arg1)
                console.log('参数2',arg2)
              }
         }

• 一个标签绑定多个同类型事件有两种方式

	<div v-on:click="fn1(),fn2()"> 事件的绑定3-1 一次事件指定过个函数</div>
	<div v-on:click="fn1();fn2()"> 事件的绑定3-2 一次事件指定过个函数</div>

• 单次绑定（点击一次触发后不再触发）

 <div @click.once="fn1">事件的绑定3-3 单次绑定 </div>`

• 同时绑定多个不同类型的事件

<div v-on="{ click:fn1,mouseover:fn2 }"> 事件的绑定3-4 对象方法 </div>

• 修改状态

<div @click="fn6"> 事件的绑定3-5 修改状态1 </div>
<!--  vue当中允许我们在事件的绑定当中等于简单的语句 -->
<div @click="a='hi我也是新的值'"> 事件的绑定3-5 修改状态2 </div>

   data:{  // vue当中的状态    data生命的状态会挂在Vue实例上面
              a:' hi vue',
        ｝
    methods:{
              fn6(){
                // this 可以直接访问实例
                this.a = 'hi 我是新的值'
              },
            }

<div @click.ctrl.alt.exact="fn1"> 事件的绑定3-6 </div>

• 阻止默认行为（.prevent）、阻止事件冒泡(.stop)

 <a href="http://baidu.com" @click.prevent="fn3">跳转到百度</a>

      <div class="out" @click.stop="fn4"> 
          <div class="in" @click="fn5"></div>
      </div>

v-bind

设置元素属性(比如:src,title,class)

 <div v-bind:id="f" class="c" v-bind:class="f3"></div>
      <!-- v-bind:xxx 可以简写成 :xxx -->
 <div :style="e"> style的绑定 </div>

 data:{  // vue当中的状态    data生命的状态会挂在Vue实例上面
              c:  true,
              f: 'kfc',
              f1: ['a','b','e'],
              f2: 'abc',
              f3: {
                a: 1,
                b: true,
                e:'',
                d:0 
              },
              e:{
                fontSize:'50px',
                color:'red'
              }

v-model

双向绑定

        <div> v-model</div>
        
        <div>
          <div> h : {{ h }} </div>
          <!--  react 受控空间 vue 当中称之为数据的双向绑定 -->
           <input type="text" v-bind:value="h" @input="ev=>h=ev.target.value">
           <input type="text" v-model="h">
        </div>
        
        <hr />
        <div> 
          <div> i: {{ i }} </div>
          <select  :value="i" @change="ev=>i=ev.target.value">
            <option value="a"> 选项1</option>
            <option value="b"> 选项2</option>
            <option value="c"> 选项3</option>
          </select>

          <select v-model="i">
            <option value="a"> 选项1</option>
            <option value="b"> 选项2</option>
            <option value="c"> 选项3</option>
          </select>
        </div>
        
        <hr />
        <div>
            <div> j: {{ j }} </div>
            <!-- <input type="radio" :checked="j" @change="ev=> j = ev.target.checked "> -->
            <!-- <input type="radio" v-model="j" value="123"> -->

            <div> k: {{  k }}</div>
            <input type="checkbox" :checked="k" @change="ev=> k = ev.target.checked ">
            <input type="checkbox"  v-model="k">

          </div>
   

v-model修饰符
对用户输入的内容进行处理

事件修饰键	作用
.number	自动将用户输入的值转为数字类型
.trim	自动过滤用户输入的首尾空格
.lazy	在change时input时更新

v-once

单次数据绑定（只读取一次data中数据，后续data数据变化视图不变）

   <div v-once> {{ a }} </div>

v-pre

页面中直接显示标签内的内容（不进行vue的编译）

 <div v-pre> {{ 1+1 }} </div> 

v-cloak

不会显示 直到编译结束

[v-cloak]{
	display:none;
}

<div v-cloak>
 {{ message }}
</div>