一些vue的基本操作
程序员文章站
2022-07-13 11:53:24
...
MVVM
Vue中是如何体现MVVM
参考:https://cn.vuejs.org/v2/guide/instance.html
指令
作用:取代dom操作
{{}}
v-text & v-html
v-on 事件修饰符 @keyup.13="处理函数"
v-bind 绑定 缩写 v-bind: 缩写成 `:`
v-model 双向绑定 将来用在表单操作中
v-if & v-show https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
v-for
(item,index) in 数组 :key="唯一的"
过渡和动画
前提
1、我们被动画的元素(div,p,span),一定要包裹在Vue给我们提供的一个标签内(transition)
2、我们被动画的元素,只有在下列情况下,才会有过渡效果
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
通用的特点
1、动画整体分进入和离开两个阶段
根据它定义好的类名,来自己写过渡
注意:
Vue在动画进入或是离开的时候,给我们分别提供了
三个它实现定义好的类名给我们用,我们就可以通过
它提供好的类型,来写我们自己的样式
在Vue中使用有名的第三方动画库 animate
参考:
https://daneden.github.io/animate.css/
1、导入animate
2、在被动画的元素上,我们通过自定义类名,来使用animate.css
提供好的类名(animated fadeInRight)
3、我们的行内元素在使用一个类名的时候fadeInRight可能会有问题,把它变成块级元素
JavaScript 钩子(函数) 来实现动画
1、我们在transtion上面,注册我们进入或是离开时候的事件
2、在methonds中写好对应的处理函数
3、在beforeEnter中,写进入开始的状态【以进入为例】
4、在enter中,写进入阶段的持续时间【以进入为例】
5、在afterEnter中,写进入结束的状态【以进入为例】
注意点:
1、我们的进入结束状态,可以写在afterEnter中,也可以写在
enter中,如果我们后面要考虑使用第三方的动画库,来替代我们自己手写,这个时候,建议把结束状态放在enter中来写
2、我们自己手写js代码来实现动画,必须在进入阶段,刷新动画帧
Velocity.js来操作动画
参考:http://velocityjs.org/
1、导入velocityjs
2、在enter,leave中使用velocityjs,会大大简化
我们js代码的书写
工作中如何抉择?
1、如果自己写css代码,建议能使用Animate.css就是用它
实在没有提供再自己写
2、如果自己写js代码,建议能使用velocityjs,就先使用它
如果实在不能满足,再自己写
computed & watch
参考:https://cn.vuejs.org/v2/guide/computed.html
计算属性:
当我们需要计算某些值的时候,我们就可以使用它
特点:
1、他本质是一个函数
2、它必须要有返回值
3、计算属性相比于普通的方法来说,是有缓存的
4、计算函数中所以来的模型值,发生变化了,它会重新计算
https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95
侦听器:
需要监听某个值的变化的时候,就可以使用它
watch:{
模型的属性:处理函数(新值,旧值)
}
watch 和 data同级
组件【重要】
组件的作用:
最重要的作用就是复用
全局组件的写法:
前四种:【学会之后,能看懂Vue的文档】
1、先定义,再注册,最后使用
2、定义注册一步到位,最后使用
3、对组件定义的优化1,对template写法的优化1
4、对组件定义的优化2,对template写法的优化1
第五种:
单文件组件
注意点:
1、组件要想被使用,必须得注册
2、组件的template必须有且只有唯一一个根元素
3、组件中的data必须是一个函数,并且该函数要返回一个字面量对象
上一篇: 关于jQuery的一些操作
下一篇: 列表的一些基本操作