## :-: [声明式渲染](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 } ```