vue學習2
阿新 • • 發佈：2018-12-14
元件
註冊全域性元件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>register the global component</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <p><input type="text" v-model="message"></p> 11全域性元件<hr> 12 <p>{{message}}</p> 13 <hr> 14 <input type="checkbox" v-model="checked"> 15 <p><label for="">{{checked}}</label></p> 16 <hr> 17 <sakula></sakula> 18 <sakula></sakula> 19 </div> 20<hr> 21 <div id="app02"> 22 <sakula></sakula> 23 <sakula></sakula> 24 </div> 25 <script src="vue.js"></script> 26 <script> 27 Vue.component('sakula',{ 28 template:`<button v-on:click="add01">{{mes}}</button>`, 29 data:function() { 30 return { 31 mes:0, 32 } 33 }, 34 methods:{ 35 add01:function () { 36 this.mes+=1; 37 } 38 } 39 }) 40 let app = new Vue({ 41 el:'#app', 42 data:{ 43 message:'', 44 checked:false, 45 46 }, 47 48 }) 49 let app0= new Vue({ 50 el:'#app02', 51 }) 52 </script> 53 </body> 54 </html>
註冊區域性元件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <sakula></sakula> 11 <sakula></sakula> 12 </div> 13 <script src="vue.js"></script> 14 <script> 15 let s1={ 16 template:`<button v-on:click="selfadd">{{mes}}</button>`, 17 data:function () { 18 return{ 19 mes:1, 20 } 21 }, 22 methods:{ 23 selfadd:function () { 24 this.mes+=1; 25 } 26 }, 27 } 28 let app = new Vue({ 29 el:'#app', 30 data:{ 31 message:'', 32 }, 33 components:{ 34 sakula:s1, 35 }, 36 }) 37 </script> 38 </body> 39 </html>區域性元件
父子元件傳值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <sss v-for="item,index in jishilist " v-bind:name="item"></sss> 11 </div> 12 <script src="vue.js"></script> 13 <script> 14 let HHH={ 15 template:`<button v-on:click="add01">{{name}}{{count}}</button>`, 16 props:{ 17 name:String, 18 }, 19 data:function () { 20 return{ 21 count:1, 22 } 23 }, 24 methods:{ 25 add01:function () { 26 this.count+=1; 27 } 28 } 29 }; 30 let app = new Vue({ 31 el:'#app', 32 data:{ 33 jishilist:['1號技師','2號技師','3號技師','4號技師'] 34 }, 35 components:{ 36 sss:HHH, 37 } 38 }) 39 </script> 40 </body> 41 </html>父子元件傳值
子父元件傳值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子父元件的傳值</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <h4>接客總數:{{total}}</h4> 11 <hr> 12 <sakula v-for="item,index in message" v-bind:name="item" v-on:jieke="ttt"></sakula> 13 </div> 14 <script src="vue.js"></script> 15 <script> 16 let HHH={ 17 template:`<button v-on:click="add01">{{name}}{{msg}}</button>`, 18 data:function () { 19 return{ 20 msg:1, 21 } 22 }, 23 methods:{ 24 add01:function () { 25 this.msg+=1; 26 this.$emit('jieke'); 27 } 28 }, 29 props:{ 30 name:String, 31 } 32 } 33 let app = new Vue({ 34 el:'#app', 35 data:{ 36 message:['1號技師','2號技師','3號技師'], 37 total:0, 38 }, 39 components:{ 40 sakula:HHH, 41 }, 42 methods:{ 43 ttt:function () { 44 this.total+=1; 45 } 46 } 47 }) 48 </script> 49 </body> 50 </html>子父元件傳值
插槽和具名插槽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子父元件的傳值</title> 6 7 </head> 8 <body> 9 <div id="app"> 10 <h4>接客總數:{{total}}</h4> 11 <hr> 12 <sakula v-for="item,index in message" v-bind:name="item" v-on:jieke="ttt"> 13 <template slot="s1"> 14 <span>s1s1s1</span> 15 <h4>s1s1s1s1s1</h4> 16 </template> 17 <template slot="s2"> 18 <h5>sssssss2222222</h5> 19 <lable >sssss2s2s2s2</lable> 20 </template> 21 </sakula> 22 </div> 23 <script src="vue.js"></script> 24 <script> 25 let HHH={ 26 template:`<div> 27 <button v-on:click="add01">{{name}}{{msg}}</button> 28 <slot name="s1"></slot> 29 <slot name="s2"></slot> 30 </div>`, 31 data:function () { 32 return{ 33 msg:1, 34 } 35 }, 36 methods:{ 37 add01:function () { 38 this.msg+=1; 39 this.$emit('jieke'); 40 } 41 }, 42 props:{ 43 name:String, 44 } 45 } 46 let app = new Vue({ 47 el:'#app', 48 data:{ 49 message:['1號技師','2號技師','3號技師'], 50 total:0, 51 }, 52 components:{ 53 sakula:HHH, 54 }, 55 methods:{ 56 ttt:function () { 57 this.total+=1; 58 } 59 } 60 }) 61 </script> 62 </body> 63 </html>插槽和具名插槽
今日學習總結
1 1. Vue基礎語法 2 1. Vue使用 3 1. 生成Vue例項和DOM中元素繫結 4 2. app.$el --> 取出該vue例項繫結的DOM標籤 5 3. app.$data --> 取出該vue例項繫結的data屬性 6 2. 模板語法 7 1. {{name}} --> 在標籤中間引用data屬性中的變數 8 2. v-html='msg' --> 在頁面上顯示我定義的標籤元素 9 10 3. v-if='ok' --> 控制標籤在不在DOM中 11 4. v-show='!ok' --> 控制標籤的display屬性的值（是否顯示） 12 13 5. v-bind:href='url' --> 將標籤的屬性和vue例項的data屬性繫結起來 14 6. v-on:click='dianwo'--> 給標籤繫結一個點選事件，方法需要在vue例項的methods中定義 15 16 7. v-model='article' --> 用在input標籤和textarea標籤中，將使用者輸入和vue例項中的資料屬性建立雙向繫結 17 18 3. 計算屬性和偵聽器 19 1. 計算屬性 20 （字串翻轉的例子） 21 1. 計算屬性需要定義在vue例項的 computed 中 22 2. 多用於對變數做一些自定義的操作 23 3. 我們在頁面上像使用普通data屬性一樣使用計算屬性 24 2. 偵聽器 25 多用於一些複雜的運算或者非同步操作 26 偵聽器需要放在 vue例項的 watch 中 27 4. class和style屬性 28 1. 基於物件的繫結 29 2. 基於陣列的繫結 30 5. 條件渲染 31 v-if 32 如果想控制多個標籤的顯示與否，可以使用 template 標籤把它們包起來 33 v-if/v-else 34 v-if/v-else if /v-else 35 36 6. 列表渲染 37 v-for迴圈 38 7. 事件處理 39 詳見2.模板語法 40 8. 表單繫結 41 詳見2.模板語法 42 43 2. 小清單 44 1. 物件的深拷貝 45 2. 根據索引刪除陣列中的元素 46 splice(索引,刪除個數,插入的元素) 47 48 2. 今日內容 49 1. 元件 50 0. 注意事項： 51 元件中的data屬性必須設定成一個函式！！！ 52 1. 註冊全域性元件 53 Vue.component(元件名,{ 54 template: ``, 55 data: function(){ 56 return {} 57 }, 58 methods: {...} 59 }) 60 2. 註冊區域性元件（當前vue例項才能使用的元件） 61 new Vue({ 62 el: '#app', 63 components: { 64 alert: { 65 template: ``, 66 data: function(){ 67 return {} 68 }, 69 methods: {...} 70 } 71 } 72 }) 73 3. 元件間通訊 74 1. 父元件 -傳值-> 子元件 75 v-bind:變數='值' 76 注意事項： 77 子元件接收值需要在props裡面宣告 78 79 2. 子元件 -傳值-> 父元件 80 觸發自定義事件的方式，為了確保父元件的值不會被子元件直接修改 81 子元件觸發事件： 82 this.$emit('事件名') 83 父元件監聽事件： 84 v-on:事件名='處理的方法' 85 86 3. 元件間傳值 87 明天補充 88 89 4. 插槽和帶名字的插槽 90 引用子元件的時候，我可以傳遞一些額外的標籤元素 91 92 93 2. 前端開發工具包 94 1. node.js 95 本質上還是JS，跑在V8引擎上的，讓JS能夠和作業系統進行互動 96 和Python\php類似的指令碼語言 97 98 2. npm 99 類似於Python中的pip 100 101 幫助我們解決包和包之間版本的依賴關係 102 103 3. webpack 104 將後端開發的js程式碼打包成一個單獨的js檔案 105 106 1. 安裝 107 npm install webpack -g 108 npm install webpack-cli -g 109 2. 打包JS 110 webpack b.js 111 112 113 4. vue-cli學習總結