Vue基础篇一
Vue指令
Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上.
<div id="app"> <p v-text="a"></p> <div v-html="b"></div> </div> <script> const app = new Vue({ el: "#app", data: { a: "A", b: `<h1>B</h1>` } }) </script>
<div id="app"> 用户名： <input type="text" v-model.lazy.trim="name"> 手机号： <input type="text" v-model.number="phone"> <pre>{{name}}</pre> {{typeof phone}} <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea> {{article}} <select v-model="from"> <option value="1">河北</option> <option value="2">山西</option> </select> <select v-model="where" multiple> <option value="1">上地</option> <option value="2">西二旗</option> <option value="3">三里屯</option> </select> {{from}} {{where}} </div> <script> // input // textarea // select const app = new Vue({ el: "#app", data: { name: "", phone: "", article: "这是一大段文本~~~", from: null, where: [] } }) </script>
<div id="app"> <h1>展示你们的爱好</h1> <ul> <li v-for="hobby in hobby_list">{{hobby}}</li> </ul> <h1>展示你们喜欢吃的食物</h1> <ul> <li v-for="food in food_list">{{food.name}}它的价格是: {{food.price}}</li> </ul> </div> <script> const app = new Vue({ el: "#app", data: { hobby_list: ["美女", "LOL", "吃鸡"], food_list: [ { name: "臭豆腐", price: 6, }, { name: "榴莲", price: 100, } ] } }) </script>
<style> .active{ background-color: red; width: 100px; height: 100px; } </style> </head> <body> <div id="app"> <a :href="path">@陈润</a> <a v-bind:href="path">@陈润</a> <div v-bind:class="{active: show}">盒子</div> </div> <script> const app = new Vue({ el: "#app", data: { path: "http://www.baidu.com", show: false } }) </script>
<style> .active{ background: red; width: 100px; height: 100px; } </style> </head> <body> <div id="app"> <a :href="path">@chenrun</a> <button @click="on_click">点我显示盒子的样式</button> <div :class="{active: show}">盒子</div> <div v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}">鼠标事件</div> </div> <script> const app = new Vue({ el: "#app", data: { path: "http://www.baidu.com", show: false }, methods: { on_click: function() { this.show = ! this.show }, onMouseenter: function() { console.log("鼠标移入了") }, onMouseleave: function() { console.log("鼠标移除") } } }) </script>
<div id="app"> <div v-if="role == 'vip'"> <h1>欢迎会员登陆</h1> </div> <div v-else-if="role == 'vvip'"> <h1>您的专属秘书为您服务</h1> </div> <div v-else> <p>gun~~~~</p> </div> </div> <script> const app = new Vue({ el: "#app", data: { role: "vip", } }) </script>
<div id="app"> <button @click="on_click">点我</button> <p v-show="show">Alex DSX</p> <p v-if="a == 'if_show'">DSX</p> <p v-else>Alex</p> </div> <script> const app = new Vue({ el: "#app", data: { show: false, a: "if_show" }, methods:{ on_click: function() { this.show = ! this.show } } }) //if appendChild //show display </script>
<div id="app"> 用户名: <input type="text" v-model.lazy.trim="username"><br> {{username}} 手机号: <input type="text" v-model.number="phone"><br> {{phone}} </div> <!--//main.js--> <script> var app = new Vue({ el: '#app', data: { username: "", phone: "", } }) </script>
<style> .active{ width: 100px; height: 100px; border: solid 1px red; background: #eeeeee; } </style> </head> <body> <div id="app"> <div class="active" v-pin.right.bottom="show"></div> </div> <script> Vue.directive("pin", function(el, binding){ console.log(el); console.log(binding); let val = binding.value; let positions = binding.modifiers; if(val){ for(let key in positions){ el.style.position = "fixed"; console.log(key); el.style[key]=0; } }else{ el.style.position = "static"; } }); const app = new Vue({ el : "#app", data: { show: true, } }) </script>
<div id="app"> <table border="1"> <thead> <th>学科</th> <th>分数</th> </thead> <tbody> <tr> <td>数学</td> <td><input type="text" v-model.number="math"></td> </tr> <tr> <td>英语</td> <td><input type="text" v-model.number="english"></td> </tr> <tr> <td>物理</td> <td><input type="text" v-model.number="physics"></td> </tr> <tr> <td>总分</td> <td>{{sum_num}}</td> </tr> <tr> <td>平均分</td> <td>{{average}}</td> </tr> </tbody> </table> </div> <script> const app = new Vue({ el: "#app", data: { math: 95, english: 55, physics: 100, }, computed: { sum_num: function(){ let total = this.math + this.english + this.physics; return total }, average: function(){ let ret = Math.round(this.sum_num/3); return ret } } }) </script>
Vue计算属性
我们的模板表达式非常遍历,但是逻辑复杂的时候,模板会难以维护,vue提供了计算机属性.
我们用方法也能达到效果,那么我们为什么要计算属性呢~
其实在vue中方法和计算属性达到的效果是一样的,但是计算属性时基于依赖进行缓存的.
只有依赖的数据发生改变的时候,才会重新执行计算属性的函数, 每次调用都会从缓存中拿之前算好的数据.
而方法时没调用一次,执行一次.
Vue过滤器
过滤器时在数据到达用户的最后异步进行简单的过滤处理,复杂的还要用计算属性或者方法.
<div id="app"> <div> <p>价格展示</p> <input type="text" v-model="price"> {{price | currency('USD')}} </div> <div> <p>换算</p> <input type="text" v-model="meters"> {{meters | meter}} </div> </div> <script> Vue.filter('currency', function (val, unit){ console.log(val); console.log(unit); val = val || 0; var ret = val + unit; return ret }); Vue.filter('meter', function(val){ val = val || 0; return (val/1000).toFixed(2) + "米" }); new Vue({ el: "#app", data: { price: 10, meters: 10, } }) </script>