内容渲染指令

  1. v-text 指令的毛病：会笼罩元素外部原有的内容！
  2. {{ }} 插值表达式：在理论开发中用的最多，只是内容的占位符，不会笼罩原有的内容！
  3. v-html 指令的作用：能够把带有标签的字符串，渲染成真正的 HTML 内容！

属性绑定指令

留神：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！
  • 在 vue 中，能够应用 v-bind: 指令，为元素的属性动静绑定值；
  • 简写是英文的 :

  • 在应用 v-bind 属性绑定期间，如果绑定内容须要进行动静拼接，则字符串的里面应该包裹单引号，例如：

    <div :title="'box' + index">这是一个 div</div>

事件绑定

  • 在 vue 提供的模板渲染语法中，除了反对绑定简略的数据值之外，还反对 Javascript 表达式的运算

    例 :{{ OK ? 'YES' : 'NO'}}{{ message.split('').reverse().join('') }}

  • vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听

    <h3>count 的值为 : {{ count }}</h3><!-- 语法格局为 v-on:事件名称="事件处理函数的名称" --><button v-on:click="addCount">+1</button>

    留神：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定模式后， 别离为：v-on:click、v-on:input、v-on:keyup

  • 通过 v-on 绑定的事件处理函数，须要在 methods 节点中进行申明：

    const vm = new Vue({   el: '#app',   data: { count: 0 },    methods: {        //v-on 绑定的事件处理函数,须要申明在 methods 节点中        addCount() { // 事件处理函数的名字        // this 示意以后 new 进去的 vm 实例对象,        // 通过 this 能够拜访到 data 中的数据        this.count += 1        }        },        })
  1. v-on: 简写是 @

  2. 语法格局为：

    <button @click="add"></button>methods: {   add() {            // 如果在办法中要批改 data 中的数据，能够通过 this 拜访到            this.count += 1   }}

  3. $event 的利用场景：如果默认的事件对象 e 被笼罩了，则能够手动传递一个 $event。例如：

    <button @click="add(3, $event)"></button>methods: {   add(n, e) {            // 如果在办法中要批改 data 中的数据，能够通过 this 拜访到            this.count += 1   }}

    注:$event 是 vue 提供的非凡变量，用来示意原生的事件参数对象 event。$event 能够解决事件参数对象 event

    被笼罩的问题。

  4. 事件修饰符：

    • .prevent 阻止默认行为

      (例: 阻止a链接的跳转, 阻止表单的提交等)

      <a @click.prevent="xxx">链接</a>

    • .stop 阻止事件冒泡

      <button @click.stop="xxx">按钮</button>

    • capture 以捕捉模式触发以后的事件处理函数

      .once 绑定的事件只触发1次

      .self 只有在 event.target 是以后元素本身时触发事件处理函数

v-model 指令

  1. input 输入框

    • type="radio"
    • type="checkbox"
    • type="xxxx"
  2. textarea

  3. select

    v-model指令的修饰符

    为了不便对用户输出的内容进行解决, vue为v-model指令提供了3个修饰符,别离是:

    修饰符作用示例
    .number主动将用户的输出值转为数值类型<input v-model.number="age">
    .trim主动过滤用户输出的首尾空白字符<input v-model.trim="msg">
    .lazy在"change"时而非"input"时更新<input v-model.lazy="msg">

条件渲染指令

  1. v-show 的原理是：动静为元素增加或移除 display: none 款式，来实现元素的显示和暗藏

    • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好

  2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和暗藏

    • 如果刚进入页面的时候，某些元素默认不须要被展现，而且前期这个元素很可能也不须要被展现进去，此时 v-if 性能更好
在理论开发中，绝大多数状况，不必思考性能问题，间接应用 v-if 就好了！！！

v-if 指令在应用的时候，有两种形式：

  1. 间接给定一个布尔值 true 或 false

    <p v-if="true">被 v-if 管制的元素</p>

  2. 给 v-if 提供一个判断条件，依据判断的后果是 true 或 false，来管制元素的显示和暗藏

    <p v-if="type === 'A'">良好</p>
  3. v-else | v-else-if 指令必须配合v-if指令一起应用,否则它将不会被辨认.

列表指令渲染

  1. v-for 指令须要应用 item in items 模式的非凡语法:

    • items 是待循环的数组
    • item 是被循环的每一项
  2. (应用key保护列表的状态)
  3. 应用key保护列表的转态

  1. key的注意事项:

    • key的值只能是字符串或数字类型
    • key的值必须具备唯一性(即:key的值不能反复)
    • 倡议把数据项id属性的值作为key的值(因为id属性的值具备唯一性)
    • 应用index的值当作key的值没有任何意义(因为index的值不具备唯一性)
    • 倡议应用v-for指令时肯定要指定key的值(既晋升渲染性能,有避免列表状态错乱)