vue指令

Vue实例

• 注意 1：推荐在创建实例之前，就声明所有的根级响应式属性
• 注意 2：可以通过 vm.$data 访问到data中的所有属性，或者 vm.msg
  • vm.$data.msg === vm.msg

var vm = new Vue({
  data: {
    msg: '大家好，...'
  }
})

vm.$data.msg === vm.msg // true

数据绑定

• 最常用的方式：Mustache，也就是 {{}} 语法
• 解释：{{}}从数据对象data中获取属性
• 说明：数据对象的属性值发生了改变，插值处的内容都会更新
• 说明：{{}}中允许使用JavaScript支持的所有表达式
• 注意：Mustache 语法不能作用在 HTML 元素的属性上

<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>

<!-- ！！！错误示范！！！ -->
<h1 title="{{ err }}"></h1>

指令

• 解释：指令 (Directives) 是带有 v- 前缀的特殊属性
• 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

常用指令

• v-text
• v-html
• v-bind

v-text

• 解释：更新元素的 textContent

<h1 v-text="msg"></h1>

v-html

• 解释：更新元素的 innerHTML

<h1 v-html="msg"></h1>

v-bind

• 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
• 语法：v-bind:title="msg"
• 简写：:title="msg"

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on

• 作用：绑定事件
• 语法：v-on:click="say" or v-on:click="say('参数', $event)"
• 简写：@click="say"
• 说明：绑定的事件从methods中获取
• 案例：跑马灯

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

 <div id="app">
    <button @click="lang">浪起来</button>
    <button @click="stop">安静</button>

    <h1 v-text="msg"></h1>
  </div>

  <script src="./vue.js"></script>
  <script>
    // var timerId;

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '猥琐发育，别浪~!',
        // 定时器id
        // 目的：data是一个公共的位置，将来所有的方法都可以获取到这个值
        timerId: null
      },
      methods: {
        lang: function () {
          // 先清除定时器，再重新开启定时器
          clearInterval(this.timerId)

          var that = this
          // 思路：
          // 每次将当前字符串的第一个字符追加到字符串的最后面
          this.timerId = setInterval(function () {
            // 1 获取到第一个字符
            var first = that.msg[0]
            // 2 获取到后面所有的字符
            var last = that.msg.substr(1)
            // 3 拼接字符串
            that.msg = last + first
          }, 200)
        },
        stop: function() {
          clearInterval(this.timerId)
        }
      }
    })
  </script>

事件修饰符

• .stop 阻止冒泡，调用 event.stopPropagation()
• .prevent 阻止默认事件，调用 event.preventDefault()
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once 事件只触发一次

v-model

• 作用：在表单元素上创建双向数据绑定
• 说明：监听用户的输入事件以更新数据
• 案例：计算器

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<div id="app">
    <input type="text" v-model="num1">
    <select v-model="opt" @change="calc">
      <option value="0">+</option>
      <option value="1">-</option>
      <option value="2">*</option>
      <option value="3">/</option>
    </select>
    <input type="text" v-model="num2">
    <button @click="calc">=</button>
    <input type="text" v-model="result">
  </div>

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',

      // 为视图提供数据
      data: {
        num1: '',
        num2: '',
        result: '',
        opt: '0'
      },

      // 为视图提供方法
      methods: {
        calc: function () {
          // console.log(this.num1, this.num2, this.opt);
          switch (this.opt) {
            case '0':
              this.result = (this.num1 - 0) + (this.num2 - 0)
              break;
            case '1':
              this.result = this.num1 - this.num2
              break;
            case '2':
              this.result = this.num1 * this.num2
              break;
            case '3':
              this.result = this.num1 / this.num2
              break;
          }
        }
      }
    })
  </script>

v-for

• 作用：基于源数据多次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

key属性

• 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
• 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

样式处理 -class和style

• 说明：这两个都是HTML元素的属性，使用v-bind，只需要通过表达式计算出字符串结果即可
• 表达式的类型：字符串、数组、对象
• 语法：

<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if 和 v-show

• 条件渲染
• v-if：根据表达式的值的真假条件，销毁或重建元素
• v-show：根据表达式之真假值，切换元素的 display CSS 属性

提升性能：v-pre

• 说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

提升性能：v-once

• 说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>