Vue核心（阶段性总结）_热点关注

Vue核心（阶段性总结）

迪丽瓦拉

2025-05-28 10:33:23

0次

监听属性和计算属性区别
条件渲染v-if/v-show
列表渲染v-for
收集表单数据
过滤器
自定义指令
生命周期

Vue核心
1.1. Vue简介
1.1.1. 官网
1.1.2. 介绍与描述
1.1.3. Vue的特点
1.1.4.与其他JS框架的关联
1.1.5. Vue周边库
1.2. 初识Vue
example



初识vue

Hello！{{name}}!

1.3. 模板语法
Vue模板语法包括两大类：
插值语法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域
指令语法：Vue中有很多的指令，v-bind,v-model,v-pre,v-html,v-text
1.4. 数据绑定
Vue中有2种数据绑定的方式：
单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。表单类元素上（如：< input>、< select>、< textarea>等）
1.5. el与data的两种写法
el有2种写法：
创建Vue实例对象的时候配置el属性
先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
data有2种写法：



el与data的两种写法

Hello,{{name}}!

对象式
函数式
1.6. MVVM模型
MVC模型
1.7. Vue中的数据代理（重要概念）
在这里插入图片描述

1.8. 事件处理
使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，==不要用箭头函数！==否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click="demo和@click="demo($event)"效果一致，但后者可以传参



事件的基本用法

hello,{{name}}

1.8.1. 事件的基本用法
总结：
使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，==不要用箭头函数！==否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click="demo和@click="demo($event)"效果一致，但后者可以传参



事件的基本用法

hello,{{name}}

1.8.2. 事件修饰符
Vue中的事件修饰符：
prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕


事件修饰符欢迎来到{{name}}学习
点我提示信息
div1div2
1
2
3
4

1.8.3. 键盘事件
Vue中常用的按键别名：

回车：enter
删除：delete (捕获“删除”和“退格”键)
退出：esc
空格：space
换行：tab (特殊，必须配合keydown去使用)
上：up
下：down
左：left
右：right
注意：
系统修饰键（用法特殊）：ctrl、alt、shift、meta
配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件
可以使用keyCode去指定具体的按键，比如：@keydown.13=“showInfo”，但不推荐这样使用
Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名


键盘事件欢迎来到{{name}}学习

1.9. 计算属性
计算属性：
定义：要用的属性不存在，需要通过已有属性计算得来。
原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。
get函数什么时候执行？
初次读取时会执行一次
当依赖的数据发生改变时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便



计算属性

姓：

名：

姓名：{{fullName}}

1.10. 监视属性
1.10.1. 监视属性基本用法
监视属性watch：
当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视
监视有两种写法：
创建Vue时传入watch配置
通过vm.$watch监视



监视属性

今天天气好{{info}}!

1.10.2. 深度监视
深度监视：
Vue中的watch默认不监测对象内部值的改变（一层）
在watch中配置deep:true可以监测对象内部值的改变（多层）



深度监视

a的值是:{{numbers.a}}
b的值是:{{numbers.b}}

1.10.3. 监视属性简写

1.10.4. 监听属性 VS 计算属性
computed和watch之间的区别：
computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

new Vue({el:'#root', data:{ firstName:'张',lastName:'三'},computed:{fullName(){return this.firstName + '-' + this.lastName}}
})

new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(val){setTimeout(()=>{this.fullName = val + '-' + this.lastName},1000);},lastName(val){this.fullName = this.firstName + '-' + val}}
})

1.11. 绑定样式
1class样式：
写法：class=“xxx”，xxx可以是字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

2style样式：
:style="{fontSize: xxx}“其中xxx是动态值
:style=”[a,b]"其中a、b是样式对象

{{name}}
 

{{name}}
 

{{name}}
 

{{name}}
 

{{name}}

1.12. 条件渲染
v-if：
写法：
v-if=“表达式”
v-else-if=“表达式”
v-else
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
v-show：
写法：v-show=“表达式”
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉


条件渲染当前的n值是:{{n}}
Hello,{{name}}!
Angular
React
Vue

1.13. 列表渲染
1.13.1. 基本列表
v-for指令：
用于展示列表数据
语法：

，其中key可以是index，也可以是遍历对象的唯一标识
可遍历：数组、对象、字符串（用的少）、指定次数（用的少）


基本列表人员列表（遍历数组）
{{p.name}}-{{p.age}}
汽车信息（遍历对象）
{{k}}-{{value}}
遍历字符串
{{char}}-{{index}}
遍历指定次数
{{index}}-{{number}}

1.13.2. key的作用与原理(重难点)


key的原理人员列表
{{p.name}} - {{p.age}}

1.13.3. 列表过滤（重难点）


列表过滤人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

1.13.4. 列表排序（重难点）

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

