Vue数据绑定的过程
- 先将未绑定数据的界面展示给用户 view
- 根据模型中的数据和控制的区域生成绑定数据后的html代码 view model
- 最后再将绑定数据之后的html渲染到界面
v-cloak
是html在绑定数据后再显示
使用 v-cloak 时，需要加上样式 [v-cloak] { display: none }
自定义指令
全局指令 directive 在任何实例控制区域可用
<div>
<p v-color>我是红色</p>
<p v-color="'blue'">我是蓝色 自己传参</p>
<p v-color="curColor">我是绿色 data传参</p>
<input v-focus></input>
</div>
// directive 方法
// 1.指令名称 2.对象
// 指令生命周期 bind 指令被绑定到元素上执行, inserted 绑定指令元素加入到父元素执行
Vue.directive("color",{
// obj 为参数
bind:function(el,obj){
// el.style.color = "red"
el.style.color = obj.value
}
})
Vue.directive("focus",{
inserted:function(el){
el.focus()
}
})
data:{
curColor:'green'
}
局部指令: 在Vue实例中使用
new Vue({
//...
directives:{
"color":{
bind:function(el,obj){
//....
}
}
}
})
自定义过滤器
过滤器可以传递参数
format(参数1。。。)
Vue.filter ("format",function(value , 参数1。。。){} )
全局过滤器：任何实例控制区域可用
<div>{{price | formartStr}}</div>
// 通过Vue.filter()
// 两个参数: 1.过滤器名称 2.处理数据的函数
// 默认情况下处理数据函数的第一个参数就是要处理的数据
Vue.filter("formartStr",function(value){
return price + "元"
})
// 注意 1.过滤器只能在插值语法和v-bind中使用 2.过滤器可以连续使用
局部过滤器：只在自己区域使用
new Vue({
//...
filters:{
"formartStr":function(value){
return value + "元"
}
}
})
Vue动画
添加动画的步骤
- 将需要执行动画的元素放到 transition 组件中
- 当 transition 组件中的元素显示时会自动查找 .v-enter .v-enter-active .v-enter-to 类名
- 当 transition 组件中的元素隐藏时会自动查找 .v-leave .v-leave-active .v-leave-to 类名
- 我们只需要在指定类中设置状态就可以实现动画
注意：
一个transition只能对应一个元素，对多个元素无效
开始就有动画 <transition appear>，添加appear属性
多个元素执行不同的动画 <transition name="one"> ，添加name属性，
根据属性找类名 （eg: one-enter）
.v-enter{
opacity:0;
}
.v-enter-to{
opacity:1;
}
.v-enter-active{
transition:all 3s;
}
.v-leave{
opacity:0;
}
.v-leave-to{
opacity:1;
}
.v-leave-active{
transition:all 3s;
}
<transition>
<div class="box" v-show="isShow"></div>
<transition>
transition + 钩子函数实现动画
注意：
如果是通过 JS 钩子实现过渡动画，必须在动画过程中的回调函数中写上el.offsetWidth/el.offsetHeight
如果希望元素一进来就有动画，那么最好延迟一下在调用done方法
<transition appear
v-bind:css="false" // 取消寻找动画的类名
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<div v-show="isShow"></div>
</transition>
methods:{
beforeEnter(el){
// 进入动画前
el.style.opacity = "0"
},
enter(el,done){
// 动画过程中
el.offestWidth
el.style.transition = "all 3s"
// done() // 告诉系统动画执行完毕(next),执行afterEnter
setTimeout(function(){
done()
},0)
},
afterEnter(el){
// 动画结束后
el.style.opacity = "1"
}
}
通过第三方库实现动画 velovity
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
methods:{
enter(el,done){
// 使用第三方库
Velocity(el,{opacity:1,marginLeft:"500px"},3000)
done()
}
}
通过css库实现动画 (Animate.css库)
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<transition appear
enter-class=""
enter-active-class="animated bounceInRight"
enter-to-class="">
<div v-show="isShow"></div>
</transition>
列表动画
transition-group
<transition-group appear tag="ul"> // tag 将所有元素包裹在ul中
<li></li>
<li></li>
<li></li>
</transition-group>
动态组件
<component v-bind:is="组件名"></component>
使用 v-if 切换时不能保存状态，通过component切换，再 <keep-alive> 包裹下可以保存状态
组件动画
过渡动画注意点 默认情况下，进入动画和离开动画是同时执行的，如果希望做完之后再做另一个，需要指定动画模式
in-out 先进入在离开
out-in 先离开在进入
// 先出去再进入
<transition mode="out-in">
<component v-bind:is="home"></component>
</transition>
具名插槽
<div>
<cpn>
<slot slot="s1">
<div>替换内容</div>
<slot>
</cpn>
</div>
// 定义插槽
<template id="cpn">
<slot name"s1">默认内容<slot>
</template>
v-slot指令
注意点：vue 2.6之后，用v-slot替换slot
v-slot指令只能用在template标签上，可以使用#号代替v-slot
<cpn>
<template #s1>
<div>替换内容1</div>
</template>
<template #s2>
<div>替换内容2</div>
</template>
</cpn>
// 定义插槽
<template id="cpn">
<slot name"s1">默认内容1<slot>
<slot name"s2">默认内容2<slot>
</template>
作用域插槽
带数据的插槽，就是让父组件在填充子组件插槽内容是能够使用子组件的数据
子组件提供数据，父组件决定如何渲染
- 在slot中通过v-bind:数据名称 = "数据名称" 的方式暴露数据
- 在父组件中<template slot-scope="作用域名称"> 接收数据
- 在父组件的<template></template>中通过作用域名称.数据名称 使用数据
<cpn>
<template slot-scope="abc">
<div>填充内容{{abc.sname}}</div>
</template>
</cpn>
// 定义插槽
<template id="cpn">
<slot :sname="name">默认内容1<slot>
</template>
data:function(){
return{
name:"123"
}
}
v-slot 替换slot-scope
插槽不写name是，默认name为default
<cpn>
<template #s1="abc"> // v-slot:s1="abc"
<div>填充内容{{abc.sname}}</div>
</template>
</cpn>
// 定义插槽
<template id="cpn">
<slot :sname="name" name="s1">默认内容1<slot>
</template>
data:function(){
return{
name:"123"
}
}
Vuex
在父组件中添加store:store，所有的子组件都可以使用state
使用方式：this.$store.store.数据的key
Vue-ElementUI
ElementUI 是饿了么前端团队推出的一款基于 vue 的桌面端UI框架 类似Bootstrap
https://element.eleme.cn/#/zh-CN/component/installation
- 安装
npm i element-ui -S
- 使用
// main.js
// 1.导入 要使用的文件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 2.使用
Vue.use(ElementUI)
// 3.直接在组件中 复制粘贴代码
- 优化
由于打包时会默认打包 ElementUI 所有组件，导致文件过大，用户访问时间长
问题解决：按需导入，按需打包
// 按需引入
1.安装插件
npm install babel-plugin-component -D
2.修改配置
babel.config.js文件
module.exports = {
presets:[['@vue/cli-plugin-babel/preset',{'modules':false}]],
plugins:[
[
'component',{
'libraryName':'element-ui',
'styleLibraryName':'theme-chalk'
}
]
]
}
//3.导入局部 main.js
import {a1,a2,a3...} from 'element-ui'
//4.使用
Vue.use(a1)
Vue.use(a2)
Vue.use(a3)
// Vue.config.productionTip = false
MintUI(不推荐使用)
MintUI 是饿了么前端团队推出的一款基于 vue 的移动端端UI框架
https://mint-ui.github.io/#!/zh-cn
- 安装
npm i mint-ui -S
- 使用
// main.js
// 1.导入 要使用的文件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
// 2.使用
Vue.use(MintUI)
// 3.直接在组件中 复制粘贴代码
// 按需引入
1.安装插件
npm install babel-plugin-component -D
2.修改配置
babel.config.js文件
module.exports = {
presets:[['@vue/cli-plugin-babel/preset',{'modules':false}]],
plugins:{
[
'component',[{
'libraryName':'mint-ui',
'style':true
}
]]
}
}
//3.导入局部 main.js
import {a1,a2,a3...} from 'mint-ui'
import 'mint-ui/lib/style.css'
//4.使用
Vue.component(a1.name,a1)
Vue.component(a2.name,a2)
Vue.component(a3.name,a3)
// Vue.config.productionTip = false
Vant(推荐)
有赞前端开发团队推出的基于Vue的前端移动端框架
- 安装
npm i vant -S
- 使用
npm install babel-plugin-component -D
2.修改配置
babel.config.js文件
module.exports = {
presets:['@vue/cli-plugin-babel/preset'],
plugins:[[
'import',{
'libraryName':'vant',
'libraryDirectory':'es',
'style':true
},'vant']
]
}
// main.js
import {NavBar} from 'vant'
Vue.use(NavBar)
// 复制粘贴代码
END
网友评论