Vue的学习
Posted maigy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的学习相关的知识，希望对你有一定的参考价值。
1、一个vue的简单实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue的简单实例</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 .red { 9 color: red; 10 font-size: large; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="app"> 16 {{hello}} 17 <h1 v-text="hello" :class="color"></h1><br/> 18 <input type="text" v-model="hello" /><br/> 19 <span>{{}}:输出的模式：</span>{{html}}<br/> 20 <span>v-text:输出的模式：</span><span v-text="html"></span><br/> 21 <span>v-html:输出的模式：</span><span v-html="html"></span><br/> 22 </div> 23 </body> 24 <script> 25 var vm = new Vue({ 26 el:‘#app‘, 27 data: { 28 hello: ‘MGY‘, 29 html: ‘<h2 style="color: red;">你好，世界</h2>‘, 30 color: ‘red‘ 31 } 32 }); 33 </script> 34 </html>
解释：v-bind:class 可以简写成： :class 表示绑定 class 属性，所以 :class="color" 中的 color 是一个变量，该 :class 指令 可以与普通的 class 属性共存。
v-model 指令实现表单 <input>、<textarea>、及 <select>元素的双向数据绑定。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。如果想初始化值，可以通过 javascript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件（实例：https://cn.vuejs.org/v2/guide/forms.html）：
text 和 textarea 元素使用 value 属性和 input 事件 {注意：在文本域插值（<textarea>{{text}}</textarea>）并不会生效，应用 v-model 来代替 }
checkedbox 和 radio 使用 checked 属性和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件 {注意：如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为 “未选中” 状态。在 ios 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐提供第一个值为空的禁用选项。}
v-once 指令能执行一次性地插值，当数据改变时，插值处的内容不会更新。
{{}}、v-text 与 v-html 的区别：{{}} 和 v-text 会将内容原样输出、而 v-html 会对里面包含 html 标签的，会以 html 标签的样式输出。{注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值}
2、计算属性：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue的简单实例</title> 6 <script src="lib/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input type="text" v-model="n1"> + 11 <input type="text" v-model="n2"> = 12 <input type="text" v-model="sum"> 13 </div> 14 </body> 15 <script> 16 var vm = new Vue({ 17 el:‘#app‘, 18 computed: { 19 // 计算属性的 getter 20 sum: function () { 21 // `this` 指向 vm 实例 22 return this.n1*1 + this.n2*1; 23 } 24 }, 25 data: { 26 n1: 0, 27 n2: 0 28 } 29 }); 30 </script> 31 </html>
解释：这里我们声明了一个计算属性 sum。我们提供的函数将用作属性 vm.sum的 getter 函数。
3、监听属性：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue的简单实例</title> 6 <script src="lib/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <input type="text" v-model="word" /> 11 <h1> 12 结果：{{result}} 13 </h1> 14 </div> 15 </body> 16 <script> 17 var vm = new Vue({ 18 el:‘#app‘, 19 watch: { 20 word: function (newV, oldV) { 21 axios.get(‘9.php?word=‘+newV).then(function (response) { 22 app.result = response.data; 23 }) 24 } 25 }, 26 data: { 27 word: ‘‘, 28 result: ‘‘ 29 } 30 }); 31 </script> 32 </html>
4、使用object与array来控制class：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用object与array控制class</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 .green {color: green;} 9 .color {color: red;} 10 .font {font-size: 200px;} 11 </style> 12 </head> 13 <body> 14 <div id="app"> 15 <h1 class="green" :class="hd">后盾人</h1> 16 <hr> 17 <h2 :class="[success,font]">houdunren.com</h2> 18 </div> 19 </body> 20 <script> 21 var vm = new Vue({ 22 el:‘#app‘, 23 data: { 24 hd: {font:true}, 25 success: ‘color‘, 26 font: ‘font‘ 27 } 28 }); 29 </script> 30 </html>
5、在 class 写表达式控制类型：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>在 class 写表达式控制类型</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 .success {color: green;} 9 .error {color: red;} 10 </style> 11 </head> 12 <body> 13 <div id="app"> 14 <li v-for="v in news"> 15 <span v-bind:class="v.status?‘success‘:‘error‘">{{v.status}}</span> 16 <button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button> 17 <button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button> 18 </li> 19 </div> 20 </body> 21 <script> 22 var vm = new Vue({ 23 el:‘#app‘, 24 methods: { 25 changeStatus: function (item, status) { 26 item.status = status; 27 } 28 }, 29 data: { 30 news: [ 31 {title: ‘后盾人‘, status: true}, 32 {title: ‘houdunren.com‘, status: true} 33 ] 34 } 35 }) 36 </script> 37 </html>
6、使用vue来设计行级样式：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用vue来设计行级样式</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <h1 :style="{color:‘red‘,fontSize:size+‘px‘}">后盾人</h1> 13 <h2 :style="style">后盾人</h2> 14 <h3 :style="[hdcms]">houdunren.com</h3> 15 <input type="number" v-model="size" /> 16 </div> 17 </body> 18 <script> 19 var vm = new Vue({ 20 el:‘#app‘, 21 data: { 22 red: ‘green‘, 23 size: 16, 24 style: { 25 color: ‘blue‘ 26 }, 27 hdcms: { 28 color: ‘yellow‘, 29 backgroundColor: ‘blue‘ 30 } 31 } 32 }) 33 </script> 34 </html>
7、v-if 的使用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-if的使用</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="text" v-model="age" /> 13 <span v-if="age<20">小孩</span> 14 <span v-else-if="age<30">青年</span> 15 <span v-else-if="age<50">壮年</span> 16 <span v-else>老年</span> 17 <hr /> 18 <input type="checkbox" v-model="copyright" />接受协议 <br> 19 <span v-if="!copyright">请先接受协议</span> 20 <button v-else>注册</button> 21 </div> 22 </body> 23 <script> 24 var vm = new Vue({ 25 el:‘#app‘, 26 data: { 27 copyright: false, 28 age: 0 29 } 30 }) 31 </script> 32 </html>
8、使用key唯一令牌解决表单值混乱问题：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用key唯一令牌解决表单值混乱问题</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <template v-if="regType==‘mail‘"> 13 邮箱：<input type="text" name="username" key="mail-register"/> 14 </template> 15 <template v-else> 16 手机：<input type="text" name="username" key="phone-register"/> 17 </template> 18 <br/> 19 <input type="radio" value="mail" v-model="regType"/>邮箱注册 20 <input type="radio" value="phone" v-model="regType"/>手机注册 21 </div> 22 </body> 23 <script> 24 var vm = new Vue({ 25 el: ‘#app‘, 26 data: { 27 regType: ‘mail‘ 28 } 29 }) 30 </script> 31 </html>
9、v-show与v-if的对比：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-if与v-show的对比</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <h1 v-if="status">后盾人</h1> 13 <h1 v-show="status">houdunren.com</h1> 14 <input type="checkbox" v-model="status" /> 15 </div> 16 </body> 17 <script> 18 var vm = new Vue({ 19 el: ‘#app‘, 20 data: { 21 status: true 22 } 23 }); 24 </script> 25 </html>
解释：v-show：会把元素隐藏掉，即把样式设置为隐藏的样式，而 v-if：直接把元素删除掉。所以 v-show 的性能比 v-if 好，但 v-if 的功能比 v-show 好，它有 v-if、v-else-if、v-else
10、v-for 的使用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-for的使用</title> 6 <script src="./lib/vue.js"></script> 7 <style> 8 </style> 9 </head> 10 <body> 11 <div id="app"> 12 <table border="1"> 13 <tr> 14 <th>序号</th> 15 <th>编号</th> 16 <th>标题</th> 17 <th>老师</th> 18 </tr> 19 <tbody> 20 <!--field:表示一个对象 key:表示下标--> 21 <tr v-for="(field, key) in news"> 22 <td>{{key+1}}</td> 23 <td>{{field.id}}</td> 24 <td>{{field.title}}</td> 25 <td>{{name}}</td> 26 </tr> 27 </tbody> 28 </table> 29 </div> 30 </body> 31 <script> 32 var vm = new Vue({ 33 el: ‘#app‘, 34 data: { 35 name: ‘向军老师‘, 36 news: [ 37 {id: 22, title: ‘houdunren.com‘}, 38 {id: 66, title: ‘后盾人‘} 39 ] 40 } 41 }); 42 </script> 43 </html>
以上是关于Vue的学习的主要内容，如果未能解决你的问题，请参考以下文章