博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
VUE基础总结
阅读量:6605 次
发布时间:2019-06-24

本文共 2353 字,大约阅读时间需要 7 分钟。

3-1 

MVP模式

MVVM模式

组件化开发:把页面拆分成不同的区域,每一个区域就是一个组件,分组件开发可以把一个页面的布局和逻辑进行拆分,利于维护

3-2 选项:Dom

el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。

template:一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。

3-3 Vue的模板语法

X值表达式 {

{}}

v-text  ='a'  el.innerText = a

v-html ='b'  el.innerHtml = b 

这三个语法中都可以写JS表达式

3-4 计算属性,方法与侦听器

computed 具有缓存的概念 ,只有依赖的值发生了改变才会重新计算

methods 可以在模板语法表达式中 直接调用来获取数据

watch    与computed都具有缓存的机制,但需要将所有变化的数据都进行监听,优先使用computed,性能更好

3-5 计算属性的 getter 和 setter

3-6 Vue中的样式绑定

在dom上动态绑定class 或者style,然后在data中声明class或者 style的值 ,值可以通过数组和对象的方式进行绑定

3-7 Vue中的条件渲染

v-if     dom节点是否被移除  v-else 、v-else-if需要配合 v-if一起用 

v-show  页面元素消失时 display = none   频繁切换时 性能更好  不会把dom节点去除

给一个元素标签加入key值,vue通过diff算法发现key值不同时,不会去复用这个元素

3-8 Vue中的列表渲染

v-for循环时  key值最好唯一

遍历数组

1 Vue中 操作数组的7个变异方法可以使得数据改变 视图响应 

pop、 push 、shift、 unshift 、sort、 reverse、 splice

2 也可以让数组对应的数据data指向一个新的引用地址

template模板占位符 ,可以用于包裹循环的dom,但是template不会出现在dom结构中

遍历对象

 也可以让对象对应的数据data指向一个新的引用地址

3-9 Vue中的set方法

改变数组或者对象数据  页面随之改变的方法

对象

Vue.set(obj,key,value)    实例上  vm.$set(obj,key,value)

数组

Vue.set(arr,index,value) 实例  vm.$set(arr,index,value)

4-1 使用组件的细节点

is     用于标签上出现BUG的情况,将当前标签元素替换为组件

ref  

在html标签上  获取的是该dom节点

在组件上  获取到子组件的引用

4-2 父子组件间的数据传递

Vue中采用的是单向数据流,子组件不能直接改变父组件传下来的数据,这样会影响别的子组件引用这个数据,必须克隆一份,修改克隆以后的数据

父组件通过props给子组件传值,子组件通过$emit给父组件传递事件和参数

4-3 组件参数校验与非 props 特性

校验字符串:

校验数字或字符串 :

校验多种条件 :

自定义校验器:

4-4 给组件绑定原生事件

可以给HTML标签直接绑定原生事件,在组件上绑定的事件是自定义事件,如果需要直接给组件绑定原生事件,需要在事件后加上native修饰符

4-5 非父子组件间的传值

1 VUEX

2 总线机制/发布订阅模式/Bus/观察者模式

4-6 在Vue中使用插槽

子组件里面声明插槽 ,父组件传递插槽内容 

4-7 作用域插槽

当子组件作循环时,它的dom结构应该由外部传进来决定时

4-8 动态组件与 v-once 指令

v-once 在第一次创建组件以后可以将组件缓存到内存中 , 当切换到别的组件再切换回来时不需要重新创建这个组件,当静态组件切换显示隐藏时可以使用,这样可以提升性能

5-1 Vue动画 - Vue中CSS动画原理

显示时的动画周期

隐藏时的动画周期

5-2 在Vue中使用 animate.css 库

5-3 在Vue中同时使用过渡和动画

在transition上加上  appear-active-class=‘animated swing’自定义类名  并且写上appear属性来调用,type 属性决定 动画和过渡时间效果时间以过渡为主, :duaration自定义 过渡时间

5-4 Vue中的 Js 动画与 Velocity.js 的结合

在transition标签上 自定义事件

 @before-enter  动画开始前 @enter 动画开始后  处理函数 function(el,done)  最后需要调用done()才能进入 after-enter事件  @after-enter  动画结束后

Velocity.js JS动画 

下载velocity.js   可以配置动画效果  持续时间 以及结束后的done回调

5-5 Vue中多个元素或组件的过渡

需要给transition中包裹的元素 加上不同的key ,因为vue中元素显示切换时默认缓存

组件进行切换时可以使用动态组件component 通过:is=‘type’ type值为子组件的name

5-6 Vue中的列表过渡

用 transition-group 包裹需要循环的列表元素   循环时的key最好不要用index,用数据中唯一的id更好

5-7 Vue中的动画封装

转载于:https://juejin.im/post/5bd7cb8a5188256beb775ea3

你可能感兴趣的文章
部署国内YUM源
查看>>
nginx 报错
查看>>
负载均衡七层 Haproxy
查看>>
大数据下基于Tensorflow框架的深度学习示例教程
查看>>
Linux性能测试top衍生命令atop/htop/slaptop
查看>>
Nginx配置文件详细说明
查看>>
写给iOS程序员的命令行使用秘籍
查看>>
数据加密解密初探
查看>>
DAVINCI DM365-DM368开发攻略——开发环境搭建(DVSDK4.02)
查看>>
我的友情链接
查看>>
jSearch 上码云推荐啦(@红薯 大大亲推)!!!
查看>>
Laravel学习笔记
查看>>
×××的老板,苦逼的程序员
查看>>
python虚拟环境virtualenv下安装MySQL-python
查看>>
OpenStack安装部署
查看>>
ELK部署实战
查看>>
android面试题
查看>>
【原】nginx均衡多tomcat环境配置,及这种环境下的remoteIp及ServerName获取方式
查看>>
chosen.jquery.min.js 使用js手动更新选项
查看>>
spring mvc 视频资料
查看>>