文章目录
一、Vue是什么?
一套用于构建用户界面的渐进式JavaScript框架
Vue开发作者历程介绍
Vue特点
1、采用组件化模式,提高代码复用率,且让代码更好维护
2、声明式编码,让编码人员无需直接操作dom,提高开发效率
3、使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点
二、Vue入门使用
1、想让vue工作,就必须创建一个Vue实例,且要传入一个配置对象
2、root容器中的代码被称为【Vue模版】
3、vue实例和容器是一一对应的
4、{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性数据
5、一旦data中的数据发生改变,页面中的数据也会发生改变
三、Vue的模版语法
插值语法
功能:用于解析标签体内容
指令语法
功能:用于解析标签(包括标签属性,标签体内容,绑定事件等)
Vue中有很多指令,且形式都是:v-???
四、Vue的数据绑定
单向数据绑定
单向绑定(v-bind)数据只能从data流向页面
双向数据绑定
双向绑定(v-model)数据不仅能从data流向页面还是从页面流向data中 但双向绑定只能用在表单类元素上(input、select等)
el和data的两种写法
el
data
MVVM模型
1、M:模型(model):对应data中的数据
2、V:视图(View)模版
3、VM:视图模型(viewModel):Vue实例对象
五、数据代理
何为数据代理
通过一个对象代理对另一个对象中的属性操作 读/写
vue中的数据代理
通过defineProperty进行数据代理
getter和setter
六、事件处理
事件修饰符
修饰符可以连着写
既阻止默认事件又阻止冒泡事件
键盘事件
七、计算属性
计算属性无法进行异步任务比如定时器
计算属性完整写法
计算属性简写方式
八、监视属性
1、通过vm对象的$watch()或watch配置来监视指定的属性
2、当属性发生变化时,回调函数自动调用,在函数内部进行计算
属性监视,方式一
属性监视,方式二
属性监视,方式三,简写形式
深度监视
配置属性为deep
方便监视多级结构中某个属性的变化
计算属性与监视属性配置的区别
computed与watch的区别
1、computed可以完成的事情watch都能完成
2、watch可以完成的事情,computed不一定可以完成,比如进行异步操作,定时器异步函数等
重要的两个原则
1、所有被vue管理的函数,最好写成普通函数,这样this才会指向vue实例对象或组件实例对象
2、所有不被vue管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm 或组件实例对象
九、class与style绑定
1、在应用界面中,,某些元素的样式是变化的
2、class/style绑定就是专门用来实现动态样式效果的技术
十、条件渲染
条件渲染指令
v-if 和v-else
比较v-if 与 v-show
如果需要频繁的切换 v-show较好 当条件不成立时,v-if所有节点都不会被解析(项目中使用)
十一、列表渲染
列表渲染指令
v-for
列表过滤
监视器的写法
计算属性写法
列表排序
表单收集
过滤器
十二、内置指令说明
指令:
v-bind :单向绑定解析表达式,可简写为 :xxx
v-model :双向数据绑定
v-for :遍历数组/对象/字符串
v-on :绑定事件监听,可简写为@
v-if :条件渲染(动态控制节点是否存在)
v-else :条件渲染(动态控制节点是否存在)
v-show :条件渲染 (动态控制节点是否展示)
v-text指令:
1.作用:向其所在的节点中渲染文本内容
2.与插值语法的区别: v-text会替换掉节点中的内容,{{xx}}则不会