Vue是什么
渐进式 JavaScript 框架
vue/cli 目录和代码分析
vuecil-demo # 项目目录
├── node_modules # 项目依赖的第三方包
├── public # 静态文件目录
├── favicon.ico# 浏览器小图标
└── index.html # 单页面的html文件(网页浏览的是它)
├── src # 业务文件夹
├── assets # 静态资源
└── logo.png # vue的logo图片
├── components # 组件目录
└── HelloWorld.vue # 欢迎页面vue代码文件
├── App.vue # 整个应用的根组件
└── main.js # 入口js文件
├── .gitignore # git提交忽略配置
├── babel.config.js # babel配置
├── package.json # 依赖包列表
├── README.md # 项目说明
└── yarn.lock # 项目包版本锁定和缓存地址
node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件
vue/cli 自定义配置
/* 覆盖webpack的配置 */
// src并列处新建vue.config.js
module.exports = {
devServer: { // 自定义服务配置
open: true, // 自动打开浏览器
port: 3000
}
}
代码配置
<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
<div>欢迎使用vue</div>
</template>
<!-- js相关 -->
<script>
export default {
name: 'App'
}
</script>
<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>
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>
<style>
</style>
MVVM设计模式
-
MVVM通过
数据双向绑定让数据自动地双向同步 不再需要操作DOM- V（修改视图） -> M（数据自动同步）
- M（修改数据） -> V（视图自动同步）
vue指令-v-bind
目标: 给标签属性设置vue变量的值
每个指令, 都有独立的作用
- 语法：
v-bind:属性名="vue变量" - 简写：
:属性名="vue变量"
<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">
总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果
vue指令-v-on
目标: 给标签绑定事件
-
语法
- v-on:事件名="要执行的==少量代码=="
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
-
简写: @事件名="methods中的函数"
<!-- vue指令: v-on事件绑定-->
<p>你要买商品的数量: {{count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<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>
vue指令-v-on事件对象
目标: vue事件处理函数中, 拿到事件对象
-
语法:
-
无传参, 通过形参直接接收
-
传参, 通过$event指代事件对象传给事件处理函数
-
<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>
vue指令-v-on修饰符
目的: 在事件后面.修饰符名 - 给事件带来更强大的功能
-
语法:
-
@事件名.修饰符="methods里函数"
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- .once - 程序运行期间, 只触发一次事件处理函数
-
vue指令-v-on按键修饰符
目标: 给键盘事件, 添加修饰符, 增强能力
-
语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键
vue指令 v-model
目标: 把value属性和vue数据变量, 双向绑定到一起
-
语法: v-model="vue数据变量"
-
双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
<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>
总结: // 特别注意: v-model, 在input[checkbox]的多选框状态 // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用 // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
vue指令 v-model修饰符
目标: 让v-model拥有更强大的功能
-
语法:
-
v-model.修饰符="vue数据变量"
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在change时触发而非inupt时
-
vue指令 v-text和v-html
目的: 更新DOM对象的innerText/innerHTML
-
语法:
- v-text="vue数据变量"
- v-html="vue数据变量"
-
注意: 会覆盖插值表达式
总结: v-text把值当成普通字符串显示, v-html把值当做html解析
vue指令 v-show和v-if
目标: 控制标签的隐藏或出现
-
语法:
- v-show="vue变量"
- v-if="vue变量"
-
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除
-
高级
- v-else使用
<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>
vue指令-v-for
目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成
-
语法
- v-for="(值, 索引) in 目标结构"
- v-for="值 in 目标结构"
-
目标结构:
- 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
-
注意:
v-for的临时变量名不能用到v-for范围外
vue基础 v-for更新监测
- 数组变更方法, 就会导致v-for更新, 页面更新
- 数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或
this.$set()
updateBtn(){
// 3. 更新某个值的时候, v-for是监测不到的
// this.arr[0] = 1000;
// 解决-this.$set()
// 参数1: 更新目标结构
// 参数2: 更新位置
// 参数3: 更新值
this.$set(this.arr, 0, 1000)
}
vue基础_虚拟dom
vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上
内存中生成一样的虚拟DOM结构(==本质是个JS对象==)
因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了
比如template里标签结构
vue数据更新
- 生成新的虚拟DOM结构
- 和旧的虚拟DOM结构对比
- 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁
==好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)==
==好处2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)==
总结: 虚拟DOM保存在内存中, 只记录dom关键信息, 提高DOM更新的性能
vue基础_key的作用
无key - 就地更新
v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示
v-for什么时候会更新页面呢?
- 数组采用更新方法, 才导致v-for更新页面
vue是如何提高更新性能的?
- 采用虚拟DOM+key提高更新性能
虚拟DOM是什么?
- 本质是保存dom关键信息的JS对象
如何比较新旧虚拟DOM?
- 根元素改变 – 删除当前DOM树重新建
- 根元素未变, 属性改变 – 更新属性
- 根元素未变, 子元素/内容改变
- 无key – 就地更新 / 有key – 按key比较
key 为idkey的值只能是唯一不重复的, 字符串或数值。v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attributekey来提供一个排序提示key 值为索引 还是会就地更新 比较的索引会改变
vue基础 动态class
目标: 用v-bind给标签class设置动态的值
-
语法:
- :class="{类名: 布尔值}"
<template>
<div>
<!-- 语法:
:class="{类名: 布尔值}"
使用场景: vue变量控制标签是否应该有类名
-->
<p :class="{red_str: bool}">动态class</p>
</div>
</template>
vue基础-动态style
目标: 给标签动态设置style的值
-
语法
- :style="{css属性: 值}"
<template>
<div>
<!-- 动态style语法
:style="{css属性名: 值}"
-->
<p :style="{backgroundColor: colorStr}">动态style</p>
</div>
</template>
vue过滤器
目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值 语法:
- Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) 全局过滤器
- filters: {过滤器名字: (值) => {return "返回处理后的值"} 单页面过滤器
vue过滤器-传参和多过滤器
目标: 可同时使用多个过滤器, 或者给过滤器传参
-
语法:
-
过滤器传参: vue变量 | 过滤器(实参)
-
多个过滤器: vue变量 | 过滤器1 | 过滤器2
-
<template>
<div>
<p>原来的样子: {{ msg }}</p>
<!-- 1.
给过滤器传值
语法: vue变量 | 过滤器名(值)
-->
<p>使用翻转过滤器: {{ msg | reverse('|') }}</p>
<!-- 2.
多个过滤利使用
语法: vue变量 | 过滤器1 | 过滤器2
-->
<p :title="msg | toUp | reverse('|')">鼠标长停</p>
</div>
</template>
<script>
export default {
data(){
return {
msg: 'Hello, Vue'
}
},
filters: {
toUp (val) {
return val.toUpperCase()
}
}
}
</script>
<style>
</style>
vue计算属性
vue计算属性-computed
目标: 一个数据, 依赖另外一些数据计算而来的结果
computed: {
//计算属性名当作变量使用
"计算属性名" () {
return "值"
}
}
注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同
vue计算属性-缓存
目标: 计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果
<script>
export default {
data(){
return {
msg: "Hello, Vue"
}
},
// 计算属性优势:
// 带缓存
// 计算属性对应函数执行后, 会把return值缓存起来
// 依赖项不变, 多次调用都是从缓存取值
// 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
computed: {
reverseMessage(){
console.log("计算属性执行了");
return this.msg.split("").reverse().join("")
}
},
methods: {
getMessage(){
console.log("函数执行了");
return this.msg.split("").reverse().join("")
}
}
}
</script>
计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高
vue计算属性-完整写法
目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
<template>
<div>
<span>全选:</span>
<!-- 4. v-model 关联全选 - 选中状态 -->
<input type="checkbox" v-model="isAll"/>
<button @click="btn">反选</button>
<ul>
<li v-for="(obj, index) in arr" :key="index">
<!-- 3. 对象.c - 关联 选中状态 -->
<input type="checkbox" v-model="obj.c"/>
<span>{{ obj.name }}</span>
</li>
</ul>
</div>
</template>
<script>
// 目标: 小选框 -> 全选
// 1. 标签+样式+js准备好
// 2. 把数据循环展示到页面上
export default {
data() {
return {
arr: [
{
name: "猪八戒",
c: false,
},
{
name: "孙悟空",
c: false,
},
{
name: "唐僧",
c: false,
},
{
name: "白龙马",
c: false,
},
],
};
},
methods: {
btn(){
// 8. 让数组里对象的c属性取反再赋予回去
this.arr.forEach(obj => obj.c = !obj.c)
}
},
// 5. 计算属性-isAll
computed: {
isAll: {
set(val){
// 7. 全选框 - 选中状态(true/false)
this.arr.forEach(obj => obj.c = val)
},
get(){
// 6. 统计小选框状态 -> 全选状态
// every口诀: 查找数组里"不符合"条件, 直接原地返回false
return this.arr.every(obj => obj.c === true)
}
}
}
};
</script>
vue侦听器
vue侦听器-watch
目标: 可以侦听data/computed属性值改变
语法:
watch: {
//侦听变量
"被侦听的属性名" (newVal, oldVal){
}
}
想要侦听一个属性/变量变化, 可使用侦听属性watch
vue侦听器-深度侦听和立即执行
目标: 侦听复杂类型, 或者立即执行侦听函数
watch: {
"要侦听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度侦听复杂类型内变化
handler (newVal, oldVal) {
//newVal, oldVal 因为复杂类型指向同一个地址所以这两个值一样
}
}
}
总结: immediate立即侦听, deep深度侦听, handler固定方法触发
