vue模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

 

插值：

1：文本

最常见的数据绑定形式：使用 {{...}} 进行文本插值。例：

<div id="abc">

<p>{{ message }}</p>

</div>

<script>...</script>

2：html

使用v-html指令输出html代码。例：

<div id="abc">

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

<div>

<script>

new Vue({

el:'#abc',

data:{

message:'<h1>Vue学习</h1>'

}

})

</script>

3：属性

使用v-bind指令进行属性的绑定。用法有多种，如判断、直接绑定、绑定多个等。例：

<style>

.class1{ background: #444; color: #eee ;}

</style>

<div id="app">

<div v-bind:class="{'class1': class1}"> v-bind:class 指令 </div>

</div>

<script>

new Vue({

el: '#app',

data:{ class1: true }

});

</script>

4：表达式

Vue.js提供了完全的JavaScript表达式支持。例：

<div id="app">

{{5+5}}<br>

{{ ok ? 'YES' : 'NO' }}<br>

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

<div v-bind:id="'list-' + id">菜鸟教程</div>

</div>

<script>

new Vue({

el: '#app',

data: {ok: true, message: 'RUNOOB', id : 1}

});

</script>

5：指令

指令时带有v-前缀的特殊属性，作用是当表达式的值该表示，将一些行为应用到DOM上。例：

<div id="app">

<p v-if="seen">现在你看到我了</p>

</div>

<script>

new Vue({

el: '#app',

data: {seen: true}

})；

</script>

v-if指令判断seen的值，来决定是否插入<p>元素。

还有常用的v-on指令，用来监听DOM事件。

6：参数

参数在指令后，以冒号指明。如：v-bind指令后指定相应的属性参数。

7：修饰符

用"."指明的特殊后缀，指出一个指令应该以特殊的方式绑定。

用户输入：

1：input输入框中使用v-model指令进行双向的数据绑定。例：

<div id="app">

<p>{{message}}</p>

<input v-model="message">

</div>

<script>

new Vue({

el:'#app',

data:{

message:'vue学习'

}

});

</script>

这里，可以在input框中输入数据，<p>标签的文本随之改变。

当然，v-model不止这一点作用。

2：可以使用v-on监听事件，来对用户的输入进行响应。例：

<div id="app">

<p>{{ message }}</p>

<button v-on:click="reverseMessage">反转字符串</button>

</div>

<script>

new Vue({

el: '#app',

data: {

message: 'Runoob!'

},

methods: {

reverseMessage: function () {

this.message = this.message.split('').reverse().join('')

}

}

})；

</script>

这里，对button的click事件进行监听，用户点击时，执行reverseMessage函数，对message进行反转。

过滤器：

Vue.js允许自定义过滤器，完成一些功能。比如对字符串进行特定的操作。过滤器由 管道符："|"来指示。如：{{ abc | filter }}、<div v-bind:"abc | filter"></div>。其中，管道符左侧的值会作为过滤 器第一个参数传入。过滤器可以串联，如：{{abc | filter1 | filter2}}。例：

<div class="app">{{message | capitalize }}</div>

<script>

new Vue({

el:'#app',

data:{message:'runnob'},

filters: {

capitalize: function (value) {

if (!value) return ''

value = value.toString()

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

}

}

});

</script>

这里对message的值进行首字母大写，然后输出。

缩写：

对于两个常用的指令：v-bind和v-on，Vue.js提供了缩写。v-bind:class = :class，v-on:click = @click。