目录
vue简介:
一套用于构建用户界面的渐进式JavaScript框架
特点:
1、采用组件化模式,提高代码复用率,让代码更好维护
2、声明式编码,让编码人员无3、需直接操作DOM,提高开发效率
3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
遵循MVVM模式
编码简洁,体积小,运行效率高,适合移动/pc端开发
本身只关注UI,也可以引入其他第三方库开发项目
vue安装:
提取码:1111
1、初识vue:
1、想让vue工作,必须先创建一个vue实例,且要传入一个配置对象
2、root容器里的代码依然符合HTML规范,只不过混入一些特殊的vue语法( 双括号{{ }} );
3、root容器里的代码被称为【vue模板】;
4、vue实例和组件是一一对应的;
5、真实开发中只有一个vue实例,并且会配合着组件一起使用;
6、{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
7、一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
注意区分:js表达式 和 js代码(语句)
1、表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
- a
- a+b
- demo(1)
- x===y ?'a' : 'b'
2、js代码(语句):
- if(){}
- for(){}
2、vue模板语法:
1、插值语法:
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
2、指令语法:
功能:用于解析标签(包括:标签属性,标签体内容,绑定事件等等)。
举例:v-bind:href=“xxx” 或 简写为 :href:“xxx”,xxx同样要写js表达式,且可以直接读取到data中所有的属性。
vue中有很多指令,且形式都是v-???,vue实例中出现重名时可进行分级处理
3、vue数据绑定:
vue中有两种数据绑定方式
1、单向绑定(v-bind):数据只能从data流向页面
2、双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
备注:
1、双向绑定一般都应用在表单元素上(如:input、select等)
2、v-model:value可以简写成v-model,v-model默认收集的就是value值
4、el和data的两种写法:
1、el的两种写法:
- new Vue时候配置el属性
- 先创建vue实例,随后再通过v.$mount('#root')指定el的值
2、data的两种写法:
- 对象式
- 函数式
如何选择:用到组件时,data必须使用函数式,否则会报错。
3、原则:
由vue管理的函数,一定不要写箭头函数,一但写了箭头函数,this所指的就不再是vue实例而是window
5、MVVM模型
1、M:模型(MObel):data中的数据
2、V:视图(view):模板代码
3、VM:视图模型(viewMobel):vue实例
发现:
1、data中的所有属性,最后都出现在了vm身上
2、vm身上所有的属性及vue原型上所有的属性,在vue模板中都可以直接使用
6、数据代理
1、vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2、vue中数据代理的好处:
更加方便的操作data中的数据
3、基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个提娜佳到vm上的属性,都指定一个getter和setter。
在getter和setter内部去操作(读/写)data中对应的属性
7、事件处理:
7.1 事件的基本使用:
1、使用v-on:xxx 或@xxx绑定事件,其中xxx是事件名
2、事件的回调需要配置在methods对象中,最终会在vm中
3、methods中配置的函数,不要用箭头函数,否则this就不是vm了
4、methods中配置的函数,都是被vue所管理的函数,this的指向是vm 或 组件实例对象
5、@click='demo' 和 @click="demo($event)"效果一致,但后者可以传参
7.2 vue中常用的事件修饰符:<修饰符可以连用>
1、prevent:阻止默认事件
2、stop:阻止事件冒泡
3、once:事件只触发一次
4、capture:使用事件的捕获模式
5、self:只有event、target是当前操作的元素时才触发事件
6、passive:事件的默认行为立即执行,无需等待回调执行完毕
7.3 键盘事件:
1、vue中常用的按键别名:
回车:enter
删除:delete(捕获删除和退格键)
推出:esc
空格:space
换行:tab(特殊,必须配合keydown使用)
上:up
下:down
左:left
右:right
2、vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
3、系统修饰符(用法特殊):ctrl、alt、shift、meta
(1)配合keyup使用:按下修饰符的同时,再按下其他键,随后释放其他键,事件才触发
(2)配合keydown使用:正常触发事件
4、也可以使用keyCode去指定具体的按键(不推荐)
5、vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
8、计算属性computed:
1、定义:要用的属性不存在,要通过已有属性计算得来
2、原理:底层接住了Object.defindproperty方法提供的getter和setter
3、get函数什么时候执行:
(1)初次读取时会执行一次
(2)当依赖的数据发生改变时会被再次调用
4、优势:与methods实现相比,内部有缓存机制,效率更高,调试方便
5、备注:
1.计算属性最终会出现在vm上,直接读取使用即可
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化
8.1 姓名案例:
8.1.1 以计算属性实现:
当只有读取要求时可简写:
8.1.2 以methods的形式实现:
8.1.3 以插值语法的方式实现:
9、监视属性watch(侦听函数):
1、当被监视的属性变化时,回调函数自动调用,进行相关操作
2、监视的属性必须存在,才能进行监视
3、监视的两种写法:
(1)new Vue 时传入watch配置
(2)通过vm.$watch监视
9.1 深度监视:
1、vue中的watch默认不监视对象内部值的改变(一层)
2、配置deep:true可以监视对象内部值的改变(多层)
备注:
1、vue自身可以监测对象内部值的改变,但vue提供的watch默认不可以
2、使用watch时根据数据的具体结构,决定是否采用深度监视
9.2简写
当无需immediate 和 deep时可简写
vm.$形式简写:
9.3 watch与computed的对比:
computed和watch之间的区别:
1、computed能完成的功能,watch都能完成
2、watch能完成的功能,computed不一定能完成,例如watch可以进行异步操作
两个重要小原则:
1、所被vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象
2、所有不被vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数
这样this的指向才是vm或组件实例对象
10、绑定样式
10.1 class样式
写法:class='xxx' xxx可以是字符串、对象、数组
字符串写法适用于:类名不确定,需要动态获取
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
10. 2 style样式(不常用)
:style="{fontSize:xxx}"其中xxx是动态值
:style="[a,b]"其中a、b是样式对象
11、条件渲染
11.1 v-if
写法:
(1)v-if='表达式'
(2)v-else-if='表达式'
(3)v-else='表达式'
适用于:切换频率较低的场景
特点:不展示DOM元素直接被移除
注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被打断
template:内容模板,将内容包裹起来,与div作用相似,但自身在加载过程中不会被渲染(此处只可和v-if使用)
11.2 v-show
写法:v-show="表达式"
适用于:切换频率较高的场景
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
3.备注:使用v-if时,元素可能无法获取到,而是用v-show一定可以获取到
12、列表渲染
12.1.1 基本列表:
v-for指令:
1、用于展示列表数据
2、语法:v-for='(item,index) in(of) xxx' :key='yyy(index)' key值唯一
3、可遍历:数组、对象、字符串(使用较少)、指定次数(使用较少)
*12.1.2 key的基本原理
面试题:react、vue中的key有什么作用?(key的内部原理)
1、虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当状态中的数据发生变化时,vue会根据【新数据】生成【新的虚拟DOM】,
随后vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较,比较规则如下:
2、对比规则:
(1)旧虚拟DOM中找到了与新虚拟DOM相同的key:
<1>若虚拟DOM中的内容未变,直接使用之前的真实DOM
<2>若虚拟DOM中的内容改变,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
(2)旧虚拟DOM中未找到与新虚拟DOM相同的key:
创建新的真实DOM,随后渲染到页面
3、用index作为key可能会引发的问题:
(1)若对数据进行:逆序添加、逆序删除等破坏顺序的操作
会产生没有必要的真实DOM更新 ==> 界面效果无误,但效率低
(2)如果结构中还包括输入类的DOM:
会产生错误DOM的更新导致界面出现问题
4、开发中如何选择使用key?
1、最好使用每条数据的唯一标识作为key
2、如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作,仅用于渲染列表用于展示
可以使用index作为key。
13、vue监视数据的原理:
1.vue会监视data中的所有层次的数据
2.如何监测对象中的数据?
通过setter实现监视,且要在new vue时就传入要监测的数据
(1)对象中后追加的属性,vue默认不做响应式处理
(2)如需要后添加的属性做响应式,请使用如下API:
Vue.set(target.propertyName/index, value)或
vm.$set(target.propertyName/index, value)
3.如何监测数组中的数据?
通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1)调用原生对应的方法对数组进行更新
(2).重新解析模板,进而更新页面
4.在vue修改数组中的某一个元素要用如下方法:
1.使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),reverse()
2.Vue.set() 或 vm.$set()
特别注意Vue.set() 或 vm.$set() 不能给vm或vm的根数据对象添加属性
14、收集表单数据
若:input type='text',则v-model收集的是value值,用户输入的就是value值
若:input type='radio',则v-model收集的是value值,且要给标签配置value值
若:input type='checkbox'
1、没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
2、配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2)v-model的初始值是数组,那么收集的就是value组成的数组
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效数字
trim:输入首尾空格过渡