Vue入门

1 插值

1.1 文本

1. 使用双大括号{{ 表达式}}进行插值，表示将数据与DOM节点绑定。数据改变时，节点也相应改变。
2. 使用v-once执行一次性的插值，数据改变时插值内容不会更新。<span v-once>{{ msg }}</span>

1.2 纯HTML

1. 双大括号会将数据翻译为纯文本，若想输出HTML，需使用v-html指令。
   
   • <div v-html="html"></div>
2. 该指令内部实现是更新元素的 innerHTML，所以宿主元素的原innerHTML内容都会被移除。
3. 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
4. 尽量别用，不安全。

---

2 属性

1. 属性绑定v-bind:propName="表达式"，如v-bind:disable="false"。
2. 属性绑定简写:propName="表达式"，如v-bind:disable="isShow"。
3. 事件绑定v-on:click="func"。
4. 事件绑定简写@click="func"。

---

3 指令

1. 指令是以”v-“为前缀的特殊属性。
2. 指令属性的值预期是单一 JavaScript 表达式（除了 v-for）。
3. 指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
4. 常用内置指令如v-if，v-for，v-bind，v-on等。

3.1 指令参数

1. 一个指令能接受一个参数。
2. 参数在指令后以:声明，如v-bind:href="url"，v-on:click="showTime"。

3.2 指令修饰符

1. 修饰符在指令(参数)后以.声明，如v-on:click.prevent="show"，这里prevent代表原生event的preventDefault。
2. 一个指令可挂多个修饰符。<a v-on:click.stop.prevent="doThat"></a>

4 事件修饰符

修饰符 原生 作用 .stop event.stopPropagation(); 阻止单击事件冒泡 .prevent event.preventDefault() 取消事件的默认动作。 .capture el.addEventListener([event-name],[callback],[use-capture]); 添加事件侦听器时使用事件捕获模式 .self ~ 只当事件在该元素本身（而不是子元素）触发时触发回调 .once ~ 件将只会触发一次

使用示例：

<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联  --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><div v-on:click.capture="doThis">...</div><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>

---

5 按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() --><input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 --><input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">

5.1全部按键别名

1. enter
2. tab
3. delete (捕获 “删除” 和 “退格” 键)
4. esc
5. space
6. up
7. down
8. left
9. right

v2.1.1新增
1. ctrl
2. alt
3. shift
4. meta

5.2 自定义按键修饰符别名

通过全局 config.keyCodes 对象修改：

// 可以使用 v-on:keyup.f1Vue.config.keyCodes.f1 = 112

---

6 过滤器(管道)

1. 过滤器即是angular中的管道，主要用于文本格式化。
2. 只能在插值和属性绑定中使用过滤器，其他情况使用计算属性。
   
   • {{ message | capitalize }}
   • <div v-bind:id="rawId | formatId"></div>
3. 过滤器可以串联：
   
   • {{ message | filterA | filterB }}
4. 过滤器是 JavaScript 函数，因此可以接受参数：
   
   • {{ message | filterA(‘arg1’, arg2) }}
   • 字符串arg1将传给过滤器作为第二个参数，arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

6.1 自定义过滤器

在Vue实例的option中，或Vue组件对象中：

//...filter:{    capitalize:function(value,[arg1],[arg2]...){        //...        return xxx;    }}