Vue基础以及指令
Vue 基础篇一
Vue框架介绍
之前大家学过HTML，CSS，JS，JQuery，Bootstrap，现在我们要学一个新的框架Vue~
Vue是一个构建数据驱动的web界面的渐进式框架。
目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。
能够构建复杂的单页面应用。现在我们开始认识一下Vue~
// HTML 页面 <div id="app"> <span>你的名字是{{name}}</span> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js 页面 var app = new Vue({ el: '#app', data: { name: "Gao_Xin" } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <body> <div id="ret"> {{ name }} {{ age }} </div> <script> const ret = new Vue({ el:"#ret", data:{ name:'张三', age:14 } }) </script> </body> </html>
Vue指令
Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，
它带有v-前缀，功能是当表达式改变的时候，相应的行为作用在DOM上。
<template> <div> <h2>head</h2> <p v-text="msg"></p> <p v-html="html"></p> </div> </template> <script> export default { name: "head", data(){ return { msg: "消息", html: `<h2>插入h2标题</h2>` } } } </script> <style scoped> </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <body> <div id="ret"> <p v-text="name"></p> <div v-html="hobby"></div> </div> </body> <script> const ret = new Vue({ el:"#ret", data:{ name:'张三', hobby:` <ul> <li>抽烟</li> <li>喝酒</li> <li>烫头</li> </ul> ` } }) </script> </html>
// HTML页面 <div id="app"> <label> 男 <input type="checkbox" v-model="sex" value="male"> // <input type="radio" v-model="sex" value="male"> </label> <label> 女 <input type="checkbox" v-model="sex" value="female"> </label> {{sex}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js 页面 var app = new Vue({ el: '#app', data: { // sex: "male", sex: [], } });
// HTML 页面 <div id="app"> <div> <texteare v-model="article"> </texteare> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js 页面 var app = new Vue({ el: '#app', data: { // sex: "male", sex: [], article: "这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。" } });
// HTML页面 <div id="app"> <!--<select v-model="from">--> <!--<option value="1">单选1</option>--> <!--<option value="2">单选2</option>--> <!--</select>--> <!--{{from}}--> <select v-model="where" multiple=""> <option value="1">多选1</option> <option value="2">多选2</option> <option value="3">多选3</option> </select> {{where}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js 页面 var app = new Vue({ el: '#app', data: { from: null, where: [], } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <body> <div id="ret"> <input type="text" v-model="input"> <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea> <select name="" v-model="heshang" multiple> <option value="1">tangseng</option> <option value="2">wukong</option> <option value="3">bajie</option> <option value="4">shaseng</option> </select> {{ input }} {{ article }} {{ heshang }} </div> <script> const ret = new Vue({ el:"#ret", data:{ input:'', article:'', heshang:[1,4], } }) </script> </body> </html>
/ 需求是展示一个人的所有爱好 以及喜欢吃的食物和价格 // HTML 页面 <div id="app"> <div> <span>你的爱好是</span> <ul> <li v-for="hobby in hobby_list">{{hobby}}</li> </ul> </div> <div> <span>你喜欢的食物</span> <ul> <li v-for="food in food_list">{{food.name}}: 价格￥{{food.discount ? food.price*food.discount: food.price}}</li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js var app = new Vue({ el: '#app', data: { hobby_list: ["王者毒药","LOL","吃鸡"], food_list: [ { name: "葱", price: 5, discount: .8, }, { name: "姜", price: 8, // discount: .5 } ], } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <body> <div id="ret"> <h1>{{ name }}</h1> <p>它的爱好</p> <ul> <li v-for="(hobby,index) in hobbys":key="index"> {{ hobby }}{{ index }} </li> </ul> <ul> <li v-for="item in array"> {{ item.name }}年龄是{{ item.age }} 爱好是{{ item.hobby }} </li> </ul> </div> <script> const ret = new Vue({ el:'#ret', data:{ name:'张三', hobbys:['抽烟','喝酒','烫头'], array :[{ name:'李四', age:17, hobby:'睡觉' }] } }) </script> </body> </html>
// 我们常常见到博客中评论回复的时候 @某某某 // 我们点击这个用户是能够跳转的 那么这个应该是个动态的 // 我们就需要给标签属性进行动态绑定 v-bind // HTML页面 <style> .active { background: red; } </style> <div id="app"> <div> <!--<a v-bind:href="my_link">点我</a>--> <a v-bind:href="my_link" :class="{active: isActive}">点我 </a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/main.js"></script> // main.js var app = new Vue({ el: '#app', data: { my_link: "http://baidu.com", isActive: true, } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .alex_color { width: 100px; height: 100px; border: solid 1px red; } .bg { background-color: green; } </style> </head> <body> <div id="app"> <p class="alex_color" :class="{bg: is_green}">Alex</p> <button @click="my_click(123)">点击戴绿</button> <div v-on="{mouseenter: OnMouseEnner, mouseleave: OnMouseLeave}">鼠标移入移出效果</div> <div @mouseenter="OnMouseEnner" @mouseleave="OnMouseLeave"></div> </div> <script> const app = new Vue({ el: "#app", data: { is_green: false, }, methods: { my_click: function (data) { this.is_green = !this.is_green; }, OnMouseEnner: function () { console.log("涛哥") }, OnMouseLeave: function () { console.log("旭哥") }, } }) </script> </body> </html>
// 那我们以前的事件绑定在vue中是怎么做到的呢 // HTML页面 <div> <span>事件</span> <button v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}" v-on:click="onClick(1)">点我</button> </div> <div> <input type="text" v-on="{keyup: onKeyup}"> </div> // main.js var app = new Vue({ el: '#app', data: { my_link: "http://baidu.com", isActive: true, }, methods: { onClick: function (a) { alert(a) }, onMouseenter: function () { console.log("mouse enter") }, onMouseleave: function () { console.log("mouse leave") }, onKeyup: function () { console.log("key up") } }, });
// 我们之前写过权限 我们现在模拟一个简单的权限 // HTML页面 <div> <div v-if="role == 'admin' || 'super_admin'">管理员你好</div> <div v-else-if="role == 'hr'">待查看简历列表</div> <div v-else> 没有权限</div> </div> // main.js 页面 var app = new Vue({ el: '#app', data: { role: 'admin', // role: 'hr', }, });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <body> <div id="ret"> <div v-if="role == 'vip'"> <h1>张三为您服务</h1> </div> <div v-else-if="role == 'svip'"> <h1>李四为您服务</h1> </div> <div v-else> <h1>您没有权限</h1> </div> </div> <script> const ret = new Vue({ el:"#ret", data:{ role:'vip' } }) </script> </body> </html>
// 现在我们要实现一个功能 点击一个按钮显示文本 再点击取消 // 这种显示和隐藏的功能 vue也帮我们进行了封装 // HTML页面 <div id="app"> <button @click="on_click()"> 点我 </button> <p v-show="show">提示文本</p> </div> // main.js 页面 var app = new Vue({ el: '#app', data: { show: false, }, methods: { on_click: function () { this.show = !this.show } } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <body> <div id="ret"> <div v-show="is_show"> <p>张三</p> </div> </div> <script> const ret = new Vue({ el:"#ret", data:{ is_show:true, } }) </script> </body> </html>
// 我们现在要获取用户的注册信息 // 用户名以及手机号 用指令修饰符能够让我们更加便捷 // HTML 页面 <div> 用户名: <input type="text" v-model.lazy.trim="username"><br> {{username}} 手机号: <input type="text" v-model.number="phone"><br> {{phone}} </div> // main.js 页面 var app = new Vue({ el: '#app', data: { username: "", phone: "", }, });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <body> <div id="ret"> <input type="text" v-model.trim="input"> <pre>{{ input }}</pre> {{ input }} </div> <script> const ret = new Vue({ el:'#ret', data:{ input:'', article:'', heshang:[1,4], } }) </script> </body> </html>
// 我们现在有个需求 点击元素 让这个元素在浏览器窗口钉住 // 我们只需自定义一个指令，只要给元素绑定指令就可以 // HTML页面 <style> .card { border: solid 3px red; width: 200px; height: 100px; background: #eeeeee; margin-bottom: 5px; } </style> <div id="app"> <div class="card" v-pin:true.bottom.right="pinned"> <button @click="pinned = !pinned">盯住/取消</button> 这是一个盒子文本内容 </div> <div class="card"> 这是一个盒子文本内容 </div> <div class="card"> 这是一个盒子文本内容 </div> <div class="card"> 这是一个盒子文本内容 </div> <div class="card"> 这是一个盒子文本内容 </div> <div class="card"> 这是一个盒子文本内容 </div> <div class="card"> 这是一个盒子文本内容 </div> </div> // main.js 页面 Vue.directive('pin', function (el, binding) { var binded = binding.value; var position = binding.modifiers; var warning = binding.arg; console.log(position) if(binded){ el.style.position = 'fixed'; for(var key in position){ if (position[key]){ el.style[key] = '20px'; } } if (warning === 'true'){ el.style.background = '#666' } } else { el.style.position = 'static'; el.style.background = "#eeeeee" } }); new Vue({ el: '#app', data: { pinned: false, } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style> .card { width: 100px; height: 100px; border: solid 1px red; } </style> </head> <body> <div id="app"> <div class="card" v-pin.left.bottom="is_pin"> </div> <button @click="my_click">点击定位</button> </div> <script> Vue.directive("pin", function (el, binding) { // el 是绑定指令的标签 // binding 是指令的信息 console.log(binding) if(binding.value){ el.style.position = "fixed"; // el.style.right = 0; // el.style.bottom = 0; for(let site in binding.modifiers){ el.style[site] = 0; } }else { el.style.position = "static"; } }); const app = new Vue({ el: "#app", data: { is_pin: false, }, methods: { my_click: function () { // alert(123) this.is_pin = ! this.is_pin } } }) </script> </body> </html>
Vue获取DOM元素
<style> .box { width: 200px; height: 200px; border: solid 1px red; } </style> </head> <body> <div id="app"> <div class="box" ref="my_box"> 这是一个盒子 </div> </div> <script> const app = new Vue({ el: "#app", mounted(){ this.$refs.my_box.style.color = "red"; } }) </script> </body>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="ret"> <div ref="box"> peiqi </div> <button @click="my_click">点我给盒子加点红</button> </div> <script> const ret = new Vue({ el:"#ret", methods:{ my_click:function(){ console.log(this.$refs.box); this.$refs.box.style.color="red" } } }) </script> </body> </html>
Vue计算属性
我们的模板表达式非常的便利，但是逻辑复杂的时候，模板会难以维护，vue提供了计算属性。
我们用方法也能达到效果，那么我们为什么要用计算属性呢~
其实在vue中方法和计算属性达到的效果是一样的，但是计算属性是基于依赖进行缓存的，
只有依赖的数据发生改变的时候，才会重新执行计算属性的函数，每次调用都会从缓存中拿之前算好的数据。
而方法是每调用一次，执行一次。
// 现在我们有一个成绩的表格 来计算总分和平均分 // HTML页面 <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="physics"></td> </tr> <tr> <td>英语</td> <td><input type="text" v-model.number="english"></td> </tr> <tr> <td>总分</td> <!--<td>{{math+physics+english}}</td>--> <td>{{sum}}</td> </tr> <tr> <td>平均分</td> <!--<td>{{Math.round((math+physics+english)/3)}}</td>--> <td>{{average}}</td> </tr> </tbody> </table> </div> // js 页面 var app = new Vue({ el: '#app', data: { math: 90, physics:88, english: 78, }, computed: { sum: function () { var total = this.math + this.physics + this.english return total }, average: function () { var average_num = Math.round(this.sum/3) return average_num } } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <table> <thead> <th>科目</th> <th>成绩</th> </thead> <tbody> <tr> <td>Python基础</td> <td><input type="text" v-model.number="Python"></td> </tr> <tr> <td>Django项目</td> <td><input type="text" v-model.number="django"></td> </tr> <tr> <td>数据库</td> <td><input type="text" v-model.number="sql"></td> </tr> <tr> <td>Linux</td> <td><input type="text" v-model.number="Linux"></td> </tr> <tr> <td>总计</td> <td>{{sum}}</td> </tr> <tr> <td>平均分</td> <td>{{avg}}</td> </tr> </tbody> </table> </div> <script> const app = new Vue({ el: "#app", data: { Python: 60, django: 60, sql: 60, Linux: 60, }, computed: { sum: function () { return this.Python + this.django+ this.sql +this.Linux }, avg: function () { return this.sum/4 } } }) </script> </body> </html>
Vue过滤器
过滤器是在数据到达用户的最后一步进行简单的过滤处理，复杂的还是要用计算属性或者方法。
// 我们两个需求 一个是价格展示后面自动加“元” // 单位 毫米和米的转换 // HTML页面 <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> // js 代码 Vue.filter('currency', function (val, 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, } });
posted on 2018-10-22 23:36 liangliang123456 阅读(103) 评论(0) 编辑 收藏 举报
