1.{{...}}（双大括号）
文本插值
<div id="app"> <p>{{ message }}</p> </div>
2.v-html指令
用于输出 html 代码
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>hi,jacke</h1>' } }) </script>
3.v-bind 指令和缩写
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> </head> <style> .class1{ background: #444; color: #eee; } </style> <body> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app"> <div v-bind:class="{'class1': class1}"> v-bind:class 指令 </div> </div> <script> new Vue({ el: '#app', data:{ class1: true } }); </script>
<div id="app"> <pre><a v-bind:href="url">百度</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.baidu.com' } }) </script>
缩写
<!-- 缩写 --> <a :href="url">...</a>
4.JavaScript表达式
<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">Lily</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'Jacke', id : 1 } }) </script>
5.v-on指令和缩写
<div id="app">
<p id="content">注意我的背景色</p>
<input type="button" v-on:click="setBgColor" value='点我'/>
</div>
<script>
new Vue({
el:'#app',
methods:{
setBgColor:function(){
document.getElementById('content').style.background='red';
}
}
})
</script>
缩写
<!-- 缩写 --> <a @click="doSomething">...</a>
6.v-model双向数据绑定
<div id="app"> {{message}} <input type="text" v-model="message" /> </div> <script> new Vue({ el:"#app", data:{ message:"hello" } }) </script>
7.自定义过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div>
示例，
<div id="app">
<!-- 过滤器可以串联 -->
{{message|subMessage|toUpper}}
<br>
<!-- 过滤器是 JavaScript 函数，因此可以接受参数 -->
<!-- 这里job是第一个参数，apple是第二个参数，表达式2+3运行后的结果是第三个参数 -->
{{job|doWhat('apple',2+3)}}
</div>
<script>
new Vue({
el:"#app",
data:{
message:"hello my friend",
job:"sale"
},
filters:{
subMessage:function(value){
return value.substring(0,7)
},
toUpper:function(value){
return value.toLocaleUpperCase()
},
doWhat:function(v1,v2,v3){
return v1+" "+v2+" "+v3
}
}
})
</script>
