v-cloak、v-text 和 v-html 的使用

v-cloak 的使用

v-cloak 可以解决当网页很慢时，网页在加载的时候会显示 {{ message }} ，等网页加载完毕才显示 {{ message }} 的具体内容，即 v-cloak 和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 {{ message }} 标签直到实例准备完毕。

示例

[v-cloak] {
  display: none;
}

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

v-text 的使用

v-text 可以更新元素的文本内容，和 {{ message }} 具有相同的功效，但是如果要更新部分的文本内容，需要使用 {{ message }} 插值，v-text 会覆盖标签内的全部内容。并且 v-text 不会出现网页加载时出现的显示 {{ message }} 的问题。

示例

<span v-text="message"></span>
<!-- 和下面的一样 -->
<span>{{ message }}</span>

区别

<div id="app">
  <p v-cloak>---- {{ message }} -------</p>
  <p v-text="message">---------</p>
</div>

<!-- 
运行效果：
---- Hello Vue! -------
Hello Vue! 
-->

v-html 的使用

v-html 可以更新元素的 innerHTML。

<div id="app">
  <p>{{ html }}</p>
</div>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      html: "<h1>I am a h1.</h1>"
    }
  });
</script>
/*
网页显示效果：
<h1>I am a h1.</h1>
*/

使用 v-text 也不会解析 h1 标签，这样的情况可以使用 v-html 来解析 h1 标签：

<div id="app">
  <p v-html="html"></p>
</div>

v-html 和 v-text 一样都会覆盖标签内的文本内容。

v-bind

用于绑定属性的指令。

<!-- 将 message 的值赋给 title 属性，引号里面的内容也可以时合法的 JS 表达式 -->
<input type="button" value="button" v-bind:title="message" />
<!-- 将引号内的 jS 表达式赋给 title -->
<input type="button" value="button" v-bind:title="message + 'info'" />

v-bind:title 也可以简写成 :title，即 v-bind 可以简写成 :。

<input type="button" value="button" v-bind:title="message" />
<!-- 简写 -->
<input type="button" value="button" :title="message" />

v-on

缩写：@。用于绑定事件监听器。

<!-- 按钮点击就会触发 sayHello 方法 -->
<!-- click 可以换成 mousemove 等 -->
<input type="button" value="button" v-on:click="sayHello" />

<script>
  var vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      sayHello: function() {
        alert("Hello!");
      }
    }
  });
</script>

缩写样式

<input type="button" value="button" @click="sayHello" />

事件修饰符

修饰符是由点开头的指令后缀来表示的。

• .stop：阻止冒泡

  <!-- 未加上 .stop 之前，点击 button 的时候会先触发 sayHello 后触发 sayWorld，加上 .stop 后阻止冒泡，只触发 sayHello -->
  <div id="app" @click="sayWorld" style="background-color: red; height: 50px;">
    <input type="button" value="button" @click.stop="sayHello" />
  </div>
  

• .prevent：阻止默认事件

  <!-- 当添加 ```.prevent``` 之后，只会触发 sayHello 不会跳转到百度 -->
  <a href="http://www.baidu.com" @click.prevent="sayHello">有问题，去百度</a>
  

• .capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理

  <!-- 下面的代码会先触发 sayWorld 然后触发 sayHello -->
  <div
    id="app"
    @click.capture="sayWorld"
    style="background-color: red; height: 50px;"
  >
    <input type="button" value="button" @click="sayHello" />
  </div>
  

• .self：只有当前元素自身时触发处理函数，即事件不是从内部元素触发的

  <!-- 点击 button 时，不会触发 sayWorld，只有点击 div 时，才会触发 -->
  <div
    id="app"
    @click.self="sayWorld"
    style="background-color: red; height: 50px;"
  >
    <input type="button" value="button" @click="sayHello" />
  </div>
  

• .once：点击事件将只会触发一次

  <!-- .prevent 只触发一次，第二次点击时就会跳转到百度 -->
  <a href="http://www.baidu.com" @click.prevent.once="sayHello">百度一下</a>
  

  self 可以阻止自身的冒泡。

<!-- 点击 button 时，指挥触发 sayRed 和 sayButton -->
<div id="app" @click="sayRed" style="background-color: red; height: 100px;">
  <div
    id="app2"
    @click.self="sayBlue"
    style="background-color: blue; height: 50px;"
  >
    <input type="button" value="button" @click="sayButton" />
  </div>
</div>

v-model

在表单控件或者组件上创建双向绑定。v-bind 只能实现单向绑定。

<!-- 当在 input 输入或者修改文本内容时，message 会跟着改变 -->
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>

Class 与 Style 绑定

Class 绑定

<style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            flag: true
        },
    })
</script>

数组

<div id="app">
  <h1 :class="['thin', 'red']">这是一个 h1</h1>
</div>

数组中使用三元表达式

<div id="app">
  <h1 :class="['thin', 'red', flag ? 'active' : '']">这是一个 h1</h1>
</div>

数组中嵌套对象

<div id="app">
  <h1 :class="['thin', 'red', {'active' : flag}]">这是一个 h1</h1>
