<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Vue</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="vue.min.js"></script> <style> .active { color: red; } .box { width: 100px; height: 100px; margin-right: 50px; margin-bottom: 50px; background-color: green; } </style> </head> <body> <div id="d1"> <!--html渲染HTML标签--> <div v-html="vue"></div> <hr> <!--for可渲染数组或者对象, 对可迭代对象进行循环--> <ul> <li v-for="i in V">我最爱学{{i}}</li> </ul> <hr> <ul> <li v-for="i in students">{{i.name}}的年龄是{{i.age}}</li> </ul> <hr> </div> <hr> <hr> <div id="d2"> <!--通过if,else,else-if控制标签显示的方式--> <div v-if="role=='王'"> <h1>你那么美</h1> </div> <div v-else-if="role=='房'"> <h1>你那么媚</h1> </div> <div v-else="role=='王'"> <h1>呸</h1> </div> </div> <hr> <hr> <div id="d3"> <!--通过判断isshow属性的布尔值来控制标签的display样式来显示标签--> <!--如果isshow的布尔值为false时,标签的display属性为none, 只是不显示而已--> <div v-show="isshow"> <h1>Python</h1> </div> </div> <hr> <hr> <div id="d4"> <!--绑定属性, 冒号后面跟标签的属性, 属性后面的等号指向数据, 可以简写为":class, :href"--> <a v-bind:class="{active:isactive}" v-bind:href="link">跳转至百度</a> </div> <hr> <hr> <!--绑定事件--> <div id="d5"> <!--v-on绑定事件新建的vue示例中要有methods属性, 在methods中含有具体的时间实现方法--> <a :href="link" v-on:click="go">跳转至百度</a> <!--方法一--> <!--go为自定义点击事件, mouseenter为鼠标移动至按钮上事件, mouseleave为鼠标在按钮上移除事件--> <button v-on="{ click: go, mouseenter: mouseenter, mouseleave: mouseleave }">点我</button> <!--方法二--> </div> <hr> <hr> <!--监听数据(双向数据绑定)--> <div id="d6"> <!--我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，--> <!--如果用户在标签上面修改了数据，我们需要获取到数据，针对这个需求，我们可以使用v-mode指令--> <p>请输入您的姓名</p> <input type="text" v-model="name"> <p> <input type="radio" value="男" v-model="gender"> <input type="radio" value="女" v-model="gender"> </p> <p>请选择你中意的朋友</p> <select name="" id="" v-model="girlfriends"> <option value="水野朝阳">水野朝阳</option> <option value="筱田步美">筱田步美</option> <option value="大桥未久">大桥未久</option> </select> <hr> <div> {{name}} {{gender}} {{girlfriends}} </div> </div> <hr> <hr> <!--指令修饰符和计算--> <div id="d7"> <table border="1"> <thead> <tr> <th>学科</th> <th>成绩</th> </tr> </thead> <tbody> <tr> <td>Python从入门到放弃</td> <!--number将字符串转换为数字--> <td><input type="text" v-model.number="python"></td> </tr> <tr> <td>Linux从删库到跑路</td> <!--trim去空格--> <td><input type="text" v-model.trim="linux"></td> </tr> <tr> <td>Go人工智能</td> <!--lazy惰性侦听(不实时更新数据,鼠标点击别处才更新)--> <td><input type="text" v-model.lazy="go"></td> </tr> <tr> <td>总和</td> <!--<td>{{sum}}</td> 两种方法都可以做到求和的需求--> <td>{{python + linux + go}}</td> </tr> <tr> <td>平均分</td> <td>{{avg}}</td> </tr> </tbody> </table> </div> <hr> <hr> <!--自定义指令--> <div id="d8" class="box" v-pos="post">Hello</div> <hr> <hr> <!--获取DOM元素--> <div id="d9"> <div ref="myname">人生当苦</div> <button v-on:click="myon">点击按钮字体变红</button> </div> <script> let d1 = new Vue({ el: "#d1", data:{ vue: "<h1>Hello Word!</h1>", V: [ "Python", "Linux", "Go" ], students: [ { name: "大师兄", age: 18 }, { name: "二师兄", age: 23 }, { name: "沙师弟", age: 89 }, ] } }); let d2 = new Vue({ el: "#d2", data: { role: "王" } }); let d3 = new Vue({ el: "#d3", data: { isshow: true } }); let d4 = new Vue({ el: "#d4", data: { link: "https://www.baidu.com", isactive: true, } }); let d5 = new Vue({ el: "#d5", data: { link: "https://www.baidu.com", }, methods: { go: function () { console.log("这个年纪的我们!") }, mouseenter: function () { console.log("鼠标来了") }, mouseleave: function () { console.log("鼠标走了") } }, }); let d6 = new Vue({ el: "#d6", data: { name: "", gender:[], girlfriends:[], } }); // 计算属性放在缓存当中，只有数据修改时才重新计算 let d7 = new Vue({ el: "#d7", data: { python: 82, linux: 56, go: 78, }, computed: { sum: function () { return this.python + this.linux + this.go }, avg: function () { return this.sum/3 } } }); Vue.directive("pos", function (el, bindding) { console.log(el); console.log(bindding); if (bindding.value){ el.style["position"] = "fixed"; el.style["right"] = 0; el.style["bottom"] = 0; } }); let d8 = new Vue({ el: "#d8", data: { post: true } }); let d9 = new Vue({ el: "#d9", methods: { myon: function () { this.$refs.myname.style.color = "red"; } } }) </script> </body> </html>
v-if 和v-show性能比较:
我们简单比较一下二者的区别：
实现方式：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异；
加载性能：v-if加载速度更快，v-show加载速度慢
切换开销：v-if切换开销大，v-show切换开销小
v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。