1插值
使用双大括号的文本插值：
<p> {{message}}</p>利用v-html指令输出html代码 ：
<div v-html="message"></div>
属性应使用v-bind指令
<label for="r1">修改颜色</label><input type="checkbox" v-model="use' id="r1">
<div v-bind:class="'class1': use">
data：{
use：true
}表达式 Vue.js支持了完整的JavaScript语法，函数也可以返回值。
<div id="app">
{{2+2}}
{{ok? 'yes': 'no'}}
{{message.split('').reverse().join('')}}
<div v-bind：id="‘list-’+id"></div>
</div>
new Vue({
el: '#app',
data: {
ok: true,
message: 'hello',
id:1
}
})2指令
指令是带有v-前缀的特殊属性。用于在表达式的值改变时，将某些行为应用于DOM上。最常见的就是v-bind和v-on指令。
v-if实例很好地表现了这一点。
<input type="checkbox" v-if="seen"/>
<div v-model="seen">这是一段话</div>
data: {
seen: true
}
参数 在指令后以冒号来指明。
例如，v-bind指令来响应地更新html里的内容，html是参数,告知v-bind指令将该元素的href属性与url的值绑定。
<div v-href: html="url"></div>
data:{
url: 'http://www.runoob.com'
}
另一个例子是v-on指令 用于监听DOM事件。
<div v-on:click="doSomething"></div>
3修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
4用户输入
数据双向绑定
v-model指令可用于和checkbox,radio，input,select,textarea来创建双向数据绑定。根据绑定的值，自动更新绑定的元素的值。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})</script>
<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>5过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 -->{{ message | capitalize }}
<!-- 在 v-bind 指令中 --><div v-bind:id="rawId | formatId"></div>过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写，其中capitalize是对message起作用的函数方法
<div id="app">
{{ message | capitalize }}</div>
<script>new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})</script>过滤器可以串联：
{{ message | filterA | filterB }}过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
6缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a>
<!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a>
7条件判断
v-if
v-else:可以用 v-else 指令给 v-if 添加一个 "else" 块：
<div v-if="Math.random() > 0.5">Sorry </div> <div v-else>Not sorry</div>
v-else-if：用作 v-if 的 else-if 块。可以链式的多次使用：
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
data: {
type: 'C'
}v-show
我们也可以使用 v-show 指令来根据条件展示元素。
随时随地看视频
