Vue(1)
程序员文章站
2022-04-14 21:28:46
...
1.
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: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/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 // 这是我们的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指令基于一个数组渲染一个列表，它和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)的详细内容，更多请关注其它相关文章！