Vue.js — 声明式渲染
1.模板语法
1.1 双大括号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
解释：上面的{{message}}被渲染为Vue实例的data属性的message属性值。
1.2 指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-text="msg1"></p>
<p v-text="msg2"></p>
<p v-html="msg1"></p>
<p v-html="msg2"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg1: 'Hello Vue!',
msg2: '<a href="https://cn.vuejs.org">Vue.js</a>'
}
});
</script>
</body>
</html>
解释：Vue指令带有v-前缀。v-text将内容渲染为文本，v-html将内容渲染为HTML。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<a href="url">Vue.js</a><br/><br/>
<a v-bind:href="url">Vue.js</a><br/><br/>
<a :href="url">Vue.js</a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://cn.vuejs.org'
}
});
</script>
</body>
</html>
解释：这里通过指令v-bind绑定表达式，url就会被渲染为Vue实例data属性的url属性值。注意v-bind是可以省略的，即<a v-bind:href="url">Vue.js</a>可写成<a :href="url">Vue.js</a>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="test">点我</button>
<button @click="test">点我</button>
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
test(){
console.log('点击！');
}
}
});
</script>
</body>
</html>
解释：通过v-on:click绑定事件监听，注意v-on:click可写成@click。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"><br/>
<p>{{msg}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello'
}
});
</script>
</body>
</html>
解释：通过指令v-model可以实现双向数据绑定。
1.3 表达式
双大括号和指令中都可以使用JavaScript 表达式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
{{number+1}}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
</div>
<script>
new Vue({
el: '#app',
data: {
number: 0,
ok: true,
message: 'hello'
}
});
</script>
</body>
</html>
1.4 过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message | capitalize }}</p>
</div>
<script>
// 全局过滤器
Vue.filter('capitalize', function(value){
if(!value) return '';
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
});
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
/*
// 局部过滤器
filters: {
capitalize: function(value){
if(!value) return '';
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
*/
});
</script>
</body>
</html>
解释：上面的{{ message | capitalize }}表示将message作为过滤函数capitalize的第一个参数，得到过滤函数capitalize返回的值。
过滤器可以串联，可以接收多个参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message | capitalize | otherMessage('Vue') }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
filters: {
capitalize: function(value){
if(!value) return '';
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
otherMessage: function(value, param1){
if(!value) return '';
value = value.toString()
return value + ' ' + param1 + '!'
}
}
});
</script>
</body>
</html>
参考：
