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>

事件修饰符：

使用示例：

<!-- 阻止单击事件冒泡 -->
<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>

4 过滤器(管道)

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

4.1 自定义过滤器

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

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

欢迎分享本文，转载请保留出处：前端ABC » Vue入门 – 模版语法