一、Vue 介绍
1. 作者介绍
![]()
2. Vue 简介
① Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
② Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
③ Vue 借鉴了 Angular 的模板和双向绑定技术；借鉴了 react 的组件化和虚拟 DOM 技术。
④ MVVM 模式是 Model-View-ViewModel 的缩写，Model 代表数据模型，定义数据操作的业务逻辑，View 代表视图层，负责将数据模型渲染到页面上，ViewModel 通过双向绑定把 View 和 Model 进行同步交互，不需要手动操作DOM 的一种设计思想
![]()
3. MVVM 介绍
M: 即Model，模型，包括数据和一些基本操作
V: 即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）
![]()
在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的, 只要我们Model发生了改变，View上自然就会表现出来。当用户修改了View，Model中的数据也会跟着改变。把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。
二、快速使用
1. Vue 起步
创建一个 HTML 文件，引入：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
【注意】使用自闭合标签可能会出现问题
2. 声明式渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个程序</title>
<script src="vue.js" ></script>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
<h2>姓名：{{name}}，年龄：{{age}}</h2>
</div>
<script>
// 创建vue实例
var app = new Vue({
el:"#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name : "王大锤",
age : 250
}
});
</script>
</body>
</html>
![]()
此时我们已经成功创建了一个 Vue 应用，打开 HTML 页面会显示 Hello Vue! 。这就是声明式渲染，Vue 的核心是：采用简洁的模板语法声明式地将数据渲染进 DOM 的系统。这里的核心思想就是没有繁琐的 DOM 操作，例如 jQuery 中，我们需要先找到 div 节点，获取到 DOM 对象，然后进行一系列的节点操作。
三、Vue实例
1. 创建Vue实例
var app = new Vue({ // Vue实例
el:"#app", // Vue可以对id为app的div元素进行渲染,该div之外的无法控制
data:{ // 数据，存放可能会用到的数据
name : "王大锤",
age : 250
},
methods: { // 方法，声明可能会用到的方法
test() {
console.log("测试方法");
}
}
});
2. 双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个程序</title>
<script src="vue.js" ></script>
</head>
<body>
<div id="app">
请输入年龄：<input type="text" v-model="age">
<h2>姓名：{{name}}，年龄：{{age}}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
name : "王大锤",
age : 250
}
});
</script>
</body>
</html>
其中 input 的的变化可以影响到 age，age 的变化也可以影响到 input
![在这里插入图片描述]()
3. 生命周期
![在这里插入图片描述]()
【生命周期钩子函数】
beforeCreated：在 Vue 实例化之前调用，也可以将他理解为初始化函数。在 Vue1.0 时，这个函数的名字就是 init。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。此时页面还是 {{name}}
mounted：他的功能就是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。可以将他理解为原生 js 中的 window.onload=function({.,.}) ,所以也可以理解为 jquery 中的 $(document).ready(function(){….})。此时页面中的 {{name}} 已被渲染
beforeDestroy：该函数将在销毁实例前进行调用 。
destroyed：改函数将在销毁实例后进行调用。
beforeUpdate：组件更新之前。
updated：组件更新之后。
4. this
var app = new Vue({
el:"#app",
data:{
num : 10
},
methods: {
test() {
let a = num; // 拿不到值
let b = this.num ++; // 可以拿到值
}
}
});
四、模板语法
1. 插值表达式 {{ }}
<div id="app">
<h2>姓名：{{name}}，年龄：{{age}}</h2>
</div>
2. v-model
<div id="app">
<!-- 双向绑定 -->
<input type="text" v-model="num">
<span>{{num}}</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num : 200
}
});
</script>
3. v-test / v-html
<div id="app">
<!-- 纯文本展示 -->
<span v-text="num"></span>
<!-- 解析为html -->
<span v-html="num"></span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num : "<h1>Hello Vue!</h1>"
}
});
</script>
![在这里插入图片描述]()
4. v-on
-
语法
<div id="app">
{{num}} <br/>
<!-- 绑定事件 -->
<button v-on:click="add">add</button>
<!-- 简写形式 -->
<button @click="add">add</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num : 1
},
methods: {
add() {
this.num ++;
}
}
});
</script>
![在这里插入图片描述]()
-
事件修饰符
.prevent：阻止默认事件发生
<!-- 阻止默认链接跳转，使用 add 方法处理该事件，也可不处理 -->
<a href="" @click.prevent="add">链接</a>
5. v-for
-
语法
<div id="app">
<lu>
<!-- 遍历集合 -->
<li v-for="item in list">
{{item}}
</li>
<hr/>
<!-- 遍历集合，拿到索引 -->
<li v-for="(item, index) in list">
{{index + 1}}---{{item}}
</li>
<hr/>
<!-- 遍历对象，拿到 key，拿到索引 -->
<li v-for="(item, key, index) in user">
{{index + 1}}---{{key}}---{{item}}
</li>
</lu>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list: ["唐三藏", "熏悟空", "猪八盖", "洒悟净", "小百龙"]，
user: {name: "王大锤", age: 23}
}
});
</script>
![在这里插入图片描述]()
-
注意
我们一般会加 key 来提高效率，理想的 key 是每项都有且唯一的
<li v-for="(item, index) in lsit" :key="index">
{{index + 1}}---{{item}}
</li>
6. v-if
<div id="app">
<span v-if="flag">10086</span>
<span v-if="!flag">10001</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
flag: true
}
});
</script>
![在这里插入图片描述]()
-
注意
v-if 和 v-for 在一起使用时，v-for 的优先级高于 v-if
<div id="app">
<span v-for="item in list" v-if="item.age > 24">{{item}}</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
list: [
{name: "001", age: 23},
{name: "002", age: 24},
{name: "003", age: 25}
]
}
});
</script>
![在这里插入图片描述]()
v-else-if、v-else 可以与 v-if 连用，但是之间不允许出现任何其他标签
<div id="app">
<!-- 中间间不允许出现任何其他标签 -->
<!-- ########## -->
<span v-if="num > 80">优秀</span>
<span v-else-if="num > 60">及格</span>
<span v-else>不合格</span>
<!-- ########## -->
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num: 61
}
});
</script>
7. v-show
与 v-if 类似，但是 v-show 不满足条件时是将标签隐藏
![在这里插入图片描述]()
8. v-bind
不使用 v-bind 时，变量会被认为时字符串，而不会解析为值
<!-- 动态绑定 img 地址 -->
<div id="app">
<!-- 响应的更新属性 -->
<img v-bind:src="url">
<!-- 简写形式 -->
<img :src="url">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
url: "http://pic1.win4000.com/pic/0/4a/ff62f14ce3.jpg"
}
});
</script>
---------------------------
<!-- 动态改变字体大小 -->
<div id="app">
<!-- 此处要使用驼峰命名法 即：fontSize 而不能使用 font-size -->
<span v-bind:style="{fontSize:size}">你好</span>
<button @click="add">加大</button>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
size: "10px",
num: 10
},
methods: {
add() {
this.num += 5,
this.size = this.num + "px"
}
}
});
</script>
![在这里插入图片描述]()
五、常用特性
1. 计算属性 computed
计算属性用法与方法相似，但是计算属性有缓存数据，只有在它的相关依赖发生改变时才会重新求值。而且计算属性一定要有返回值。
<div id="app">
{{add}}
</div>
<script>
var app = new Vue({
el:"#app",
computed: {
add() {
return 10
}
}
});
</script>
2. 监听器 watch
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
var app = new Vue({
el:"#app",
data: {
msg: ""
},
watch: {
<!-- 监听 msg -->
msg(newValue, oldValue) {
console.log("旧数据：" + oldValue + "\t" + "新数据：" + newValue)
}
}
});
</script>
![在这里插入图片描述]()
