Vue学习
2021-09-06 15:33:17 0 举报
abababababa
作者其他创作
大纲/内容
模板语法：我认为在vue的语法中，能使用数据和表达式操作的都是模板
通过v-once指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新，但这会影响到该节点上的其它数据绑定
双胡子语法会解释为普通文本，可以通过v-html指令使其输出为html内容，但不建议使用，因为动态渲染html很容易遭xxs攻击
双胡子语法---{{}}
原因：双胡子语法无法作用在标签属性上
对于布尔属性，如属性disabled，当使用v-bind时，状态为false时，属性不会被渲染在元素中
v-bind指令
在模板语法中，是支持js表达式的（只能是单个表达式，且表达式不能访问全局变量），注意不能是语句
一些指令能够接收一个“参数”，如v-bind和v-on
动态参数（2.6.0新增）：用方括号【】括起来且里面的值是一个js表达式作为参数，非字符串类型时会触发警告，为null时会移除绑定；注意：动态参数表达式不能有空格和引号，可以用计算属性来代替复杂的表达式
指令的参数
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。如.prevent，告诉v-on指令对于触发的事件调用event.preventDefault()
修饰符
模板语法
数组的渲染：v-for = \"(元素，下标) in 数组\"
对象渲染：v-for = \"(value，name) in 数组\"
注意：这两种方式（）里的内容跟位置有关，和名字无关
列表渲染--v-for
语法结构：v-if=\"条件\"
v-if还可以与v-else以及v-else-if一起使用，但是一起使用时，中间不能穿插其他内容
注意：只有当条件为true时，才会被渲染
用key管理可复用的元素
v-if指令
v-show用法与v-if相似，但不支持<template> 元素，也不支持 v-else。
v-show指令
v-if会销毁和重建元素，而v-show只是简单的做css的隐藏处理，即通过display的值来显示和隐藏；因此相对比起来，v-if的切换开销高，而v-show则是初始化的开销高，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
两者的区别
特别注意：要避免 v-if 和 v-for 用在一起
条件渲染
只有value值为true时，类才会存在
对象可以定义在data里或者绑定一个返回对象的计算属性
类名的对象语法
类名的数组语法
数组+对象语法
类名的字符串语法
Class绑定---v-bind:class
style的对象语法
<div v-bind:style=\
style的数组语法
Style绑定---v-bind:style
Class与Style绑定
v-on指令可监听dom事件，触发时会执行对应的操作
当事件处理逻辑比较复杂时，可以把事件处理方法写在methods里，用v-on接收方法；
方法可以传参，甚至当需要访问原始的 DOM 事件，可以传入$event，注意：当无参要传时，直接在事件处理函数中传个形参e，也可获得事件对象
虽然在事件处理函数中可以调用event.preventDefault()等等一些方法来对事件做一些必要处理，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。因此可以通过事件的修饰符来对事件做对应的处理，让方法中只有纯粹的数据逻辑
使用修饰符的原因
修饰符可以串联，但非常注重顺序
click.stop---处理事件冒泡
click.prevent---处理事件捕获
click.once---处理一次性事件
点击修饰符
keyup.enter---处理按下回车
keyup.具体的ascii---来判断是按下哪个键
键盘修饰符（还有按键码修饰符）
事件修饰符
事件处理--v-on
v-model是双向数据绑定
v-model实现原理就是：v-bind:value=\"数据\" + v-on:input=“数据=$event.target.value”
其实，双向数据绑定 = 单向数据绑定 + 事件监听，v-model也一样
双向数据绑定与单向数据绑定的关系
表单输入绑定--v-model
使用原因：模板内使用表达式非常便利，但模板中放入太多的逻辑会让模板过重且难以维护，且每次刷新时，模板里的表达式都会去重新执行，如字符串的拼接；因此当表达式逻辑比较复杂且不想消耗太多性能时，应当使用计算属性；与方法相比也一样，虽然得到的结果相同，但是方法也是没有缓存的，在状态没有改变的时候刷新页面，都会去再次调用方法，而计算属性是会进行缓存的，只要状态没有改变，多次访问或刷新页面都会立即返回之前计算的结果
计算属性中每个属性都是函数，并且每个函数必带返回值
return的内容就是我们要监听的数据，当中有数据发生变化时，函数会自动执行
除了页面第一次加载是需要做执行操作，之后再数据没有改变的情况下刷新页面，是不会重新执行操作的的，因为计算属性具有缓存性
计算属性的使用
从性能上，比较好
从维护角度，就不需要去找对应的结构，只需要修改对性的计算属性函数即可
优势：
操作{{}}的显示内容
渲染列表中数组或对象
使用场景
计算属性
侦听器
都是监听return的数据
都具有缓存性
相同点
表现形式不同（写法不同）
计算属性： 一个值由多个值而来，这些值发生变化，我都要跟着改变，适合多个值影响一个值的使用场景
侦听器中：一个值可影响多个值，一个值发生变化后，可影响其他data的内容，适合一个值影响多个值的使用场景
上述两者是在vue内部中自动调用，当数据发生变化时自动调用
使用场景不同
不同点
计算属性vs侦听器
计算属性和侦听器
调用Vue的构造函数的静态方法--Vue.component(）
参数一是组件的名称，在将来结构中书写，代表组件的使用
template：书写组件的结构内容
template可以遵循vue相关语法
注意：template要求最外层是单一标签，不能存在多个相同标签
参数二是 对象{} 配置这个组件的内容，具体内容如下：
两个参数
让每个组件中都是一个独立的作用域，当组件中数据修改的时候，不会互相影响，只会在当前组件中修改数据而已（因为每次要用的时候都调用一次，形成独立的作用域）
data设置为函数的目的（面试题）
data存放组件的数据
除了 template 和 data的使用(data是一个方法，return一个对象) 不同以外，后续其他的methods、computed、watch等都是在全局中书写是一样的
全局注册
局部注册的对象设置和全局注册配置对象一样，只是当我们写完对象后，要引入到全局app中的components，注意加s
局部注册
全局注册中不管有没有使用组件，组件都已融入vue中，因为全局注册的需要调用vue的静态方法实现
局部注册只是在内存空间中开辟一个对象空间，如果不引入到app中，此时vue中是不存在对应组件的，只有引入之后，vue才会拥有组件，结构中才能去调用
组件融入vue的时间不一样
全局注册和局部注册的区别
判断怎么去分组件（开发经验来分）--- 从功能上入手来区分组件
组件的注册
组件在浏览器中显示相当于一个组件的存活的一种描述，生命周期函数就是用来描述组件活着的时机
函数
这些函数在对应阶段阶段是会自己触发的
特征：
此时无法访问data中的数据
在这个生命周期中，vue还没对data这里的数据做数据劫持的操作，所以无法再vue中访问数据，此时this中没有数据
原因
主要作用：插件初始化操作
beforeCreate() 创建前
能够访问data中的数据
作用：通常做ajax的数据请求，将数据赋值给对应的变量，做渲染操作
created() 创建后(常用)
作用：很少用
beforeMount() dom渲染前
作用：做dom操作，也可以做ajax
mounted() dom渲染后
上述四个会依次自动执行
初始化阶段
beforeUpdate()
updated()
上述两个函数当数据更新后触发的函数
数据更新阶段
在这个跟组件中表现不明显，组件的生命周期使用较多，当组件销毁的时候触发
作用：移除一些定时器或者说一些监听事件
销毁阶段
在vue分为三个阶段 八个生命周期
根组件的生命周期函数
1.同样拥有跟组件的八大生命周期
1.先触发父组件的beforeCreate() created() beforeMount()
2.接下来才触发子组件的初始化阶段的4个生命周期
3.之后才触发后续mounted的生命周期
2.但是，要注意他们的触发时机，如下：
1.先触发父组件的beforeUpdate
2.接下来触发子组件的beforeUpdate和updated
3.之后，才触发父组件的updated
3.当父子组件有数据传递时，当数据发生改变时触发的生命周期如下
特点：
组件的生命周期函数
因为v-if是会销毁组件而v-show是不会销毁组建的如果使用v-if，组件被销毁之后，又创建出来的频繁操作，会导致性能很差，其原理是初始化阶段的生命周期函数被频繁触发
问题：为什么v-show比v-if性能好的底层原理？
生命周期函数
step1 :属性 = \"数据\" 设置发送方
step2 去子组件中设置接收方 props属性
step3 接收完之后 才能使用
父向子传数据
step1 在某个时刻触发一个事件派发 this.emit(事件名称，参数)
step2 回到组件结构中，添加派发事件的监听方法，并在父组件中设置对应的事件处理函数
step3 在对应的事件处理函数中设置参数可以获取事件派发过来的参数
子向父传递数据
通过父向子和子向夫传递可以看出，vue中的数据流是单向数据流，即数据只有父组件流向子组件，并没有子流向父
总结
父子组件之间的通讯
step1 建立一个新的空间来设置监听和事件派发的操作
step2 在接收数据的组件中设置一个事件监听函数
bus.$emit(派发事件，派发的数据)
step3 在发送数据的组件中设置一个事件派发函数
派发事件名要与监听事件名一致
不是一对一
bus的整个过程，需要能够手写——口述，面试可能会问，在实际开发中用的是Vuex
注意：
非父子组件的通讯
组件通讯
作用：分发组件的结构内容
step1 在组件中设置<slot></slot>相当于挖坑
step2 回到结构中，填坑，先写
默认插槽
step1 在组件中设置<slot name=\"boy\"></slot> 相对于挖坑
具名插槽
如果是数组和对象，多个数据的话，选择props比较好，如果是字符串 number一个，直接选择一个插槽显示即可
关于插槽和props的最佳实践
插槽
有的时候，在不同组件之间进行动态切换是非常有用的，可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现
keep-alive 保持存活 通过搭配include选择存活的组件存活的组件，在下一次显示时，不会再触发对应的生命周期当设置keep-alive时，vue会多两个生命周期activated deactivatedactivated 当我们进入include设置的组件时触发deactivated 当我们离开include设置的组件时触发
keep-alive
动态组件
语法结构
节点需要编写虚拟dom
什么是虚拟dom？用js对象的形式来描述一个页面节点
再通过渲染函数render执行之后，虚拟dom变成真实的dom，因此页面看到结构
通过createElement函数创建函数式组件
通过h函数创建函数式组件
函数式组件
v-model 在组件上的使用的时候，我们需要做出一些特定的设置
1.在组件中书写v-model='变量'
2.在父组件中定义变量
3.在子组件设置props:['value']
设置上面4步即可在组件中使用v-model
具体过程如下：
1.让组件更加轻量级，没有data声明变量过程，所有数据都是props进去的
2.让数据统一管理在父组件中，方便数据的管理和共享
目的：
写组件(追求一个无状态组件)
一个组件中没有data变量声明是最完美的组件
理想
v-model在组件上的使用
组件
全局filter，哪都能用
局部filter，只能在这个组件用
filter管道过滤器
为了追求组件之间的逻辑可复用性，将这种重复的逻辑提取到mixin中，当对应的组件需要用时，引入进去即可
目的
mixin
$emit() 事件派发
$on() 事件监听
经典案例 bus
与事件相关的api
ele.price=this.ipt追加属性不可取，在vue中不能直接通过追加属性的方式去添加，新增的属性是不具备这样的响应式，即使改变了数据，视图也是没有更新的，vue的数据只有在data中声明的数据才具备响应式，当视图修改时，视图发生变化
注意
作用：将新增的属性（不在data中的数据）具备响应式能力
参数一：你要添加的对象
参数二：你要新增的对象的属性名
参数三：对象的属性值
$set()方法
作用：将具备响应式能力的属性删除
参数一：你要删除的对象
参数二：你要删除的对象的属性名
$delete方法
如何让不在data中声明的数据具有这样的响应式
与数据相关的api
vue有推荐操作dom的方案
step1 添加ref属性到你要获取的dom节点
step2 在js通过this.$refs获取到当前页面中所有的具有ref属性的dom结构
step3 为所欲为
ref属性
在vue中，dom的渲染操作是一个异步且批量的操作，dom的渲染是异步(为了保证dom的操作是批量的)，但是这里输出是同步的(导致输出的内容不是最新的dom节点)
作用：异步获取dom节点
this.$nextTick在dom渲染执行的方法，通过传入一个回调函数，在回调函数中获取最新的dom结构
this.$nextTick()
解决方案
与节点有关的api
vue必会api
提升知识
Vue学习-----如果困了就尝试把知识点讲出来，也得学会说啊！
0 条评论
回复 删除
下一页
