一、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 demo
二、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>
v-test v-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: [],
}
});
v-model input
// 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: "这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。"
}
});
v-model textarea
// 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: [],
}
});
v-model select
// 需求是展示一个人的所有爱好 以及喜欢吃的食物和价格
// 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-for
// 我们常常见到博客中评论回复的时候 @某某某
// 我们点击这个用户是能够跳转的 那么这个应该是个动态的
// 我们就需要给标签属性进行动态绑定 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,
}
});
v-bind
// 那我们以前的事件绑定在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")
}
},
});
v-on
// 我们之前写过权限 我们现在模拟一个简单的权限
// 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',
},
});
v-if v-else-if v-else
// 现在我们要实现一个功能 点击一个按钮显示文本 再点击取消
// 这种显示和隐藏的功能 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
}
} });
v-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>
获取DOM
四、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
}
}
});
计算属性 computed
五、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,
}
});
过滤器 filter