一、
"""
1) 留言就是往留言數組中添加數據，刪除留言就是從留言數組中移除數據
2) 前台數據庫：localStorage 和 sessionStorage
localStorage永久保存數據
sessionStorage臨時保存數據(當所屬頁面標簽被關閉，數據被清空)
3) 前台localStorage 和 sessionStorage數據庫存儲的值是字符串類型，所以要存放arr、dic等復雜數據需要JSON參與
"""
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> li:hover { color: red; cursor: pointer; } </style> </head> <body> <div id="app"> <p> <input type="text" v-model="userMsg"> <button type="button" @click="sendMsg">留言</button> </p> <ul> <li v-for="(msg, index) in msgs" @click="deleteMsg(index)"> {{ msg }} </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [], // 這是所有留言，頁面需要用的時候循環msgs，如果數據庫有值則渲染，無值為空列表 userMsg: '', // 留言框用戶留言，默認為空 }, methods: { sendMsg() { // 留言事件 // 尾增 // this.msgs.push(this.userMsg); // 首增 // this.msgs.unshift(this.userMsg); let userMsg = this.userMsg; //獲取輸入框中留言內容 if (userMsg) { //判斷留言框是否為空，有內容才會繼續 this.msgs.unshift(userMsg); // 塞入所有留言列表 localStorage.msgs = JSON.stringify(this.msgs); // 同步到數據庫 this.userMsg = ''; // 清空留言框 } }, deleteMsg(index) { // 三個參數：開始索引 操作長度 操作的結果們（例如：（0,0,1,2,3）就是說從零位操作零位，結果變成1，2，3，點一下增加三個數） //這里兩個參數的意思是從索引開始操作一位結果變成空，就是刪除一個數的意思 this.msgs.splice(index, 1) } } }) </script> <script>
//測試前端數據庫 // localStorage['num'] = 10; // sessionStorage.num = 888; // console.log(localStorage.num); // localStorage.msgs = JSON.stringify(['1111', '2222']); // console.log(JSON.parse(localStorage.msgs)); // console.log(JSON.parse(localStorage.msgs)[0]); </script> </html>
二、組件
1.組件認識
// 1) 組件：一個包含html、css、js獨立的集合體，這樣的集合體可以完成頁面解構的代碼復用，后端沒有組件概念，前端才有 // 2) 分組分為根組件、全局組件與局部組件
1.根組件：所有被new Vue()產生的組件，在項目開發階段，一個項目只會出現一個根組件，因為根組件和根組件之間不能直接進行信息交互
2.全局組件：不用注冊，就可以成為任何一個組件的子組件
3.局部組件：必須注冊，才可以成為注冊該局部組件的子組件 // 3) 每一個組件都有自身的html結構，css樣式，js邏輯
1.每一個組件其實都有自己的template，就是用來標識自己html結構的
2.template模板中有且只有一個根標簽
3.根組件一般不提供template，就由掛載點的真實DOM提供html結構 // 4) 除根組件的其他組件，數據要有局部作用域，保證組件復用時，各組件間數據的獨立性 // 5) 在多組件共處時，在哪個組件模板中出現的變量，由當前組件組件提供
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{color: yellowgreen;} </style> </head> <body> <!--組件是有html模板，有CSS樣式，有js邏輯的集合體，這里先這樣寫，后期會分成三部分，分開寫--> <!--掛載點不能用html,也不能用body,因為會被組件會被template替換掉，也就是說如果你用了body或者html他們會被替換掉，也就是說他們不再存在，這顯然不合理--> <!--掛載點必須有，但是里面的p標簽可有可無，因為后期會被替換，掛載點div類似占位符，先用該div渲染出真實DOM后面用template內部的虛擬DOM把這里的真實DOM替換掉--> <div id="app01"> <p><h1>組件的概念</h1></p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:'#app01', template:` <div style="color: red"> css樣式 <h1>組件渲染的模板</h1> <span @click="lll">點我</span> </div> `, data:{}, methods:{ lll:function () { //js邏輯 alert(123) } } }) </script> </html>
這就是組件的最終格式，有自己的HTML模板，有css樣式，還有自己的js邏輯的代碼塊，然后我們在實際開發中肯定會有好多好多的組件，這就需要用到了全局子組件和局部子組件，然后我們的template只在局部組件中使用，根組件直接使用掛載點的模板就好
2、局部組件
注意在使用局部組件的時候一定要注冊，在components中
每個組件模板只能擁有一個根標簽
// 1) 創建局部組件 // 2) 在父組件中注冊該局部組件 // 3) 在父組件的template模板中渲染該局部組件
1.創建局部組件
let localTag = { template: ` <div class="box"> <img src="img/666.jpg" alt=""> <h3>鳳哥</h3> <p>馬叉蟲❤馬叉蟲</p> </div> ` };
2. 在父組件中注冊該局部組件
new Vue({
el: '#app',
components: {
// mcc: localTag, #這里冒號前什么名字，渲染的時候就用什么
// localTag, 'local-tag': localTag,
}
})
3. 在父組件的template模板中渲染該局部組件
<div id="app"> <!--<mcc></mcc>--> <local-tag></local-tag> #這里渲染的時候會將大寫轉換成小寫，就會報錯，要不就名字直接寫小寫，如果采取省略寫法這里就加下划線也可以等價於駝峰體 <local-tag></local-tag> </div>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .box { box-shadow: 0 3px 5px 0 #666; width: 240px; height: 300px; text-align: center; padding: 20px 0; float: left; margin: 5px; } .box img { width: 200px; } </style> </head> <body> <div id="app"> <!--<mcc></mcc>--> // 3) 在父組件的template模板中渲染該局部組件 <local-tag></local-tag> <local-tag></local-tag> </div> </body> <script src="js/vue.js"></script> <script> // 創建一個局部組件 // 1) 創建局部組件 let localTag = { template: ` <div class="box"> <img src="img/666.jpg" alt=""> <h3>鳳哥</h3> <p>馬叉蟲❤馬叉蟲</p> </div> ` }; // 2) 在父組件中注冊該局部組件 new Vue({ el: '#app', components: { // mcc: localTag, // localTag, 'local-tag': localTag, } }) </script> </html>
3、全局組件
Vue.component('全局組件名',{
在該字典中書寫代碼塊
})
全局組件與局部組件的區別是全局組件不需要注冊，局部組件需要注冊，我們自己在使用的時候，用全局組件會多一些，但是在一個項目 開發中使用局部組件會多！
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .box { box-shadow: 0 3px 5px 0 #666; width: 240px; height: 300px; text-align: center; padding: 20px 0; float: left; margin: 5px; } .box img { width: 200px; } </style> </head> <body> <div id="app"> <global-tag></global-tag> <global-tag></global-tag> <global-tag></global-tag> </div> </body> <script src="js/vue.js"></script> <script> // 1) 創建全局組件 // 2) 在父組件的template模板中直接渲染該全局組件 Vue.component('global-tag', { template: ` <div class="box" @click="action"> <img src="img/666.jpg" alt=""> <h3>鳳哥</h3> <p>馬叉蟲❤{{ num }}</p> </div> `, data () { return { num: 0 } }, methods: { action() { this.num++; } } }); // 數據局部化分析導入 //如果這里直接是 a=10|b1=a|b2=a|b3=a 那么當b1或者b2或b3任意一個改變，a會改變，也就是說所有的數都改變 //采用下面的函數，每一次實例化出一個a，有自己的名稱空間，互不干擾 // a = function () { // return {num: 10} // }; // b1 = a(); // b2 = a(); // b3 = a(); new Vue({ el: '#app', }) </script> </html>
三、組件間信息交互
知道了組件之后，我們實際中會有多個組件存在，多個組件中拿到的數據有可能是從根組件提供的，如何從根組件那里拿到數據，或者說從子組件那里拿到數據給根組件，這就是組件之間的信息交互，和我們學過的進程間通信是比較像的，我們下面來學習書寫
1.父傳子
父傳子重點就是找對信息交互的點，就是子組件的渲染標簽，
該標簽是子組件的，屬性也就是子組件的，但是屬性值由父組件提供，
子組件中通過props反射將這個值取出就拿到了數據，渲染成功
// 數據交互 - 父傳子 - 通過綁定屬性的方式 // 1) 子組件的標簽，父組件提供數據 // 2) 在父組件模板中，為子組件標簽設置自定義屬性，綁定的值由父組件提供 // 3) 在子組件實例中，通過props反射實例成員獲得自定義屬性
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .info { text-align: center; width: 200px; padding: 3px; box-shadow: 0 3px 5px 0 pink; float: left; margin: 5px; } .info img { width: 200px; } </style> </head> <body> <div id="app"> <info v-for="info in infos" :key="info.image" :myinfo="info"></info> </div> </body> <script src="js/vue.js"></script> <script> // 偽代碼：模擬數據從后台請求 /* let infos = ''; document.onload = function () { $.ajax({ url: '/images/', type: 'get', success (response) { infos = response.data } }) }; */ let infos = [ { image: 'img/001.png', title: '小貓' }, { image: 'img/002.png', title: '蛋糕' }, { image: 'img/003.png', title: '藍糕' }, { image: 'img/004.png', title: '惡犬' }, ]; let info = { template: ` <div class="info"> <img :src="myinfo.image" alt=""> <p><b>{{ myinfo.title }}</b></p> </div> `, // 3) 在子組件實例中，通過props實例成員獲得自定義屬性 props: ['myinfo'] }; // 數據交互 - 父傳子 - 通過綁定屬性的方式 // 1) 父組件提供數據 // 2) 在父組件模板中，為子組件標簽設置自定義屬性，綁定的值有父組件提供 // 3) 在子組件實例中，通過props實例成員獲得自定義屬性 new Vue({ el: '#app', components: { info, }, data: { infos, } }) </script> </html>
2.子傳父
父級先產生，然后加載子級，父級產生的信息傳給子級，子級完成了一系列的數據操作之后傳給父級，那就是鈎子思想的運用，在子級通過emit定義一個事件，只要觸發了就傳給父級
// 組件交互-子傳父
// 1) 數據由子組件提供
// 2) 子組件內部通過觸發系統事件，發送一個自定義事件，將數據攜帶出來
// 3) 父組件位子組件標簽的自定義屬性通過方法實現，就可以通過參數拿到子組件傳遞處理的參數
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .close:hover { cursor: pointer; color: red; } </style> </head> <body> <div id="app"> <p> <input type="text" v-model="userMsg"> <button @click="sendMsg">留言</button> </p> <ul> <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li> </ul> </div> </body> <script src="js/vue.js"></script> <script> let msgLi = { template: ` <li> <span class="close" @click="deleteMsg(index)">x </span> <span>第{{ index + 1 }}條：</span> <span>{{ msg }}</span> </li> `, props: ['msg', 'index'], methods: { // 系統的click事件 deleteMsg(i) { // $emit('自定義事件名', 參數們) this.$emit('remove_msg', i); this.$emit('myclick', 1, 2, 3, 4, 5) } } }; // 組件交互-子傳父 // 1) 數據由子組件提供 // 2) 子組件內部通過觸發系統事件，發送一個自定義事件，將數據攜帶出來 // 3) 父組件位子組件標簽的自定義屬性通過方法實現，就可以通過參數拿到子組件傳遞處理的參數 new Vue({ el: '#app', data: { msgs: [], userMsg: '' }, methods: { sendMsg() { if (this.userMsg) { this.msgs.push(this.userMsg); this.userMsg = ""; } }, removeAction(i) { this.msgs.splice(i, 1) } }, components: { msgLi } }) </script> </html>