1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>vuetest</title> 6 <script type=text/javascript 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/javascript>18 var text={19 message:hello world!,20 age:1621 }22 23 // 创建一个vue,；连接view和model24 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/javascript 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 // 这是我们的model16 var exampledata = {17 message: 'hello world!'18 }19 20 // 创建一个 vue 实例或 viewmodel21 // 它连接 view 与 model22 new vue({23 el: '#app',24 data: exampledata25 })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指令基于一个数组渲染一个列表，它和javascript的遍历语法相似：v-for=item in items.items是一个数组，item是当前被遍历的数组元素。 -->21 <td>{{ person.name }}</td>22 <td>{{ person.age }}</td>23 <td>{{ person.sex }}</td>24 </tr>25 </tbody>26 </table>27 </div>28 </body>29 <script src=vue.min.js></script>30 <script>31 var vm = new vue({32 el: '#app',33 data: {34 people: [{35 name: 'jack',36 age: 30,37 sex: 'male'38 }, {39 name: 'bill',40 age: 26,41 sex: 'male'42 }, {43 name: 'tracy',44 age: 22,45 sex: 'female'46 }, {47 name: 'chris',48 age: 36,49 sex: 'male'50 }]51 }52 })53 </script>54 55 </html>
以上就是vue(1)的详细内容。