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" } });
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>
// 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: [], } });
// 需求是展示一个人的所有爱好 以及喜欢吃的食物和价格 // 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 } ], } });
// 我们常常见到博客中评论回复的时候 @某某某 // 我们点击这个用户是能够跳转的 那么这个应该是个动态的 // 我们就需要给标签属性进行动态绑定 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, } });
// 那我们以前的事件绑定在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', }, });
// 现在我们要实现一个功能 点击一个按钮显示文本 再点击取消 // 这种显示和隐藏的功能 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 } } });
// 我们现在要获取用户的注册信息 // 用户名以及手机号 用指令修饰符能够让我们更加便捷 // 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: "", }, });
// 我们现在有个需求 点击元素 让这个元素在浏览器窗口钉住 // 我们只需自定义一个指令，只要给元素绑定指令就可以 // 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, } });
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>
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 } } });
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, } });