</div>

直接使用对象

<!-- 对象的属性可带引号，也可以不带 -->
<div id="app">
  <h1 :class="{red: true, thin: false}">这是一个 h1</h1>
  <!-- 
      <h1 :class="{'red': true, 'thin': false}">这是一个 h1</h1> 
    -->
</div>

也可以写成以下格式：

<div id="app">
  <h1 :class="classObj">这是一个 h1</h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            classObj: {red: true, thin: false}
        },
    })
</script>

Style 绑定

直接在元素上通过 :style 的形式，书写样式对象

<div id="app">
  <h1 :style="{'color': 'blue', 'font-size': '40px'}">这是一个 h1</h1>
</div>

将样式对象定义到 data 中，并直接引用到 :style 中

<div id="app">
  <h1 :style="styleObj">这是一个 h1</h1>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            styleObj: {'color': 'blue', 'font-size': '40px'}
        },
    })
</script>

在 :style 中通过数组，引用多个 data 上的样式对象

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            styleObj1: {'color': 'blue', 'font-size': '40px'},
            styleObj2: {'font-style': 'italic'}
        },
    })
</script>

<div id="app">
  <h1 :style="[styleObj1, styleObj2]">这是一个 h1</h1>
</div>

v-for

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // 要遍历的普通数组
            arr: [1, 2, 3],
            // 要遍历的对象数组
            obj: [
                {id: 1, name: 'abc1'},
                {id: 2, name: 'abc2'},
                {id: 3, name: 'abc3'},
            ],
            // 要遍历对象的属性
            user:{
                id: 1,
                name: 'zzz',
                age: 10
            }
        },
    })
</script>

迭代普通数组

<div id="app">
  <p v-for="item in arr">{{ item }}</p>
</div>

如果需要索引值，则：

<div id="app">
  <p v-for="(item, i) in arr">{{ i }}---{{ item }}</p>
</div>

迭代对象数组

<div id="app">
  <p v-for="(item, i) in obj">{{ i }}---{{ item.id }}---{{ item.name }}</p>
</div>

迭代对象属性

<div id="app">
  <p v-for="(value, key, i) in user">{{ i }}---{{ key }}---{{ value }}</p>
</div>

迭代数字

<div id="app">
  <p v-for="count in 10">第 {{count}} 个</p>
</div>

v-if 和 v-show

v-if

根据表达式的值的真假条件渲染元素。

v-show

根据表达式之真假值，切换元素的 display CSS 属性。如 display: none。

过滤器

可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

定义

Vue.filter("过滤器名称", function() {});

使用

{{ name | 过滤器名称 }}

示例

该示例通过定义过滤器将“单纯”替换为“邪恶”。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>品牌管理案例</title>
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/bootstrap.css" />
  </head>
  <body>
    <div id="app">
      <p>{{ message | messageFormat }}</p>
    </div>
  </body>
  <script>
    // 定义一个全局的过滤器，名字叫 messageFormat
    // 所谓全局过滤器就是所有的 vm 示例都可以使用
    // 方法里的第一个参数指定为过滤器管道符前面传过来的数据
    Vue.filter("messageFormat", function(data) {
      // replace 方法的第一个参数，除了可以是一个字符串之外，还可以是一个正则
      return data.replace(/单纯/g, "邪恶");
    });
    var vm = new Vue({
      el: "#app",
      data: {
        message:
          "曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的人。"
      }
    });
  </script>
</html>

管道符后面过滤器传过来的参数从第二个开始计算：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>品牌管理案例</title>
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/bootstrap.css" />
  </head>
  <body>
    <div id="app">
      <p>{{ message | messageFormat('疯狂', '英语') }}</p>
    </div>
  </body>
  <script>
    // 定义一个全局的过滤器，名字叫 messageFormat
    // 所谓全局过滤器就是所有的 vm 示例都可以使用
    // 方法里的第一个参数指定为过滤器传过来的数据
    Vue.filter("messageFormat", function(data, crazy, english) {
      // replace 方法的第一个参数，除了可以是一个字符串之外，还可以是一个正则
      return data.replace(/单纯/g, "邪恶" + crazy + english);
    });
    var vm = new Vue({
      el: "#app",
      data: {
        message:
          "曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的人。"
      }
    });
  </script>
</html>

私有（局部）过滤器补充

var vm = new Vue({
  el: "#app",
  data: {
    message:
      "曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的人。"
  },
  filters: {
    messageFormat: function(data, crazy, english) {
      return data.replace(/单纯/g, "邪恶" + crazy + english);
    }
  }
});

在私有过滤器和全局过滤器同名的时候，采取就近原则，访问私有过滤器。

自定义按键修饰符

找到键盘事件对应的键码

js 里键盘事件对应的键码

自定义按键修饰符

// 定义按键 F2
Vue.config.keyCodes.f2 = 113

使用

<!-- add 为 Vue 里的 methods 定义的事件 -->
<!-- 按 F2 触发 add 事件 -->
<input type="text" @keyup.f2 = "add">