## :-: [聲明式渲染](https://cn.vuejs.org/v2/guide/#聲明式渲染 "聲明式渲染") ``` <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <div id="app">{{ demo }}</div> <script> new Vue({ el: "#app", data: { demo: "Hello World ~" } }); </script> ``` ## :-: 筆記  ``` <!-- {{ test }} -- 差值表達式 --> <div id="demo" v-if="isShow">{{ test }}{{ " -- " + obj.abc }}</div> <script> const oVue = new Vue({ // el -- 需要綁定數據的元素、 el: "div", data: { // 數據綁定是通過數據劫持來實現的、 // 數據要先存在才能實現數據綁定。通過索引的方式去改變數組，不能渲染視圖。 // 數組變異方法：push、pop、shift、unshift、sort、reverse、splice test: "Hello World ~", isShow: true, obj: {} } }); // oVue.$set(Object,'prop','item') -- 改變引用值內的數據，并且渲染到視圖上、 oVue.$set(oVue.obj, "abc", "item"); // $nextTick -- 通過回調拿到最新的dom節點 oVue.$nextTick(() => { console.log("-- 頁面重新渲染完畢執行"); console.log(oVue.$el); }); // 通過$mount方法將數據掛載到dom節點綁定、(跟'new Vue'的'el'二選一) // oVue.$mount("#demo"); console.log(oVue.test); </script> ``` ## :-: 指令 ``` <!-- 指令： 1. v-pre -- 不進行差值渲染 例：<div v-pre>{{ test }}</div> 2. v-cloak -- 加載時防止顯示差值表達式(閃現)，配合CSS代碼 [v-cloak]{display:none;} 3. v-once -- 固定渲染的結果，下次再改變js數據時。視圖的數據依然不改變、 4. v-html -- == innerHTML，將字符串讓做html節點插入到dom中 (要注意XSS攻擊) 例：<div v-html="test"></div> -- test 直接就是{{ test }} 5. v-text -- == innerText 例：<div v-text="test"></div> -- test 直接就是{{ test }} 6. v-if -- 判斷，dom節點是否需要展示。是直接移除dom節點 7. v-else-if -- 否則如果，展示... 8. v-else -- 否則，展示... 例：<div v-if="isShow == 1">文本節點1</div> <div v-else-if="isShow == 2">文本節點2</div> <div v-else>文本節點3</div> 9. v-show -- 是否顯示，原理是改變CSS：display: none; 注意在template標簽v-show不生效、 例：<div v-show="isShow">文本節點</div> 10. v-bind: -- 將數據綁定到屬性、v-bind: 可以簡寫成 : (冒號) 例：<img :src="srcUrl" :class="[redClass,addClass, true?'aaa':'bbb']" /> -- 如果添加多個class屬性值，需要以數組的形式 (支持三目) 例2：<div :style="{width:'100px',height:'100px',backgroundColor: obj.red }"></div> -- css屬性值要以小駝峰形式寫、 11. v-on: -- 綁定事件、v-on: 可以簡寫成 @ 、還可以傳遞參數、 例：<button id="app" @click="change('abc',test)">提交</button> <script> let oVue = new Vue({ // 需要綁定的dom，像CSS選擇器一樣選 el: "#app", // data -- 數據寫在這里 data: { test: "-- ok" }, // methods -- 事件方法寫在這里面 methods: { // this === oVue change( val, val2 ) { console.log(1, this.test, val, val2) } // 返回 1 "-- ok" "abc" "-- ok" } }); </script> 12. v-for -- 列表渲染，傳遞一個數組來喧雜 例：<ul id="app"> -- :key -- 必須是唯一的 <li v-for="(item,index) in arr" :key="item.id">{{ index + " - " + item.name }}</li> </ul> <script> new Vue({ el: "#app", data: { arr: [{name:"a",id:01},{name:"b",id:02},{name:"c",id:03}] } }); </script> 補充：<li v-for="(item,index) in Array" :key="index">{{item}}</li> -- 遍歷數組(語義化) <li v-for="(key,value) in Object" :key="key">{{value}}</li> -- 遍歷對象(語義化) <li v-for="item in 9">{{item}}</li> -- 遍歷數字(1~9) <li v-for="item in 'abcdef'">{{item}}</li> -- 遍歷字符串 13. v-model -- 進行雙向數據綁定、可以使用雙向數據綁定的表單元素：input[type="text"]、input[type="checkbox"]、input[type="radio"]、textarea、select 例：<div id="app"> <input type="text" v-model="content"> <p>{{ content }}</p> </div> <script> const oVue = new Vue({ el: "#app", data: {content: 'abc'} }); </script> --> ``` ``` <!-- template -- 包裹標簽，沒有任何意義。加載后不顯示在html里。一般用于集中操作 --> <template v-if="true"> <spn>1</spn> <spn>2</spn> <spn>3</spn> </template> ``` ## :-: [一個小練習](http://a-1.vip/demo/vue/task.html)  ``` <div id="app" v-cloak> <!-- $event -- 事件參數 --> <!-- <input type="text" v-model="task" @keyUp="addTaskList($event,'key')"> --> <!-- @keyUp[.按值] -- 修飾符、如：@keyUp.enter or @keyUp.13 -- --> <input type="text" v-model="task" @keyUp.13="addTaskList"> <button @click="addTaskList">提交</button> <p>正在添加的任務：{{ task }}</p> <h3>所有任務</h3> <ul> <li v-for="(item,index) in taskList" :key="index"> <span>{{ item }}</span> <button @click="dleTask(index)">刪除</button> </li> </ul> </div> <script> const oVue = new Vue({ el: "#app", data: { task: 'abc', taskList: [] }, methods: { addTaskList(e, type) { let self = this; if (!self.task) return; self.taskList.push(self.task); self.task = ''; }, dleTask(index) { delete this.taskList.splice(index, 1); } } }); </script> ``` ``` // 配置一個語義化的修飾符 Vue.config.keyCodes = { // camelCase won`t work 'key-enter': 13 // @keyUp.key-enter } ```