初学vue

科技2022-08-27 93

初学vue

1.cloak

解决页面闪动问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <div v-cloak>{{msg}}</div> </div> <script src="../vue.js"></script> <script> // sad /* v-cloak指令的用法 1.提供样式 [v-cloak]{ display:none } 2.在插值表达式所在的标签中添加v-cloak指令背后的原理:先通过样式隐藏内容然后在内存中进行值的替换替换好之后再显示最终的结果 */ var vm = new Vue({ el: '#app', data: { msg: 'hello Vue' } }); </script> </body> </html>

2.v-text、v-html、v-pre、

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <div v-cloak>{{msg}}</div> <div v-text="msg"></div> <div v-html="msg1"></div> <div v-pre>{{msg}}</div> </div> <script src="../vue.js"></script> <script> // sad /* v-cloak指令的用法 1.提供样式 [v-cloak]{ display:none } 2.在插值表达式所在的标签中添加v-cloak指令背后的原理:先通过样式隐藏内容然后在内存中进行值的替换替换好之后再显示最终的结果 */ var vm = new Vue({ el: '#app', data: { msg: 'hello Vue', msg1: "<h1>HTML</h1>" } }); </script> </body> </html>

3、数据响应式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <div v-cloak>{{msg}}</div> <div v-once>{{info}}</div> </div> <script src="../vue.js"></script> <script> // /* v-once的应用场景:如果显示的信息后续不需要再修改可以使用v-once可以提高性能 */ var vm = new Vue({ el: '#app', data: { msg: 'hello Vue', info: 123 } }); </script> </body> </html>

4、双向数据绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <div v-cloak>{{msg}}</div> <div v-once>{{info}}</div> </div> <script src="../vue.js"></script> <script> // /* v-once的应用场景:如果显示的信息后续不需要再修改可以使用v-once可以提高性能 */ var vm = new Vue({ el: '#app', data: { msg: 'hello Vue', info: 123 } }); </script> </body> </html>

5、事件绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <div v-cloak>{{num}}</div> <div> <button v-on:click="num++">点击</button> <button @click='num++'>点击1</button> <button @click='handle'>点击2</button> <button @click='handle()'>点击3</button> </div> </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { num: 0, }, methods: { handle: function() { // 这里的this就是vue的实例对象 console.log(this == vm); this.num++; } } }) </script> </body> </html>

6、事件对象的基本使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <div v-cloak>{{num}}</div> <div><button v-on:click="handle1">点击</button></div> <div><button v-on:click="handle(123,456,$event)">点击带传参</button></div> </div> <script src="../vue.js"></script>  <script> var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle: function(p, p1, event) { console.log(p); console.log(p1); console.log(event.target.innerHTML); this.num++; }, handle1: function(event) { console.log(event.target.innerHTML); this.num++; } } }) </script> </body> </html>

7.事件修饰符

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <div v-cloak>{{num}}</div> <div v-on:click='handle0'><button v-on:click.stop="handle1">点击</button></div> <a href="http://www.baidu.com" v-on:click.prevent="">阻止默认事件</a> </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle0() { this.num++; }, handle1: function(event) { //阻止事件冒泡 // event.stopPropagation() console.log(event.target.innerHTML); this.num++; } } }) </script> </body> </html>

8、按键修饰符

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <form action=""> <div> 用户名: <input type="text" v-on:keyup.delete="clearContent" v-model="uname"> </div> <div> 密码: <input type="text" v-model="pwd" v-on:keyup.enter="handleSubmit"> </div> <div> <input type="button" v-on:click="handleSubmit" value="提交"> </div> </form> </div> <script src="../vue.js"></script> <script> /* 事件绑定按键修饰符 */ var vm = new Vue({ el: '#app', data: { uname: '', pwd: '' }, methods: { handleSubmit() { console.log(this.uname, this.pwd); }, clearContent() { //按delete键时清空用户名 this.uname = "" } } }) </script> </body> </html>

9、自定义按键修饰符

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-on:keyup.aaa="handle" v-model="info"> </div> <script src="../vue.js"></script> <script> /* 事件绑定自定义按键修饰符规则:自定义按键修饰符名字是自定义的但是对应的值必须是按键对应的event.keycode值 */ Vue.config.keyCodes.aaa = 65 var vm = new Vue({ el: '#app', data: { info: '' }, methods: { handle(event) { console.log(event.keyCode); }, } }) </script> </body> </html>

10、属性绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <a v-bind:href="url">百度</a> <a :href="url">百度1</a> <button v-on:click="handle">切换</button> </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { url: 'http://www.baidu.com' }, methods: { handle() { //修改url地址 this.url = "http://www.jd.com" } } }) </script> </body> </html>

11、样式绑定

对象的形式

数组的形式

混合

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active { border: 1px solid #000; width: 100px; height: 100px; } .error { background-color: #f00; width: 100px; height: 100px; } .test { color: blue; } .base { font-size: 28px; } </style> </head> <body> <div id="app"> <div :class="[activeClass,errorClass,{test:isTest}]">测试样式</div> <div v-bind:class="arrClasses"></div> <div v-bind:class="objClasses"></div> <div class="base" v-bind:class="objClasses">测试样式</div> <button v-on:click="handle">切换</button> </div> <script src="../vue.js"></script> <script> // /* 样式绑定相关语法细节: 1.对象绑定和数组绑定可以结合使用 2.class绑定的值可以简化操作 3.默认的class如何处理默认的class会保留 */ var vm = new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'error', isTest: true, arrClasses: ['active', 'error'], objClasses: { active: true, error: true, }, }, methods: { handle() { // this.isTest = !this.isTest this.objClasses.error = false } } }) </script> </body> </html>

12、分支结构

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="app"> <div v-if='score>=90'>优秀</div> <div v-else-if='score<90&&score>=80'>良好</div> <div v-else-if='score<80&&score>=60'>一般</div> <div v-else>差</div> <input type="text" v-model="score"> <div v-show="flag">测试v-show</div> <button v-on:click="handle">切换</button> </div> <script src="../vue.js"></script> <script> // /* v-show的原理控制元素样式是否显示 display：none */ var vm = new Vue({ el: '#app', data: { score: 99, flag: false, }, methods: { handle: function() { this.flag = !this.flag } } }) </script> </body> </html>

13、循环结构

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="app"> <div>水果列表</div> <ul> <li v-for="item in fruits">{{item}}</li> <li v-for="(item,index) in fruits">{{item+'-----'+index}}</li> <li v-for="(item,index) in myFruits" :key="item.id"> <span>{{item.ename}}</span> <span>----</span> <span>{{item.cname}}</span> </li> </ul> </div> <script src="../vue.js"></script> <script> // /* v-show的原理控制元素样式是否显示 display：none */ var vm = new Vue({ el: '#app', data: { fruits: ['apple', 'orange', 'banana'], myFruits: [{ id: 1, ename: 'apple', cname: '苹果', }, { id: 2, ename: 'orange', cname: '橘子', }, { id: 3, ename: 'banana', cname: '香蕉', }, ] }, methods: { } }) </script> </body> </html>

14、循环分支结合使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="app"> <div v-if="obj.age>12" v-for="(value,key,index) in obj">{{value + '----'+key+'-----'+index}}</div> </div> <script src="../vue.js"></script> <script> // /* */ var obj = { uname: 'list', age: 12, gender: 'male' } var vm = new Vue({ el: '#app', data: { obj: { uname: 'list', age: 12, gender: 'male' } }, methods: { } }) </script> </body> </html>

Processed: 0.026, SQL: 10