1.13.5. Vue数据监视
Vue监视数据的原理：
vue会监视data中所有层次的数据
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据
对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API：
Vue.set(target,propertyName/index,value)
vm.set(target,propertyName/index,value)如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：调用原生对应的方法对数组进行更新重新解析模板，进而更新页面在Vue修改数组中的某个元素一定要用如下方法：使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()Vue.set()或vm.set(target,propertyName/index,value) 如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：调用原生对应的方法对数组进行更新重新解析模板，进而更新页面在Vue修改数组中的某个元素一定要用如下方法：使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse() Vue.set() 或 vm.set(target,propertyName/index,value)如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：调用原生对应的方法对数组进行更新重新解析模板，进而更新页面在Vue修改数组中的某个元素一定要用如下方法：使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()Vue.set()或vm.set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（data等）添加属性


Vue数据监视学生信息

 
 

 

 
姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}
爱好：
{{h}}
朋友们：
{{f.name}}--{{f.age}}

1.14. 收集表单数据
收集表单数据：
若：< input type=“text”/>，则v-model收集的是value值，用户输入的内容就是value值
若：，则v-model收集的是value值，且要给标签配置value属性
若：< input type=“checkbox”/>
没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）
配置了value属性：
v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的就是value组成的数组
v-model的三个修饰符：

lazy：失去焦点后再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

收集表单数据账号：密码：年龄：性别：男女爱好：学习打游戏吃饭所属校区：其他信息：阅读并接受《用户协议》

1.15. 过滤器(难点)
过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
过滤器可以接收额外参数，多个过滤器也可以串联
并没有改变原本的数据，而是产生新的对应的数据

过滤器时间当前时间戳：{{time}} 转换后时间：{{time | timeFormater()}} 转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}} 截取年月日：{{time | timeFormater() | mySlice}}

1.16. 内置指令

1.16.1. v-text指令
之前学过的指令：
v-bind：单向绑定解析表达式，可简写为:
v-model：双向数据绑定
v-for：遍历数组 / 对象 / 字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存存在）
v-else：条件渲染（动态控制节点是否存存在）
v-show：条件渲染 (动态控制节点是否展示)
v-text指令：
作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-text指令你好，{{name}}

1.16.2. v-html指令
v-html指令：
作用：向指定节点中渲染包含html结构的内容
与插值语法的区别
v-html会替换掉节点中所有的内容，{{xx}}则不会
v-html可以识别html结构
严重注意：v-html有安全性问题！！！
在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上

v-html指令Hello，{{name}}

1.16.3. v-cloak指令
v-cloak指令（没有值）：
本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-cloak指令{{name}}

1.16.4. v-once指令
v-once指令：
v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-once指令n初始化的值是：{{n}} n现在的值是：{{n}}

1.16.5. v-pre指令
v-pre指令：
跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

v-pre指令Vue其实很简单当前的n值是:{{n}}

1.17. 自定义指令(重要)
自定义指令定义语法：
局部指令：
new Vue({
directives:{指令名:配置对象}
})

new Vue({
directives:{指令名:回调函数}
})

全局指令：
Vue.directive(指令名,配置对象)
Vue.directive(指令名,回调函数)
例如：
Vue.directive(‘fbind’,{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})

配置对象中常用的3个回调函数：
bind(element,binding)：指令与元素成功绑定时调用
inserted(element,binding)：指令所在元素被插入页面时调用
update(element,binding)：指令所在模板结构被重新解析时调用
备注：
指令定义时不加“v-”，但使用时要加“v-”
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

new Vue({
el:‘#root’,
data:{
n:1
},
directives:{
‘big-number’(element,binding){
element.innerText = binding.value * 10
}
}
})

自定义指令当前的n值是：放大10倍后的n值是：

1.18. Vue生命周期（重要）
1.18.1. 引出生命周期

1.18.2. 分析生命周期

1.18.3. 总结生命周期

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：Gateway 网关

下一篇：Atlas数据治理

Vue核心（阶段性总结）

Hello！{{name}}!

Hello,{{name}}!

hello,{{name}}

hello,{{name}}

欢迎来到{{name}}学习

欢迎来到{{name}}学习

今天天气好{{info}}!

a的值是:{{numbers.a}}

b的值是:{{numbers.b}}

当前的n值是:{{n}}

Hello,{{name}}!

人员列表（遍历数组）

汽车信息（遍历对象）

遍历字符串

遍历指定次数

人员列表

人员列表

人员列表

学生信息

姓名：{{student.name}}

年龄：{{student.age}}

性别：{{student.sex}}

爱好：

朋友们：

时间

当前时间戳：{{time}}

转换后时间：{{time | timeFormater()}}

转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}

截取年月日：{{time | timeFormater() | mySlice}}

{{name}}

n初始化的值是：{{n}}

n现在的值是：{{n}}

Vue其实很简单

当前的n值是:{{n}}

当前的n值是：

放大10倍后的n值是：

相关内容

热门资讯