一、什么是Vue？
它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）
二、Vue的引入
- 独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 - 使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
三、初识Vue-----简单demo
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下：
const app = new Vue({
// 选项
})
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="app">
<!--引用数据-->
{{name}}
{{age}}
</div>
<script>
//创建Vue根实例
const app = new Vue({
//指定作用域
el: "#app",
//数据
data: {
name: "wangjifei",
age: '27',
}
})
</script>
</body>
</html>
可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
data 用于定义属性，实例中有三个属性分别为：name、age。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化
四、常见指令介绍
- 指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
- 指令修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如：
.lazy 懒加载，等到input框失去焦点时再显示数据
.trim 去处数据空格
.number 数字 - v-text 绑定文本、v-html 绑定html
<div id="app">
<p v-text="a"></p>
<div v-html="b"></div>
</div>
<script>
//创建Vue根实例
const app = new Vue({
el: "#app",
data: {
a: "A",
b: `<h1>我是html</h1>`
}
})
</script>
- v-model（input标签、textarea标签、select标签）
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
<div id="app">
用户名：
<input type="text" v-model.lazy.trim="name">
<pre>{{name}}</pre>
<hr>
手机号：
<input type="text" v-model.number="phone">
<pre>{{phone}}</pre>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "",
phone: "",
}
})
</script>
<div id="app">
<textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>
{{article}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
article:''
}
})
</script>
<div id="app">
<select v-model="from">
<option value="1">河北</option>
<option value="2">山西</option>
</select>
<pre>{{from}}</pre>
<select v-model="where" multiple>
<option value="1">上地</option>
<option value="2">西二旗</option>
<option value="3">三里屯</option>
</select>
<pre>{{where}}</pre>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
from: '1',
where: '1'
}
})
</script>
- v-for
v-for 指令需要以 ** in **s 形式的特殊语法， **s 是源数据数组并且 ** 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表
<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: 10,
}
]
}
})
</script>
- v-bind (:) 通过v-bind可以动态绑定标签上的属性值，例如可以绑定a标签的href属性
<div id="app">
<a :href="path">@马云</a>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
path: "http://www.taobao.com",
}
})
</script>
- v-on (@)
按钮的事件我们可以使用 v-on 监听DOM事件，并在触发时运行一些js代码。因为许多事件处理的逻辑很复杂，所以直接将js代码写在v-on指令是不可行的，因此使用v-on绑定事件名，通过事件名来调对应逻辑的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<style>
.active {
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<!--<a v-bind:href="path">@马云</a>-->
<a :href="path">@马云</a>
<button @click="on_click">点我显示盒子的样式</button>
<div v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}">鼠标事件</div>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
path: "http://www.taobao.com",
},
methods: {
on_click: function () {
this.show = !this.show
},
onMouseenter: function () {
console.log("鼠标移入了")
},
onMouseleave: function () {
console.log("鼠标移出了")
}
}
})
</script>
</body>
</html>
- v-if、v-else-if、v-else，通过判断v-if来控制元素存在与否，v-if通过判断后面的值是true或者false来决定，另外v-else不可以单独使用，必须搭配v-if来使用。
<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>
这里， v-if 指令将根据表达式 "role=='vip'" 的值(true 或 false )来决定是否插入 h1标签。
- v-show 控制的是DOM对象的显示或者隐藏，即display属性
<div id="app">
<button @click="on_click">点我</button>
<p v-show="show">天苍苍</p>
<p v-if="a =='if_show'">野茫茫</p>
<p v-else>风吹草低见牛羊</p>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
show: false,
a: "if_show"
},
methods: {
on_click: function () {
this.show = !this.show
}
}
})
</script>
- 自定义指令，通过自定义指令来实现我们自己想要实现的指令效果
<div id="app">
<div class="active" v-pin.left.bottom="show">
</div>
</div>
<script>
//自定义指令必须调用directive方法来实现，pin是自定义指令名，el为当前绑定自定义指令的html标签，binding是一个包含自定义指令中的各种属性或值的对象，
Vue.directive("pin", function (el, binding) {
console.log(el)
console.log(binding)
let val = binding.value;
//modifiers中存储的是自定义指令中的所有修饰符内容
let positons = binding.modifiers;
if(val){
for(let key in positons){
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>
- 计算属性computed
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的，在使用计算属性时，对于不变的数据，计算属性会通过缓存来存储，当再次调用可以直接从缓存中取出，提高效率，节省CPU，只有当数据发生改变时，才会对数据再次处理。
<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: 59,
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>
