一、什么是指令

        在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头 。

二、插值表达式 

        在dom标签中直接插入内容，又叫声明式渲染/文本插值。

        语法：{{ 表达式 }}

        注意：dom中插值表达式赋值, vue的变量必须在data里声明

三、vue中常用 v-指令

1.v-bind 

• 作用：给标签属性设置vue变量的值。
• 语法：v-bind:属性名="vue变量"  或  :属性名="vue变量"

• <!-- vue指令-v-bind属性动态赋值 -->
  <a v-bind:href="url">我是a标签</a>
  <img :src="imgSrc">

2.v-on 

• 作用：给标签绑定事件
• 语法：v-on:事件名='要执行的代码(少量)'
             v-on:事件名='methods方法中的函数'
             v-on:事件名='methods方法中的函数(实参)'
          简写： @事件名='methods函数

• <p>{{ count }}</p>
  <button v-on:click="fn(5)">+5</button><script>
  export default {data(){return {count:1}}methods: {fn(num){this.count += num},}}
  </script>

• v-on修饰符
  在事件后面.修饰符名 - 给事件带来其他功能
  语法：@事件名.修饰符='methods函数'
          .stop --- 阻止事件冒泡
          .prevent --- 阻止默认行为
          .once --- 程序运行期间，只触发一次事件处理函数
• 按键修饰符
  语法：
          @keyup.enter --- 检测回车按键
          @keyup.esc --- 监测退出按键
  更多：事件处理 — Vue.js

 3.v-model

• 作用：双向数据绑定，数据变化与视图同步，视图变化与数据同步
• 语法：v-model='变量'

• <select v-model="from"><option value="北京市">北京</option><option value="南京市">南京</option><option value="天津市">天津</option>
  </select><script>
  export default {return {from='',}
  }
  </script>

  注意：在 input 的多选框中，变量为数组则绑定的是value属性里的值，为非数组则绑定的是checked属性(true/false)

• v-model修饰符
  语法：v-model.修饰符=‘变量’
          .number 以parseFloat形式转成数字型
          .trim 去除首尾空白字符
          .lazy 在change时触发而不是在input时

 4. v-text 与 v-html

• 作用：更新DOM对象的innerText/innerHTML
• 语法：
          v-text='变量'
          v-html='变量'
  注意：会覆盖插值表达式
• 区别：v-text把值当成普通字符串显示, v-html把值当做html解析

• <template><div><p v-text="str"></p><p v-html="str"></p></div>
  </template><script>
  export default {data() {return {str: "<span>我是一个span标签</span>"}}
  }
  </script>

 5.v-show 和 v-if

• 作用：
  v-show 用display:none方式隐藏dom (频繁切换使用)
  v-if 直接从DOM树上移除
• 语法：
  v-show="变量"
  v-if="变量"
• v-if 可以跟 v-else-if 和 v-else 配合使用

• <template><div><h1 v-show="show">v-show的盒子</h1><h1 v-if="show">v-if的盒子</h1><div><p v-if="age > 18">成年</p><p v-else>还没成年</p></div></div>
  </template><script>
  export default {data() {return {show: true,age: 15}}
  }
  </script>

6. v-for（最常用）

• 作用：渲染列表，按照数据循环生成所在标签的结构
• 语法：
          .v-for='(值,索引) in 目标数据'
          .v-for='值 in 目标数据'
• 目标数据：可以遍历数组，对象，数字，字符串（能遍历结构）
• 注意：v-for 的临时变量名不能用到v-for范围外
• 口诀：让谁循环就把v-for放在谁身上

• <template><div id="app"><div id="app"><p>学生姓名</p><ul><li v-for="(item, index) in arr" :key="item">{{ index }} - {{ item }}</li></ul><p>学生详细信息</p><ul><li v-for="obj in stuArr" :key="obj.id"><span>{{ obj.name }}</span><span>{{ obj.sex }}</span><span>{{ obj.hobby }}</span></li></ul><!-- v-for遍历对象(了解) --><p>老师信息</p><div v-for="(value, key) in tObj" :key="value">{{ key }} -- {{ value }}</div><!-- v-for遍历整数(了解) - 从1开始 --><p>序号</p><div v-for="i in count" :key="i">{{ i }}</div></div></div>
  </template><script>
  export default {data() {return {arr: ["小黑", "小红", "大黄"],stuArr: [{id: 1001,name: "小陈",sex: "男",hobby: "吃饭",},{id: 1002,name: "小健",sex: "男",hobby: "追媳妇",},],tObj: {name: "小辉",age: 18,class: "8班",},count: 10,};},
  };
  </script>