# 1.Vue-为何学
## 举例
1. 速度对比
![image-20210317180201113.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1855bd0a374a4a6eae4305ca4a95c7c2~tplv-k3u1fbpfcp-watermark.image?)
2. 例如: 把数组数据-循环铺设到li中, 看看分别如何做的?
* 原生js做法
```vue
<ul id="myUl"></ul>
<script>
let arr = ["春天", "夏天", "秋天", "冬天"];
let myUl = document.getElementById("myUl");
for (let i = 0; i < arr.length; i++) {
let theLi = document.createElement("li");
theLi.innerHTML = arr[i];
myUl.appendChild(theLi);
}
</script>
```
* Vue.js做法
```vue
<li v-for="item in arr">{{item}}</li>
<script>
new Vue({
// ...
data: {
arr: ["春天", "夏天", "秋天", "冬天"]
}
})
</script>
```
> 注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js
开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)
## 小结
1. 我们为何要学习Vue?
<ol>
<li>开发更快速,更高效</li>
<li>企业开发都在使用</li>
</ol>
# 2.Vue-是什么
## 概念
==渐进式==javacript==框架==, 一套拥有自己规则的语法
官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)
## 渐进式
渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用
![image-20210314200521109.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d95fff2502e2405b98b75e9c20f1e992~tplv-k3u1fbpfcp-watermark.image?)
Vue渐进式: Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个vue回过头来看, 会很有帮助
## 库和框架
补充概念:
库: 封装的属性或方法 (例jquery.js)
框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)
![image-20210111215624065.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9380ea967e1045d2a38b7d4987238e5a~tplv-k3u1fbpfcp-watermark.image?)
![image-20210212141558460.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc578c8ced7f4fefa1bac40efa6850a8~tplv-k3u1fbpfcp-watermark.image?)
## 小结
1. Vue是什么?
<ul>
<li>Vue是一个javaScript渐进式框架</li>
</ul>
2. 什么是渐进式?
<ul>
<li>渐进式就是按需逐渐集成功能使用</li>
</ul>
3. 什么是库和框架?
<ul>
<li>库是方法的集合, 一般是个js文件</li>
<li>框架是拥有自己一套规则和语法</li>
</ul>
# 3.Vue-如何学
## 学习方法
1. 每天的知识点自测最好做到了如指掌 - 做不到只能花30分钟去记住结论和公式
2. 记住Vue指令作用, 基础语法 - 弄一个字典(一一映射关系)
3. 在课上例子, 练习, 案例, 作业, 项目中, 反复磨炼使用
4. 学会查找问题的方式和解决方式(弄个报错总结.md, 避免反复进坑)
> 总结: Vue是渐进式框架, 有自己的规则, 我们要记住语法, 特点和作用, 反复磨炼使用, 多总结
## 开发方式
+ 传统开发模式:基于html/css/js文件开发Vue
![image-20210228083641377.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46c35fbb2b5f47c2ba49deba9b684ee6~tplv-k3u1fbpfcp-watermark.image?)
+ 工程化(脚手架)开发方式:在webpack环境中开发Vue,这是最推荐, 企业常用的方式
![image-20210228083746746.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b52bf5576c374e87bfc35b31cd9a07b1~tplv-k3u1fbpfcp-watermark.image?)
# 4.Vue语法-插值表达式
## 学习
> 又叫: 声明式渲染/文本插值/大胡子语法
语法: {{ 表达式 }}
例子:
```vue
<template>
<div>
<h1>{{ msg }}</h1>
<h2>{{ obj.name }}</h2>
<h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
</div>
</template>
<script>
export default {
data() { // 格式固定, 定义vue数据之处
return { // key相当于变量名
msg: "hello, vue",
obj: {
name: "小vue",
age: 5
}
}
}
}
</script>
```
### 小结
1. 什么是插值表达式?
<ul>
<li>双大括号,可以把Vue变量直接显示在标签内</li>
</ul>
2. Vue中变量声明在哪里?
<ul>
<li>data函数内, return的对象, 对象内的key就是变量名</li>
</ul>
# 5.Vue基础-MVVM设计模式
## 演示
演示: 在上个代码基础上, 在devtool工具改变M层的变量, 观察V层(视图的自动同步)
等下面学了v-model再观察V改变M的效果
![1.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/458da0629ea64c67830b9689c810c7b5~tplv-k3u1fbpfcp-watermark.image?)
## 解释
设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)
- MVVM,一种软件架构模式,决定了写代码的思想和层次
- M: model数据模型 (data里定义)
- V: view视图 (页面标签)
- VM: ViewModel视图模型 (vue.js源码)
- MVVM通过`数据双向绑定`让数据自动地双向同步 **不再需要操作DOM**
- V (修改视图) -> M(数据自动同步)
- M(修改数据) -> V (视图自动同步)
![MVVM.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51e868c8515a40aaabbc6bc0c5d43826~tplv-k3u1fbpfcp-watermark.image?)
**1. 在vue中,不推荐直接手动操作DOM!!!**
**2. 在vue中,通过数据驱动视图,不要在想着怎么操作DOM,而是想着如何操作数据!!**(思想转变)
![双向数据绑定.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/874461b95a6346e49f380772f32d2862~tplv-k3u1fbpfcp-watermark.image?)
## 小结
1. 什么是设计模式?
<ul>
<li>设计模式是对代码分层,引入一种架构的概念</li>
</ul>
2. MVVM是什么?
<ul>
<li>MVVM(模型,视图,视图模型双向关联的一种设计模式)</li>
</ul>
3. MVVM好处?
<ul>
<li>减少DOM操作,提高开发效率</li>
</ul>
# 6.Vue指令-v-bind动态属性
## 学习
**vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头**
每个指令, 都有独立的作用
- 语法:`v-bind:属性名="vue变量"`
- 简写:`:属性名="vue变量"`
```html
<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">
```
## 小结
1. 如何给dom标签的属性设置Vue变量?
<ul>
<li>:属性名="Vue变量"</li>
</ul>
# 7.Vue指令-v-on事件绑定
## 学习
* 语法
* v-on:事件名="methods中的函数"
* v-on:事件名="methods中的函数(实参)"
* 简写: @事件名="methods中的函数"
```html
<!-- vue指令: v-on事件绑定-->
<p>你要买商品的数量: {{count}}</p>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
<button @click="subFn">减少</button>
<script>
export default {
// ...其他省略
methods: {
addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
this.count++
},
addCountFn(num){
this.count += num
},
subFn(){
this.count--
}
}
}
</script>
```
## 小结
1. 如何给dom标签绑定事件?
<ul>
<li>@事件名="methods里的函数名"</li>
</ul>
2. 如何给事件传值?
<ul>
<li>@事件名="methods里的函数名(实参)"</li>
</ul>
# 8.Vue指令-v-on事件对象
## 学习
* 语法:
* 无传参, 通过形参直接接收
* 传参, 通过$event指代事件对象传给事件处理函数
```vue
<template>
<div>
<a @click="one" href="http://www.baidu.com">阻止百度</a>
<hr>
<a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
</div>
</template>
<script>
export default {
methods: {
one(e){
e.preventDefault()
},
two(num, e){
e.preventDefault()
}
}
}
</script>
```
## 小结
1. Vue事件处理函数,如何拿到事件对象?
<ul>
<li>无实参,直接用第一个形参接收</li>
<li>有实参,手动传入$event</li>
</ul>
# 9.Vue指令-v-on修饰符
## 学习
* 语法:
* @事件名.修饰符="methods里函数"
* .stop - 阻止事件冒泡
* .prevent - 阻止默认行为
```html
<template>
<div @click="fatherFn">
<!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
<button @click.stop="btn">.stop阻止事件冒泡</button>
<a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
</div>
</template>
<script>
export default {
methods: {
fatherFn(){
console.log("father被触发");
},
btn(){
console.log(1);
}
}
}
</script>
```
## 小结
1. Vue有哪些主要修饰符,都有什么功能?
<ol>
<li>.stop - 阻止事件冒泡</li>
<li>.prevent - 阻止默认行为</li>
<ol>
# 10.Vue指令-v-on按键修饰符
## 学习
* 语法:
* @keyup.enter - 监测回车按键
* @keyup.esc - 监测返回按键
[更多修饰符](https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6)
```html
<template>
<div>
<input type="text" @keydown.enter="enterFn">
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
methods: {
enterFn(){
console.log("enter回车按键了");
},
escFn(){
console.log("esc按键了");
}
}
}
</script>
```
## 小结
1. 按键修饰符如何使用?
<ul>
<li>@键盘事件.按键修饰符="methods里的函数名"</li>
</ul>
2. 有哪些主要按键修饰符?
<ul>
<li>.enter - 只有按下回车才能触发这个键盘事件函数</li>
<li>.esc - 只有按下取消键才能触发这个键盘事件函数</li>
</ul>
# 11.Vue指令-v-model双向绑定1
## 学习
* 语法: v-model="vue数据变量"
* 双向数据绑定
* 数据变化 -> 视图自动同步
* 视图变化 -> 数据自动同步
* 最后演示: 用户名绑定 - Vue内部是MVVM设计模式
```vue
<template>
<div>
<!--
v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
-->
<div>
<span>用户名:</span>
<input type="text" v-model="username" />
</div>
<div>
<span>密码:</span>
<input type="password" v-model="pass" />
</div>
<div>
<span>来自于: </span>
<!-- 下拉菜单要绑定在select上 -->
<select v-model="from">
<option value="北京市">北京</option>
<option value="南京市">南京</option>
<option value="天津市">天津</option>
</select>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
pass: "",
from: ""
}
}
};
</script>
```
> 总结: 本阶段v-model只能用在表单元素上, 以后学组件后讲v-model高级用法
## 小结
1. v-model用在哪里?
<ul>
<li>暂时只能用在表单标签上</li>
</ul>
2. v-model有什么作用?
<ul>
<li>把Vue的"数据变量"和表单的"value属性"双向绑定在一起</li>
</ul>
# 12.Vue指令-v-model双向绑定2
## 学习
* 在复选框使用(重点: 有区别)
* 在单选框使用
* 在文本域使用
```vue
<template>
<div>
<div>
<!-- (重要)
遇到复选框, v-model的变量值
非数组 - 关联的是复选框的checked属性
数组 - 关联的是复选框的value属性
-->
<span>爱好: </span>
<input type="checkbox" v-model="hobby" value="抽烟">抽烟
<input type="checkbox" v-model="hobby" value="喝酒">喝酒
<input type="checkbox" v-model="hobby" value="写代码">写代码
</div>
<div>
<span>性别: </span>
<input type="radio" value="男" name="sex" v-model="gender">男
<input type="radio" value="女" name="sex" v-model="gender">女
</div>
<div>
<span>自我介绍</span>
<textarea v-model="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hobby: [],
sex: "",
intro: "",
};
// 总结:
// 特别注意: v-model, 在input[checkbox]的多选框状态
// 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
// 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
}
};
</script>
```
## 小结
1. 下拉菜单v-model写在哪里?
<ul>
<li>v-model写在select上,value写在option上, Vue变量关联value属性的值</li>
</ul>
2. v-model用在复选框时,需要注意什么?
v-model的vue变量是:
<ol>
<li>非数组 - 关联的是checked属性</li>
<li>数组 - 关联的是value属性</li>
</ol>
3. Vue变量初始值会不会影响表单的默认状态?
<ul>
<li>会影响,因为双向数据绑定 - 互相影响</li>
</ul>
# 13.Vue指令-v-model修饰符
## 学习
* 语法:
* v-model.修饰符="vue数据变量"
* .number 以parseFloat转成数字类型
* .trim 去除首尾空白字符
* .lazy 在change时触发而非inupt时
```vue
<template>
<div>
<div>
<span>年龄:</span>
<input type="text" v-model.number="age">
</div>
<div>
<span>人生格言:</span>
<input type="text" v-model.trim="motto">
</div>
<div>
<span>自我介绍:</span>
<textarea v-model.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
motto: "",
intro: ""
}
}
}
</script>
```
> 总结: v-model修饰符, 可以对值进行预处理, 非常高效好用
## 小结
1. Vue针对v-model有哪些修饰符来提高我们编程效率?
<ol>
<li>.number - 转成数值类型后再赋予给Vue数据变量</li>
<li>.trim - 去除两边空格后把值赋予给Vue数据变量</li>
<li>.lazy - 等表单失去焦点,才把值赋予给Vue数据变量</li>
</ol>
# 14.Vue指令-v-html
## 学习
* 语法:
* v-html="vue数据变量"
* 注意: 会覆盖插值表达式
```vue
<template>
<div>
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str: "<span>我是一个span标签</span>"
}
}
}
</script>
```
> 总结: v-html把值当做html解析
## 小结
1. v-html有什么作用?
<ul>
<li>都可以设置标签显示的内容</li>
</ul>
2. 和插值表达式区别是什么?
<ol>
<li>插值表达式把值当成普通字符串显示</li>
<li>v-html把值当成标签进行解析显示</li>
</ol>
# 15.Vue指令-v-show和v-if
## 学习
* 语法:
* v-show="vue变量"
* v-if="vue变量"
* 原理
* v-show 用的display:none隐藏 (频繁切换使用)
* v-if 直接从DOM树上移除
* 高级
* v-else使用
```html
<template>
<div>
<h1 v-show="isOk">v-show的盒子</h1>
<h1 v-if="isOk">v-if的盒子</h1>
<div>
<p v-if="age > 18">我成年了</p>
<p v-else>还得多吃饭</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOk: true,
age: 15
}
}
}
</script>
```
> 总结: 使用v-show和v-if以及v-else指令, 方便通过变量控制一套标签出现/隐藏
## 小结
1. Vue如何控制标签显示/隐藏?
<ul>
<li>v-show或v-if,给变量赋予true/false,显示/隐藏</li>
</ul>
2. 区别是什么?
<ul>
<li>v-show是用css方式显示/隐藏标签</li>
<li>v-if直接从DOM树上添加/移除</li>
<li>v-if可以配合v-else使用</li>
</ul>
# 16.Vue指令-v-for
## 学习
* 语法
* v-for="(值变量, 索引变量) in 目标结构"
* v-for="值变量 in 目标结构"
* 目标结构:
* 可以遍历数组 / 对象 / 数字 / 字符串
* 注意:
v-for的临时变量名不能用到v-for范围外
同级标签的key值不能重复
1. 遍历数组
```vue
<template>
<div id="app">
<!-- v-for 把一组数据, 渲染成一组DOM -->
<!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
<p>学生姓名</p>
<ul>
<li v-for="(item, index) in arr" :key="item">
{{ index }} - {{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: ["小明", "小欢欢", "大黄"]
}
}
</script>
```
2. 遍历数组内对象
```vue
<template>
<div id="app">
<!-- 省略其他 -->
<p>学生详细信息</p>
<ul>
<li v-for="obj in stuArr" :key="obj.id">
<span>{{ obj.name }}</span>
<span>{{ obj.sex }}</span>
<span>{{ obj.hobby }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
// ...省略其他
stuArr: [
{
id: 1001,
name: "孙悟空",
sex: "男",
hobby: "吃桃子",
},
{
id: 1002,
name: "猪八戒",
sex: "男",
hobby: "背媳妇",
}
]
}
}
}
</script>
```
## 小结
1. v-for如何循环列表?
<ol>
<li>先准备目标数据结构</li>
<li>可以遍历数组/对象/固定数字/字符串</li>
<li>谁想循环就把v-for写谁身上</li>
</ol>
2. v-for注意事项?
<ol>
<li>值变量和索引变量不能用到v-for范围以外</li>
<li>v-for="(值变量, 索引变量) in Vue变量" - 一定要注意in两边必须有空格</li>
</ol>