vue-模板

1.插入值：

1.1插入不变文本的指令：v-once

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

{ msg }}</span>

1.2插入html

<div v-html="rawHtml"></div>

1.3 v-bind指令：

<button v-bind:disabled="someDynamicCondition">Button</button>

1.4script表达式：

{

{ number + 1 }}

{

{ ok ? 'YES' : 'NO' }}

{

{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

表达式只能是单个

2.指令：指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上

2.1指令的参数：

2.1.1 v-bind参数

<a v-bind:href="url"></a>

2.1.2 v-on参数

<a v-on:click="doSomething">

3.修饰符：修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

<form v-on:submit.prevent="onSubmit"></form>

表示 v-on这个指令由提交事件触发调用

4.过滤器：过滤器设计目的就是用于文本转换

4.1：过滤器函数总接受表达式的值作为第一个参数

new Vue({

  // ...

  filters: {

    capitalize: function (value) {

      if (!value) return ''

      value = value.toString()

      return value.charAt(0).toUpperCase() + value.slice(1)

    }

  }

})

4.2：过滤器可以串联

{

{ message | filterA | filterB }}

4.3：过滤器可以接受参数：

{

{ message | filterA('arg1', arg2) }}

5.缩写：

v-bind缩写：

<!-- 完整语法 -->

<a v-bind:href="url"></a>

<!-- 缩写 -->

<a :href="url"></a>

v-on缩写

<a v-on:click="doSomething"></a>

<!-- 缩写 -->

<a @click="doSomething"></a>

总结：

1.只执行一次的指令：v-once

2.插入html的指令：v-html

3.vue对javascript的支持

4.指令参数

5.指令修饰符

6.过滤器

7过滤器串联

8过滤器参数

9.缩写