Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
输出内容
文本值
如果只是最简单的输出文本值，使用{{...}}（双大括号）即可，也可以输出函数的返回值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>输出文本值：</h1>
<p>用户名：{{username}}</p>
<p>密码：{{password}}</p>
<h1>输出函数返回值：</h1>
<p>{{print()}}</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
username: "张三",
password: "123456"
},
methods: {
print: function() {
return "您好，Vue！";
}
}
})
</script>
</body>
</html>
浏览器查看：
HTML代码
如果要输出如"<h1>首页</h1>"这样的HTML代码就不能使用{{...}}进行输出了，要使用v-html指令，类似于HTML的一些属性。
其中v-html表示当前元素的属性名，其值是Vue中的data的属性名。
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>正确：</h1>
<!-- 要输出HTML代码，需使用v-html指令 -->
<div v-html="title"></div>
<h1>错误：</h1>
<!-- {{...}}只能输出一段文本，即使这段文本是HTML代码 -->
{{title}}
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
// "title"属性字段的值是一段HTML代码
title: "<h2 style='color:red'>首页</h2>"
}
})
</script>
</body>
</html>
浏览器显示：
v-bind
HTML 属性中的值应使用 v-bind 指令。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<style type="text/css">
.pEle {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 绑定p元素的style属性，属性值即data中的fontColor的值 -->
<p v-bind:style="fontColor">DOM元素属性绑定</p>
<!-- 绑定p元素的class属性，class表示DOM元素的属性名，属性值即data中的className的值 -->
<p v-bind:class="className">DOM元素属性绑定</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
fontColor: "color:red",
className: "pEle"
}
})
</script>
</body>
</html>
浏览器展示：
代码解释说明：
v-bind的缩写语法：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>支持JS表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ num1+num2 }}
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
num1: 5,
num2: 5
}
})
</script>
</body>
</html>
浏览器展示：
指令
在Vue中即带有"v-"前缀的就是指令，如v-html、v-model、v-bind等都是指令，也即是特殊属性。
指令用于在表达式的值改变时，应用到DOM上。
用户输入
v-model
v-model指令用来实现双向数据绑定。
即Vue中的数据与HTML中的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- v-model绑定Vue中data的字段的值 -->
用户名：<input type="text" v-model="username">
密码：<input type="password" v-model="password" />
复选框：<input type="checkbox" v-model="checked">
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
username: "张三",
password: "123456",
checked: true
}
})
</script>
</body>
</html>
浏览器展示：
v-on
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 使用v-model绑定msg的信息 -->
<input type="text" v-model="msg" />
<!-- 使用v-on:click实现按钮的点击，"clickMe"是指函数名 -->
<button type="button" v-on:click="clickMe">点我</button>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "一段文本"
},
methods: {
// 这是一个名为clickMe的函数
clickMe: function() {
// 当点击按钮后,弹出警告框,其中内容是输入框的值
alert(this.msg);
}
}
})
</script>
</body>
</html>
浏览器如下：
v-on的语法可以进行缩写：
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>过滤器
过滤器的语法如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>过滤器函数接受表达式的值作为第一个参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习Vue</title>
<!-- 使用CDN引入Vue.js -->
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 这里是一个自定义的过滤器使用，该过滤器有两个值，分别用"|"符号隔开，其中第一个值是要传入过滤器函数中的参数值，第二个是过滤器函数（名） -->
<!-- 意思就是把word1作为参数传入到名为testFilter的过滤器函数中进行处理，然后输出的是函数处理后的结果 -->
{{word1|testFilter}}
<br>
{{word2|testFilter}}
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
word1: "字符串长度小于10",
word2: "字符串的长度大于10哟"
},
// filters指的是过滤器,在括号内定义过滤器函数
filters: {
// 这是一个名为testFilter的过滤器函数,该函数有一个参数名为value
testFilter: function(value) {
// 该函数的功能是判断字符串参数的长度是否小于10,如果小于10则在字符串后加上该字符串的长度,否则返回原字符串
if (value.length < 10) {
return value + "(" + value.length + ")";
} else {
return value.toString();
}
}
}
})
</script>
</body>
</html>
浏览器展示：
