vue学习扩展

2020-07-18 本文已影响0人 kevin5979

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 所有组件，导致文件过大，用户访问时间长

问题解决：按需导入，按需打包

https://element.eleme.cn/#/zh-CH/component/quickstart

// 按需引入
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.直接在组件中 复制粘贴代码

优化

https://mint-ui.github.io/docs/#/zh-cn2/quickstart

// 按需引入
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的前端移动端框架

https://youzan.github.io/vant/#/zh-CN/intro

安装

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

vue学习扩展

Vue数据绑定的过程

v-cloak

自定义指令

自定义过滤器

Vue动画

通过第三方库实现动画 velovity

通过css库实现动画 (Animate.css库)

列表动画

动态组件

组件动画

具名插槽

v-slot指令

作用域插槽

v-slot 替换slot-scope

Vuex

Vue-ElementUI

MintUI(不推荐使用)

Vant(推荐)

猜你喜欢

热点阅读