Vue笔记_01_vue核心
第一章 Vue核心
初始Vue
- 想要
Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 - root容器里的代码依然符合
html规范,，只不过混入了一些特殊的Vue语法 - root容器里的代码成为【Vue模板】
Vue实例和容器是一一对应的- 真实开发中只有一个
Vue实例，并且会配合着组件一起使用 {{xxx}}中的xxx要写JS表达式，且xxx可以自动读取到data中的所有属性- 一旦data中的数据发生改变，那么模板中用到改数据的地方也就会自动更新
注意区分：JS表达式和JS代码（语句）
- 表达式：一个表达式会产生一个值，可以放到任何一个需要值的地方
- a
- a + b
- demo(1)
- x === y ? ‘a’, ‘b’
- JS代码（语句）
if () {}for () {}
<div id='root'>
<h1>
hello, {{name}}
</h1>
</div>
new Vue({
el:'#root',
data: {
name:'w'
}
})
Vue模板语法有两大类
插值语法
功能：用于解析标签体内容
写法：{{xxx}}，xxx是JS表达式，且可以直接读取到data中的所有属性
指令语法
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件。。。）
举例：v-bind:href = 'xxx'或者简写:href = 'xxx'，同样xxx同样要写JS表达式，且可以直接读取到data中的属性
<div id="root">
<a v-bind:href="url">点我去百度</a>
</div>
new Vue({
el:'#root',
data: {
url:'https://www.baidu.com/'
}
})
备注：Vue中有很多指令，且 形式都是：v-xxx
Vue中有两种数据绑定的方式
单向绑定（v-bind）：数据只能从data流向页面
<input type="text" v-bind:value='name'>
双向绑定（v-model）：数据不仅能从data流向页面，也能从页面流向data
备注：
-
双向绑定一般用在表单类元素上，如（input，select）
-
v-model:value可以简写为v-model，因为v-model默认收集的就是value值<input type="text" v-model:value='name'> <input type="text" v-model='name'> -
当
input标签的type类型是checkbox的时候，v-model可以控制input是否勾选
el与data的两种写法
el的两种写法
-
new Vue时配置el属性
new Vue({ el:'#root', }) -
先创建Vue实例，随后再通过
vm.$mount('#root')指定el的值const vm = new Vue({ data() { return { name:'xiaolong' } } }) vm.$mount('#root')
data的两种写法
-
对象式
new Vue({ data: { name: 'xiaolong' } }) -
函数式
如何选择：目前那种方式写都可以，以后学到组件时，data必须用函数式，否则会报错
new Vue({ data() { return { name: 'xiaolong' } } })
一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是Vue实例了
MVVM模型
- M：模型（Model）：data中的数据
- V：视图（View）：模板代码
- VM：视图模型（ViewModel）：Vue实例
观察发现
- data中的所有属性，最后都出现在了vm上
- vm身上的所有属性，以及Vue原型上的所有属性，在Vue模板中都可以直接使用
数据代理
Vue中的数据代理
通过vm对象来代理data对象中属性的操作（读、写）
Vue中数据代理的好处
更加方便的操作data中的数据
基本原理
通过Object.defineProperty()把data对象中的所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个getter和setter
在getter和setter内部去操作（读，写）data中对应的属性
let number = 18
let person = {
name: 'xiaolong',
sex: '男',
}
Object.defineProperty(person, 'age', {
get() {
console.log('有人查询了age')
},
set(value) {
console.log('有人修改了age,新值是',value)
}
})
事件处理
事件的基本使用
- 使用
v-on:xxx或者@xxx绑定事件，其中xxx是事件名 - 事件的回调需要配置在methods对象中，最终会怎
vm上 - methods中配置的函数，不要用箭头函数，否则this就不是
vm了 - methods中配置的函数，都是被Vue所管理的函数，this的指向是
vm或者组件实例对象 @click="demo"和`@click="demo($event)"效果一样，只是后者可以传参
Vue中的事件修饰符
-
prevent：阻止默认事件（常用）
-
stop：阻止事件冒泡（常用）
-
once：事件只触发一次（常用）
-
capture：使用事件的捕获模式
-
self：只有
event.target是当前操作元素时才触发事件 -
passive：事件的默认行为立即执行，无需等待事件回调执行完毕
<div @click.xxx="demo"> 点击 </div>
键盘事件
Vue中常用的按键别名
- 回车=>enter
- 删除=>delete（捕获删除和退格键）
- 退出=>esc
- 空格=>space
- 换行=>tab（特殊，必须配合
keydown去使用） - 上=>up
- 下=>down
- 左=>left
- 右=>right
Vue提供别名的按键，可以使用原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰符（用法特殊）
ctrl,alt,shift,meta
- 配合
keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发 - 配合
keydown使用，正常触发事件
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码可以去定制按键别名
计算属性
- 定义：要用的属性不存在，要通过已有属性计算得来
- 原理：底层借助了
Object.defineProperty()方法提供的getter和setter - get函数什么时候执行：
- 出次读取时会执行一次
- 当依赖的数据发生裱花的时候会再次被调用
- 优势：与
methods实现相比，内部有缓存机制（复用），效率更高，调试方便 - 备注：
- 计算属性最终会出现在
vm上，直接读取使用即可 - 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算是依赖的数据发生改变
- 计算属性最终会出现在
const vm = new Vue({
el: '#root',
data() {
return {
firstName: 'xiaolong',
lastName: 'Qin'
}
},
computed: {
// 完整写法
fullName: {
get() {
return this.firstName + '-' + this.lastName;
},
set() {}
}
// 简写（没有set函数的时候）
//fullName() {
// return this.firstName + '-' + this.lastName;
//}
}
})
监视属性
监视属性watch
-
当监视的属性变化时，回调函数自动调用，进行相关操作
-
监视的属性必须存在，才能进行监视
-
监视的两种写法：
-
new Vue时传入watch配置
new Vue({ el: '#root', watch: { // 应该是'ishot'字符串 ishot: { immediate: true, // 初始化的时候让handler调用一下 // handler什么时候调用？当ishot发生变化时 handler(newValue, oldValue) { console.log('ishot被改变了', newValue, oldValue) } } } }) -
通过
vm.$watch监视const vm = new Vue({ el: '#root' }) vm.$watch('ishot', function(newValue, oldValue) { console.log('ishot被改变了', newValue, oldValue) })
-
深度监视
-
Vue中的watch默认不检测对象内部值的改变（一层）
-
配置
deep:true可以检测对象内部值的改变（多层）
备注
- Vue本身可以检测对象内部值的改变，但Vue提供的watch默认不可以
- 使用watch时根据数据的具体结构，决定时候采用深度监视
new Vue({
el: '#root',
watch: {
// 应该是'ishot'字符串
ishot: {
deep: true, // 启动深度监视
immediate: true, // 初始化的时候让handler调用一下
// handler什么时候调用？当ishot发生变化时
handler(newValue, oldValue) {
console.log('ishot被改变了', newValue, oldValu)
}
}
}
})
监视属性的简写
new Vue({
el: '#root',
watch: {
// 应该是'ishot'字符串
// 正常写法
//ishot: {
// deep: true, // 启动深度监视
// immediate: true, // 初始化的时候让handler调用一下
// // handler什么时候调用？当ishot发生变化时
// handler(newValue, oldValue) {
// console.log('ishot被改变了', newValue, oldValue)
// }
//}
// 简写形式，确定不需要deep和immediate的情况下
ishot() {
console.log('ishot被改变了', newValue, oldValue)
}
}
})
compute和watch之间的区别
- computed能完成的功能，watch也能完成
- watch能完成的功能，computed不一定能完成，例如：watch可以进行一步操作
两个重要的小原则
- 所有被Vue管理的函数，最好写成普通函数，这样this的指向才能是
vm或者组件实例对象 - 所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this才能是
vm或者组件实例对象
绑定样式
<div id="root">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br>
<!-- 绑定class样式--数组写法，适用于：样绑定的样式的个数不确定，名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div><br><br>
<!-- 绑定class样式--对象写法，适用于：样绑定的样式的个数确定，名字也确定，但是要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div><br><br>
<!-- 绑定style样式--对象写法 -->
<div class="basic" :class="styleObj">{{name}}</div><br><br>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :class="styleArr">{{name}}</div><br><br>
</div>
new Vue({
el: '#root',
data() {
return {
name: 'xiaolong',
mood: 'normal',
classArr: ['class1', 'class2', 'class3'],
classObj: {
class1: false,
class2: false,
class3: true
}
}
},
})
条件渲染
v-if
写法
v-if="表达式"v-else-if="表达式"v-else="表达式"
适用于：切换频率较低的场景
特点：不展示的DOM元素直接移除
注意：v-if可以和v-else-if，v-else一起使用，但要求结构不能被打断
v-show
写法：v-show="表达式"
适用于：切换频率较高的情景
特点：不展示DOM的元素没有被移除，仅仅是使用样式隐藏
备注：
使用v-if时，元素可能无法获取到，而使用v-show一定可以被获取到
列表渲染
v-for指令
-
用于展示列表数据
-
语法：
v-for="(item, index) in xxx" :key="yyy" -
可遍历：数组，对象，字符串（用得很少），指定次数（用得很少）
<!-- 遍历数组，item是项目，index是索引 --> <div v-for="(item, index) in Arr" :key="index"></div> <!-- 遍历对象，value是对象里的值，k是对象里面的键值 --> <div v-for="(value, k) in Arr" :key="k"></div> <!-- 遍历字符串，char是字符，index是索引 --> <div v-for="(char, index) of Str" :key="index"></div> <!-- 遍历指定次数 --> <div v-for="(number, index) of 5" ::key="index"></div>
面试题：react，Vue中的key有什么用？（key的内部原理）
- 虚拟DOM中key的作用：
- key是虚拟DOM对象的标识，当状态中的数据发生改变时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异进行比较，比较规则如下：
- 比较规则：
- 旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中的内容没有变，直接使用之前的真实DOM
- 若虚拟DOM中的内容改变了，则生成新的真实的DOM，随后替换掉页面中之前的真实DOM
- 旧虚拟DOM中未找到 与新虚拟DOM相同的key
- 创建新的虚拟DOM，随后渲染到页面
- 旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 用index作为key可能引发的问题
- 若对数据进行：逆序添加，逆序删除等破坏顺序的操作：会产生没有必要的真实DOM更新==>页面效果没有问题，但是效率低
- 如果结构中还包括输入类的DOM：会产生错误的DOM==>页面有问题
- 开发中如何选择key
- 最好使用每条数据的唯一标识作为key，比如id，手机号，身份证号，学号等唯一标识
- 如果不存在对数据的逆序添加，逆序删除等破坏顺序的操作，仅用于渲染列表用于展示 ，使用index作为key是没有问题的
列表过滤
new Vue({
el: 'root',
data() {
return {
keyWord: '',
perspon: [
{id: 001, name: 'name1', age: 18},
{id: 002, name: 'name2', age: 18},
{id: 003, name: 'name3', age: 18},
{id: 004, name: 'name4', age: 18}
],
filPerson: []
}
},
watch: {
// 当keyWord发生改变时调用handler
keyWord: {
// 立即调用一次
immediate: true,
// val是改变之后的值
handler(val) {
this.filPerson = this.person.filter((p)=>{
// indexOf模糊搜索，返回-1就是没有搜索到
return p.name.indexOf(val) !== -1
})
}
}
}
})
列表排序
let arr = []
arr.sort((p1, p2)=>{
return p1 - p2 // 升序
// return p2 - p1 降序
})
Vue数据监测的原理
-
Vue会监测data中所有层数的数据
-
如何监测对象中数据？
通过setter实现监测，且要在new Vue时就传入要监测的数据
- 对象中后追加的属性，Vue默认不做响应式处理
- 如需给后添加的属性做响应式，请使用如下
apiVue.set(target, propertyName/index, value)vm.$set(target, propertyName/index, value)
-
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
- 调用原生对应的方法对数组进行更新
- 重新解析模板，进而更新页面
-
在Vue修改数组中的某个元素一定要加如下方法：
-
push(), pop(), shift(), unshift(), splice(), sort(), reverse() -
Vue.set(), vm.$set特别注意：
Vue.set(), vm.$set()不能给vm或者vm的根数据对象添加属性
-
收集表单数据
若：<input type="text">，则v-model收集的是value值，用户输入的就是value值
若：<input type="radio">，则v-model手机的是value值，且要给标签配置value值
若：<input type="checkbox" name="" id="">
1. 没有配置value，那么收到的就是checked（勾选或者没有勾选，是一个布尔值）
2. 配置了value
1. v-model的初始值是非数组，那么收到的就是checked（勾选或者没有勾选，是一个布尔值）
2. v-model的初始值是数组，那么收到的就是value组成的数组
3. 备注：v-model的三个修饰符：
1. lazy：失去焦点再收集数据
2. number：输入字符串转为有效数字
3. trim：输入首尾空格过滤
过滤器
定义
对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法
-
注册过滤器
Vue.filter(name, callback)或者new Vue({filter: {}}) -
使用过滤器
{{xxx | 过滤器名}} 或者 v-bind:属性 = "xxx | 过滤器名"
备注：
- 过滤器也可以接受额外参数，多个过滤器也可以串联
- 并没有改变原来的数据，是产生新的对应的数据
<h3 :x = "msg | mySlice"></h3>
Vue.filter('mySplice', function (value) {
return value.slice(0)
})
内置指令
我们学过的指令
v-bind
v-model
v-for
v-on
v-if
v-else
v-show
v-text指令
- 作用：向其所在的节点中渲染文本内容
- 与插值语法的区别：
v-text会替换节点中的内容，插值语法不会
v-html指令
- 作用：想指定节点中渲染包含html结构中的内容
- 与插值语法的区别
- v-html会替换节点中的内容，插值语法不会
- v-html可以识别html结构
- 严重注意：v-html有安全问题
- 在网站上动态渲染任意html是非常危险的，容易导致xss攻击
- 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上
v-cloak指令（没有值）
-
本身是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
-
使用css配合v-cloak可以解决网速慢时页面展示出
{{xxx}}的问题<div> <h2 v-cloak> {{name}} </h2> </div>[v-cloak] { // 属性选择器 display: none; }
v-once指令
- v-once所在的节点在初次动态渲染之后，就视为静态内容了
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre指令
- 跳过其所在节点的编译过程
- 可利用它跳过：没用使用指令语法，没有使用插值语法的节点，会加快编译
自定义指令
需求：
- 定义一个v-big指令，和v-text功能类似，但是会把绑定的数据放大10倍
- 定义一个v-fbind指令，和v-bind指令功能相似，但可以让其所绑定的input元素默认获取焦点
自定义指令总结
-
定义语法：
-
局部定义
new Vue({ directives: {指令名:配置对象} }) // 或者 new Vue({ directives() {} }) -
全局定义
Vue.directive(指令名, 配置对象) // 或者 Vue.directive(指令名， 回调函数)
-
-
配置对象中常用的3个回调
- bind：指令与元素成功绑定时调用
- inserted：指令所在元素被插入页面时调用
- update：指令所在模板结构被重新解析时调用
-
备注：
- 指令定义的时候不用加v-，但是使用 的时候要加
- 指令名如果是多个单词，要使用kebab-case命名的方式，不要使用camelCase命名方式
new Vue({
directives: {
// big函数什么时候会被调用？
// 1.指令与元素成功绑定的时候（一上来）
// 2.指令所在的结构被重新解析的时候
big(element, binding) {
element.innerHTML = binding.value * 10
},
fbind: {
// 指令与元素成功绑定时
bind(element, binding) {
element.value = binding.value
},
// 指令所在元素被插入到页面的时候
inserted(element, binding) {
element.focus()
},
// 指令所在的模板被重新解析的时候
update(element, binding) {
element.value = binding.v
}
}
}
})
生命周期
生命周期
- 又名：生命周期回调函数，生命周期函数，生命周期钩子
- 是什么：Vue在关键时候帮我们调用的一些特殊的名称的函数
- 生命周期函数的名字不可以修改，但是函数的具体内容是程序员根据需求编写的
- 生命周期函数的
this指向的是vm或者组件实例对象
常用的生命周期钩子
mounted：发送ajax请求，启动定时器，绑定自定义事件，订阅信息等（初始化操作）beforeDestory：清除定时器，解绑自定义事件，取消订阅信息等（收尾工作）
关于销毁Vue实例
- 销毁后借助Vue开发工具看不到任何信息
- 销毁后自定义事件会失效，但原生DOM事件依旧生效
- 一般不会在
beforeDestory操作数据，因为即使操作数据，也不会再触发更新流程了
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
