1.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vuetest</title>
6 <script type="text/java script" src="vue.min.js"></script>
7 </head>
8 <body>
9 <!-- view -->
10 <div id="vue_id">
11 {{message}} <!--文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换-->
12 <br>
13 {{age}}
14 </div>
15
16 <!-- model -->
17 <script type="text/java script">
18 var text={
19 message:"Hello World!",
20 age:16
21 }
22
23 // 创建一个Vue,；连接view和Model
24 new Vue({
25 el:"#vue_id",//该Vue实例将挂载到<div id="app">...</div>这个元素
26 data:text //data属性指向Model，data:text表示我们的Model是text对象。
27 })
28
29 </script>
30 </body>
31 </html>
2.双向数据绑定
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>vuetest</title>
6 <script type="text/java script" src="vue.min.js"></script>
7 </head>
8 <body>
9 <!-- view -->
10 <div id="app">
11 <p>{{message}}</p>
12 <input type="text" name="" v-model="message"><!--在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。更改input的内容，p标签的内容也同时变化，在浏览器控制台中更改exampleData.message的值，input文本框的内容也会发生变化。-->
13 </div>
14 <script>
15 // 这是我们的Model
16 var exampleData = {
17 message: 'Hello World!'
18 }
19
20 // 创建一个 Vue 实例或 "ViewModel"
21 // 它连接 View 与 Model
22 new Vue({
23 el: '#app',
24 data: exampleData
25 })
26 </script>
27 </body>
28 </html>
3.v-if
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <div id="app">
9 <h1>Hello, Vue.js!</h1>
10 <h1 v-if="yes">Yes!</h1><!-- v-if是条件渲染指令，它根据表达式的真假来删除和插入元素 -->
11 <h1 v-if="no">No!</h1>
12 <h1 v-if="age >= 25">Age: {{ age }}</h1>
13 <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1><!-- indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 -->
14 </div>
15 </body>
16 <script src="vue.min.js"></script>
17 <script>
18
19 var vm = new Vue({
20 el: '#app',
21 data: {
22 yes: true,//显示
23 no: false,//不显示
24 age: 28,//显示
25 name: 'keepfool jack' //显示
26 }
27 })
28 </script>
29 </html>
4.v-show：也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML（但是使用v-if指令的元素如果表达式为假，则不会被渲染到HTML页面，这里要注意v-if和v-show的这个区别），它只是简单地为元素设置CSS的style属性。
5.？？不同Vue版本中v-else的不同。
6.v-for
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 </head>
8
9 <body>
10 <div id="app">
11 <table>
12 <thead>
13 <tr>
14 <th>Name</th>
15 <th>Age</th>
16 <th>Sex</th>
17 </tr>
18 </thead>
19 <tbody>
20 <tr v-for="person in people"><!-- v-for指令基于一个数组渲染一个列表，它和java scrip