Vue.js学习III(模板语法)

有用的链接:

• Vue生态库
• Github
• 在线编辑器
• 中文VUE教程网站
• API文档

模板语法

模板语法是一套用于将DOM绑定到底层Vue的方法,所有vue.js都可以被HTML解析. 每次底层数据被改变的时候, Vue都会自动计算重新渲染的最小代价, 并应用到整个页面上. 同样也可以使用渲染函数或者用JSX模板

插值

最简单的文本插值

使用大括号插值\{\{}}(名为Mustache)

1

<span>Message: \{\{ msg }}</span>

可以使用v-once进行单次插值, 数据改变后插值内容不更新

1

<span v-once>THIS wont change: \{\{ msg }}</span>

纯HTML插值

纯html插值需要使用v-html来实现, 数据绑定会被忽略, 有可能引起XSS攻击, 该部分忽略

属性

Mustache不能用于HTML属性, 需要使用v-bind:@attribute来绑定属性:

1

<div v-bind:id="dynamicId"></div>

同样可以使用布尔值来实现:

1

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

JavaScript表达式

Vue可以使用单个表达式实现, 可以使用Math和Date

1
2
3

\{\{ number + 1}}
\{\{ ok ? 'Yes' : 'No'}}
\{\{ message.split("").reverse(),join("") }}

以下例子是完整的语句, 并不会生效

1
2

\{\{ var a = 1}}
\{\{ if(OK){return message} }}

Vue指令

v-开头的命令为vue使用的指令, 比如v-if为判断表达式真假而插入元素

1

<p v-if="seen">NOW UC me</p>

参数

一些指令可以接受一个参数, 在后面用冒号指明, 如v-bind用于响应式更新HTML属性:

1

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

还有一个例子为用v-on:click来对事件进行绑定.

修饰符

用.绑定特殊后缀, 比如用.prevent修饰符告诉v-on调用event.preventDefault():

1

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

过滤器

使用|来做文本格式化:

1
2

\{\{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>

v-bind仅在2.1.0之后才可以使用.
在Vue中的定义如下:

1
2
3
4
5
6
7
8
9
10

new Vue({
  // el,data,..
  filters:{
    capitalize: function(value){
      if(!value) return "";
      value = value.toString()
      return value.chartAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联,可以传其他参数.

1

\{\{ message | filter1 | filter(Arg2, Arg3) }}

缩写

v-bind可以缩写为:
v-on可以缩写为@

1
2
3
4
5
6
7
8
9
10
11

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

<!--缩写-->
<a :href="url"></a>

<!--完整语法-->
<a v-on:click="doSth"></a>

<!--缩写-->
<a @click="doSth"></a>