指令
復習
""" vue:為什么選擇vue - 綜合其他框架優點，輕量級，中文API，數據驅動，組件化開發，數據的雙向綁定，虛擬DO漸進式js框架 - 選擇性控制 - 創建一個vue實例對象，關聯一個掛載點實例成員：el：body，html不能，通常用id，css3選擇器語法data: 數據，字典形式filters：過濾器函數 fn(a, b) - {{ a | fn(b) }} | {{ a,b | fn }}methods: 事件方法指令：文本：{{ }} | v-text | v-html事件：v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)"屬性：v-bind:style="myStyle" | :class="[c1, c2]" | :class="{active: isActive}"表單指令：v-model="變量" """v-once指令
""" v-once：單獨使用，限制的標簽內容一旦賦值，便不可被動更改(如果是輸入框，可以主動修改) """ <div id="app"><input type="text" v-model="msg"><!-- 一旦賦值，只可主動更改 --><input type="text" v-model="msg" v-once><p>{{ msg }}</p><!-- 一旦賦值，便不可更改 --><p v-once>{{ msg }}</p> </div> <script src="js/vue.js"></script> <script>new Vue({el: '#app',data: {msg: '初始值'}}) </script>v-cloak指令(了解)
""" v-cloak：防止頁面閃爍 """ <style>[v-cloak] {display: none;} </style> <!-- 不處理的情況下，每次新價值該頁面，都會先渲染{{}}，當vue環境加載成功，{{}}有會被解析消失 --> <!-- 處理后，vue環境沒加載好時，#app是被隱藏的，vue環境加載成功，會依次#app的v-cloak屬性，就不會出現{{}}渲染閃爍問題 --> <div id="app" v-cloak>{{ }}{{ }}{{ }} </div> <script src="js/vue.js"></script> <script>new Vue({el: '#app',}) </script>條件指令
<!-- 1) 兩種都可以控制標簽的顯隱，綁定的值是布爾類型值，當都隱藏標簽時v-if是不渲染標簽v-show以 display:none 方式渲染 --><div id="app"><p v-if="isShow">if條件指令</p><p v-show="isShow">show條件指令</p> </div> <script src="js/vue.js"></script> <script>new Vue({el: '#app',data: {isShow: false,}}) </script><!-- 2) v-if="變量"v-else-if="變量"v-else一組分支，上成立分支會屏蔽下方所有分支，else分支沒有條件，在所有分支不成立后才顯示 --><style>.box {width: 400px;height: 300px;}.r { background-color: red; }.y { background-color: yellow }.b { background-color: blue; }.active {background-color: pink;} </style> <div id="app"><div class="em"><p><button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}">紅</button><button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}">黃</button><button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}">藍</button></p><p><button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''">紅</button><button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''">黃</button><button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''">藍</button></p><div class="box r" v-if="showName == 'rBox'"></div><div class="box y" v-else-if="showName == 'yBox'"></div><div class="box b" v-else></div></div> </div> <script src="js/vue.js"></script> <script>new Vue({el: '#app',data: {showName: 'rBox'},methods: {changeBox(name) {this.showName = name;}}}) </script>v-pre指令(了解)
""" v-pre指令可以在vue控制范圍內，形成局部vue不控制區域(局部不解析vue語法) """ <div id="app"><p>{{ msg }}</p><!-- v-pre 指令可以在vue控制范圍內，形成局部vue不控制區域{{ }} 和 v-if 都會原樣輸出，不會被解析--><p v-pre>{{ }}<span v-if="hehe"></span></p> </div> <script src="js/vue.js"></script> <script>new Vue({el: '#app',data: {msg: 'message'}}) </script>循環指令
""" 1) 遍歷字符串：可以只逐一遍歷字符，也可以連同遍歷索引<p v-for="ch in str"></p> | <p v-for="(ch, index) in str"></p>2) 遍歷數組：可以只逐一遍歷成員元素，也可以連同遍歷索引<p v-for="ele in arr"></p> | <p v-for="(ele, index) in arr"></p>3) 遍歷對象：可以只逐一遍歷成員元素，也可以連同遍歷成員鍵(key)，還可以遍歷成員key索引<p v-for="v in dic"></p> | <p v-for="(v,k) in arr"></p> | <p v-for="(v,k,i) in arr"></p> """ <div id="app"><p>{{ str }}</p><p>{{ str[0] }}</p><div><span v-for="ch in str">{{ ch }}</span></div><div><!--針對循環遍歷的標簽，通過會提供key屬性來優化渲染速度，但key的值必須唯一（key可以不用提供） --><span v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</span></div><div><p v-for="(ele, i) in arr">{{ i }}{{ ele }}</p></div><div><p v-for="ele in dic">{{ ele }}</p></div><div><p v-for="(ele, k) in dic">{{ k }}:{{ ele }}</p></div><div><p v-for="(ele, k, i) in dic">{{ i }}{{ k }}:{{ ele }}</p></div></div> <script src="js/vue.js"></script> <script>new Vue({el: '#app',data: {str: 'abc123呵呵',arr: [3, 4, 1, 2, 5],dic: {name: 'Tank',age: 80,gender: '哇塞',}}}) </script>todolist留言板案例
""" 1) 留言就是往留言數組中添加數據，刪除留言就是從留言數組中移除數據2) 前臺數據庫：localStorage 和 sessionStoragelocalStorage永久保存數據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) : [], // 所有留言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) {// 開始索引 操作長度 操作的結果們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>實例成員 - 插值表達式符號(了解)
<div id="app">{{ msg }}{[ msg ]} </div> <script> new Vue({el: '#app',data: {msg: '12345'},// delimiters: ['{{', '}}'],delimiters: ['{[', ']}'], }) </script>總結
- 上一篇： 汉堡王什么汉堡好吃_KFC、汉堡王、麦当
- 下一篇： hiho 挑战赛16 B 王胖浩与环