v-xxx 表示有特定功能，用来操作 dom 元素
    **

    • v-text 默认渲染成文本
    • v-html 渲染成html
    • v-once 只渲染一次，再更改时直接从缓存中获取
    • v-for 遍历 数组、字符串、对象 key : 唯一的值，增加唯一性，避免同一父元素下相同元素复用
    • v-if / v-else / v-else-if 操作 dom 元素 显示/隐藏（一旦条件不成立 dom 元素是不存在的）
    • v-show 更改样式 显示/隐藏
    • v-on 绑定事件 简写 @xxx
      • .stop - 调用 event.stopPropagation()。 阻止冒泡
      • .prevent - 调用 event.preventDefault()。阻止默认行为
      • .capture - 添加事件侦听器时使用 capture 模式。采取捕获方式
      • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 操作是自己才会触发
      • .once - 只触发一次回调。
      • .passive - 模式添加侦听器 处理事件函数中不会调用 preventDefault 函数 ，减少额外的监听，不能与 prevent 同时使用
    • v-bind 绑定动态属性 简写 :
    • v-model 双向绑定
      • .lazy - 取代 input 监听 change 事件,失去焦点 数据更新
      • .number - 输入字符串转为有效的数字
      • .trim - 输入首尾空格过滤
    • 自定义指令

    不要把 v-if 和 v-for 同时用在一个元素上，v-for 的优先级比 v-if 更高

    1. [ 指令 ]
    3.     <div id="app" v-show="isShow">
    4.         <!-- <span v-text></span> 等同于 {{ msg }}  -->
    5.         <span v-text="msg"></span>
    6.         {{ msg }}
    7.         <div v-html="h"></div>
    8.         {{ h }}
    9.         <p v-once>{{ str }}</p>
    10.         <ul v-if="isShow">
    11.             <li v-for="(item,index) in arr" key=`${index}_a`>{{ item }}</li>
    12.         </ul>
    13.         <div v-else> 2333333</div>
    15.         <div v-show="isShow">3333333</div>
    16.     </div>
    17.     <script>
    19.         let vm = new Vue({
    20.             el: '#app',
    21.             data: {
    22.                 arr: [1, 2, 3, 4, 5],
    23.                 msg: '我不喜欢这个世界，我只喜欢你！',
    24.                 h: '<h1>Serendipity</h1>',
    25.                 str: '时光静好 岁月安然',
    26.                 isShow: false,
    27.                 age: 10,
    28.                 radioVal: "0",
    29.                 checkVal: false,
    30.             },
    31.         })
    33.     </script>
    36. [ 表单双向绑定 ]
    38.   <div class="Ipt" id="app">
    39.     <p>
    40.         <!-- <input type="text" :value="age" @input="fn"> -->
    41.         <!-- 下面这种是上面这种写法的语法糖 -->
    42.         <input type="text" v-model.lazy="age"> 
    43.         {{ age }}
    44.     </p>
    46.     <p>
    47.         <!-- 单选按钮 切换按钮时 radioVal 会切换为对应 value 的值 -->
    48.         <input type="radio" name="" id="" v-model="radioVal" value="0">男
    49.         <input type="radio" name="" id="" v-model="radioVal" value="1">女
    50.         {{ radioVal }}
    51.     </p>
    53.     <p> 
    54.         <!-- 单选框 checkVal 根据 true 和 false 判断是否选中 -->
    55.         <input type="checkbox" name="" id="" v-model="checkVal">
    56.         {{ checkVal }}
    57.     </p>
    59.     <p> 
    60.         <!-- 复选框 会把 选中的 value 值 放入到 v-model 绑定的数据中  -->
    61.         <input type="checkbox" name="" id="" v-model="checkArr" value="吃饭">吃饭
    62.         <input type="checkbox" name="" id="" v-model="checkArr" value="睡觉">睡觉
    63.         <input type="checkbox" name="" id="" v-model="checkArr" value="打豆豆">打豆豆
    64.         {{ checkArr }}
    65.     </p>
    67.     <p>
    68.         <!-- selectVal 值的获取方式 若 option 有 value 值，则获取 否则 option 里的内容  -->
    69.         <select name="" id="" v-model="selectVal">
    70.         <option value="0">杭州</option>
    71.         <option>厦门</option>
    72.         </select>
    73.         {{ selectVal }}
    74.     </p>
    76.     <p>
    77.         <!-- 多选下拉菜单  -->
    78.         <select name="" id="" v-model="selectArr" multiple>
    79.         <option value="0">杭州</option>
    80.         <option value="1">合肥</option>
    81.         <option value="3">厦门</option>
    82.         </select>
    83.         {{ selectArr }}
    84.     </p>
    85. </div>
    87. <script>
    88.     let vm = new Vue({
    89.         el: '#app',
    90.         data: {
    91.             age: 10,
    92.             radioVal: "0",
    93.             checkVal: false,
    94.             checkArr:[],
    95.             selectVal: 0,
    96.             selectArr: [],
    97.         },
    98.     })
    99. </script>
    102. [ 事件绑定 ]
    105.     <div id="app">
    106.         <!-- 冒泡: 由内到外   捕获 : 由外到内 -->
    108.         <!-- 采用捕获 ，其他元素还是采用冒泡的方式 -->
    109.         <!-- <div @click.capture="parent"> -->
    110.         <div @click="parent">
    111.             parent
    112.             <!-- @click.stop 阻止冒泡 -->
    113.             <div @click.stop="son">
    114.                 son
    115.                 <!-- prevent 阻止默认行为  self 点击自己的时候才会触发 once 只触发一次 passive 表示阻止默认行为 不能与 prevent 同时使用 -->
    116.                 <div @click.self="grandSon">
    117.                     grandSon
    118.                 </div>
    119.             </div>
    120.         </div>
    121.     </div>
    123.     <script>
    124.     let vm = new Vue({
    125.         el: '#app',
    126.         data: {
    127.         },
    128.         methods: {
    129.             // 绑定事件 事件名不要和属性名相同
    130.             parent() {
    131.                 alert('parent')
    132.             },
    133.             son() {
    134.                 alert('son')
    135.             },
    136.             grandSon() {
    137.                 alert('grandSon')
    138.             }
    139.         }
    140.     })
    141. </script>
    144. [ 自定义指令 ]
    146.  <!-- 自定义指令 -->
    147. <div class="custom">
    148.     <p>
    149.         <input type="text" v-focus.color="col">
    150.     </p>
    151. </div>
    153. <script>
    154.     //  `v-focus` 全局自定义指令
    155.     Vue.directive('focus', {
    157.         // 指令初始化时调用
    158.         bind() {
    159.             console.log('初始化');
    160.         },
    161.         // 当被绑定的元素插入到 DOM 中时……
    162.         inserted: function (el, bindings, vnode) { // el 绑定的元素,bindings 指令的参数,vnode 虚拟节点
    164.             console.log(bindings);
    165.             // 判断有无修饰符 如果有 进行操作
    166.             if (bindings.modifiers.color) {
    167.                 el.style.background = bindings.value
    168.             }
    169.             Vue.nextTick(() => {
    170.                 // 聚焦元素
    171.                 el.focus()
    172.             })
    173.         },
    174.         updata() {
    175.             console.log('更新时触发');
    176.         },
    177.         unbind() {
    178.             console.log('指令销毁 指令和绑定元素解绑时');
    179.         }
    180.     })
    182.     let vm = new Vue({
    183.         el: '#app',
    184.         data: {
    185.             col: 'red'
    186.         },
    187.         methods: {
    188.             // 局部自定义指令 只在当前 实例起作用
    189.             directives: {
    190.                 focus: {
    191.                     // 指令初始化时调用
    192.                     bind() {
    193.                         console.log('初始化');
    194.                     },
    195.                     // 当被绑定的元素插入到 DOM 中时……
    196.                     inserted: function (el, bindings, vnode) { // el 绑定的元素,bindings 指令的参数,vnode 虚拟节点
    198.                         console.log(bindings);
    199.                         // 判断有无修饰符 如果有 进行操作
    200.                         if (bindings.modifiers.color) {
    201.                             el.style.background = bindings.value
    202.                         }
    203.                         Vue.nextTick(() => {
    204.                             // 聚焦元素
    205.                             el.focus()
    206.                         })
    207.                     },
    208.                     updata() {
    209.                         console.log('更新时触发');
    210.                     },
    211.                     unbind() {
    212.                         console.log('指令销毁 指令和绑定元素解绑时');
    213.                     }
    214.                 }
    215.             }
    216.         }
    218.     })
    220. </script>