vue 基础之基本指令
1：指令v-cloak 的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <div v-cloak>{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* v-cloak指令的用法 1、提供样式 [v-cloak]{ display: none; } 2、在插值表达式所在的标签中添加v-cloak指令 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果 */ var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue' } }); </script> </body> </html>
2：数据填充相关的3个指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{msg}}</div> <div v-text='msg'></div> <div v-html='msg1'></div> <div v-pre>{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题 2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题 3、v-pre用于显示原始信息 */ var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue', msg1: '<h1>HTML</h1>' } }); </script> </body> </html>
3：指令v-once 的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{msg}}</div> <div v-once>{{info}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。 */ var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue', info: 'nihao' } }); </script> </body> </html>
4:-双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{msg}}</div> <div> <input type="text" v-model='msg'> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 双向数据绑定 1、从页面到数据 2、从数据到页面 */ var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue' } }); </script> </body> </html>
5-事件的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{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 type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { num: 0 }, // 注意点： 这里不要忘记加逗号 // methods 中 主要是定义一些函数 methods: { handle: function() { // 这里的this是Vue的实例对象+ console.log(this === vm) // 在函数中 想要使用data里面的数据 一定要加this this.num++; } } }); </script> </body> </html>
6：事件函数传参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{num}}</div> <div> <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 --> <button v-on:click='handle1'>点击1</button> <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$event --> <button v-on:click='handle2(123, 456, $event)'>点击2</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle1: function(event) { console.log(event.target.innerHTML) }, handle2: function(p, p1, event) { console.log(p, p1) console.log(event.target.innerHTML) this.num++; } } }); </script> </body> </html>
7：事件修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [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'>点击1</button> </div> <div> <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 事件绑定-事件修饰符 */ var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle0: function(){ this.num++; }, handle1: function(event){ // 阻止冒泡 // event.stopPropagation(); }, handle2: function(event){ // 阻止默认行为 //prevent 防止 // event.preventDefault(); } } }); </script> </body> </html>
8-按键修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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-on:keyup.f1='handleSubmit' v-model='pwd'> </div> <div> <input type="button" v-on:click='handleSubmit' value="提交"> </div> </form> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 事件绑定-按键修饰符 */ Vue.config.keyCodes.f1 = 113 var vm = new Vue({ el: '#app', data: { uname: '', pwd: '', age: 0 }, methods: { clearContent:function(){ // 按delete键的时候，清空用户名 this.uname = ''; }, handleSubmit: function(){ console.log(this.uname,this.pwd) } } }); </script> </body> </html>
9-自定义事件修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-on:keyup.aaa='handle' v-model='info'> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 事件绑定-自定义按键修饰符 规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值 */ Vue.config.keyCodes.aaa = 65 var vm = new Vue({ el: '#app', data: { info: '' }, methods: { handle: function(event){ console.log(event.keyCode) } } }); </script> </body> </html>
10-简单的计算器案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <h1>简单计算器</h1> <div> <span>数值A:</span> <span> <input type="text" v-model='a'> </span> </div> <div> <span>数值B:</span> <span> <input type="text" v-model='b'> </span> </div> <div> <button v-on:click='handle'>计算</button> </div> <div> <span>计算结果:</span> <span v-text='result'></span> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 简单计算器案例 */ var vm = new Vue({ el: '#app', data: { a: '', b: '', result: '' }, methods: { handle: function(){ // 实现计算逻辑 this.result = parseInt(this.a) + parseInt(this.b); } } }); </script> </body> </html>
11-属性绑定的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <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 type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 属性绑定 */ var vm = new Vue({ el: '#app', data: { url: 'http://www.baidu.com' }, methods: { handle: function(){ // 修改URL地址 this.url = 'http://itcast.cn'; } } }); </script> </body> </html>
12-v-model 的本质
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{msg}}</div> <input type="text" v-bind:value="msg" v-on:input='handle'> <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'> <input type="text" v-model='msg'> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* v-model指令的本质 */ var vm = new Vue({ el: '#app', data: { msg: 'hello' }, methods: { handle: function(event){ // 使用输入域中的最新的数据覆盖原来的数据 this.msg = event.target.value; } } }); </script> </body> </html>
13-样式绑定之class绑定对象的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } </style> </head> <body> <div id="app"> <div v-bind:class="{active: isActive,error: isError}"> 测试样式 </div> <button v-on:click='handle'>切换</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 样式绑定 */ var vm = new Vue({ el: '#app', data: { isActive: true, isError: true }, methods: { handle: function(){ // 控制isActive的值在true和false之间进行切换 this.isActive = !this.isActive; this.isError = !this.isError; } } }); </script> </body> </html>
14-样式绑定之class绑定数组的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } </style> </head> <body> <div id="app"> <div v-bind:class='[activeClass, errorClass]'>测试样式</div> <button v-on:click='handle'>切换</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 样式绑定 */ var vm = new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'error' }, methods: { handle: function(){ this.activeClass = ''; this.errorClass = ''; } } }); </script> </body> </html>
15-样式绑定的之class绑定的3个细节用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } .test { color: blue; } .base { font-size: 28px; } </style> </head> <body> <div id="app"> <div v-bind: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 type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 样式绑定相关语法细节： 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: function(){ // this.isTest = false; this.objClasses.error = false; } } }); </script> </body> </html>
16-样式绑定之style绑定用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div> <div v-bind:style='objStyles'></div> <div v-bind:style='[objStyles, overrideStyles]'></div> <button v-on:click='handle'>切换</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 样式绑定之内联样式Style： */ var vm = new Vue({ el: '#app', data: { borderStyle: '1px solid blue', widthStyle: '100px', heightStyle: '200px', objStyles: { border: '1px solid green', width: '200px', height: '100px' }, overrideStyles: { border: '5px solid orange', backgroundColor: 'blue' } }, methods: { handle: function(){ this.heightStyle = '100px'; this.objStyles.width = '100px'; } } }); </script> </body> </html>
17：分支结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </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> <div v-show='flag'>测试v-show</div> <button v-on:click='handle'>点击</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 分支结构 v-show的原理：控制元素样式是否显示 display:none */ var vm = new Vue({ el: '#app', data: { score: 10, flag: false }, methods: { handle: function(){ this.flag = !this.flag; } } }); </script> </body> </html>
19：循环结构便利数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </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 :key='item.id' v-for='(item, index) in myFruits'> <span>{{item.ename}}</span> <span>-----</span> <span>{{item.cname}}</span> </li> </ul> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 循环结构-遍历数组 */ 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: '香蕉' }] } }); </script> </body> </html>
20：循环结构遍历对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> // 使用原生js遍历对象 var obj = { uname: 'lisi', age: 12, gender: 'male' } for(var key in obj) { console.log(key, obj[key]) } /* 循环结构 */ var vm = new Vue({ el: '#app', data: { obj: { uname: 'zhangsan', age: 13, gender: 'female' } } }); </script> </body> </html>
20-选项卡案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0; margin: 0; } .tab ul li { box-sizing: border-box; padding: 0; float: left; width: 100px; height: 45px; line-height: 45px; list-style: none; text-align: center; border-top: 1px solid blue; border-right: 1px solid blue; cursor } .tab ul li:first-child { border-left: 1px solid blue; } .tab ul li.active { background-color: orange; } .tab div { width: 500px; height: 300px; display: none; text-align: center; font-size: 30px; line-height: 300px; border: 1px solid blue; border-top: 0px; } .tab div.current { display: block; } </style> </head> <body> <div id="app"> <div class="tab"> <ul> <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'> <img :src="item.path"> </div> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* */ var vm = new Vue({ el: '#app', data: { currentIndex: 0, // 选项卡当前的索引 list: [{ id: 1, title: 'apple', path: 'img/apple.png' },{ id: 2, title: 'orange', path: 'img/orange.png' },{ id: 3, title: 'lemon', path: 'img/lemon.png' }] }, methods: { change: function(index){ // 在这里实现选项卡切换操作：本质就是操作类名 // 如何操作类名？就是通过currentIndex this.currentIndex = index; } } }); </script> </body> </html>
