vue 基礎-1
阿新 • • 發佈：2021-07-20
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>