不写R包的分析师不是好全栈

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

    JsPy&Others

有用的链接:

模板语法

模板语法是一套用于将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可以使用单个表达式实现, 可以使用MathDate

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>

page PV:  ・  site PV:  ・  site UV: