vue常用的一些东西

crainyday

前端 / Vue

发布于：2019年8月6日

字数：2.4k字

时长：11分钟

表单数据的自动收集

生命周期、过渡&动画、过滤器

1. vue的生命周期

vue的生命周期分为三大部分: ①初始化显示 ②更新显示 ③销毁vue实例. vue执行到特定的生命周期后, 会依次调用对应的回调函数. 以下回调函数从上到下依次执行.

注意: 在vue中这些函数被称为 钩子函数.

①初始化显示阶段. 该阶段回调函数只会被调用一次

before Create()

created()

before Mount() mount: 挂载, 表示从内存挂载到HTML页面

mounted()

②更新显示阶段. 该阶段回调函数会被调用多次

before Update()

updated()

③销毁(死亡)阶段. 该阶段回调函数只会被调用一次

before destroy()

destroyed()

常用的生命周期回调函数

mounted(): 发送ajax请求, 启动定时器等异步任务.

before Destroy(): 做一些收尾工作, 如: 清除定时器等

<body>
    <div id="demo">
        <button @click="destroyVM">销毁VM对象</button>
        <p v-show="isShow">Hello Vue!!!</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#demo',
            data:{
                isShow:true,
            },
            beforeCreate(){
                console.log('beforeCreate()')
            },
            created(){
                console.log('created()')
            },
            beforeMount(){
                console.log('beforeMount()')
            },
            mounted(){
                console.log('mounted()')
                this.intervalID = setInterval(()=>{
                    this.isShow = !this.isShow
                },1000)
            },
            beforeUpdate(){
                console.log('beforeUpdate()')
            },
            updated(){
                console.log('updated()')
            },
            beforeDestroy(){
                console.log('beforeDestroy()')
                clearInterval(this.intervalID)
            },
            destroyed(){
                console.log('destroyed()')
            },
            methods:{
                destroyVM(){
                    this.$destroy()
                }
            }
        })
    </script>
</body>

2.过渡&动画

过渡: transition. 动画: animation.

这实际上是说, 我们网页中的一个HTML元素, 在显示和隐藏的过程中有一些特殊的过渡和动画样式. vue的动画, 实际上是操作的 CSS 的 transition 或 animation, 通过给目标元素动态的添加或移除特定的 class 实现.

vue中过渡&动画相关的类名:

xxx-enter-active: 指定显示的 transition.

xxx-leave-active: 指定隐藏的 transition.

xxx-enter/xxx-leave-to: 指定隐藏时的样式.

vue做基本过渡&动画的步骤:

在目标元素外包裹<transition name=“xxx”></transition>标签

定义 class 样式: ①指定过渡样式: transition. ②指定隐藏时的样式: opacity/其他

便于理解, 请看下图:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*显示和隐藏的过滤效果*/
        .fade-enter-active,.fade-leave-active{
            transition: opacity 2s;
        }
        /*隐藏时的样式*/
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
        /*显示的过滤效果*/
        .move-enter-active{
            transition: all 1s;
        }
        /*隐藏的过滤效果*/
        .move-leave-active{
            transition: all 3s;
        }
        /*隐藏时的样式*/
        .move-enter,.move-leave-to{
            opacity: 0;
            transform: translateX(20px);
        }
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div id="demo">
        <button @click="isShow=!isShow">显示/隐藏</button>
        <transition name="fade">
            <p v-show="isShow">Hello Vue!!!</p>
        </transition>
    </div>
    <div id="demo2">
        <button @click="isShow=!isShow">显示/隐藏</button>
        <transition name="move">
            <p v-show="isShow">Hello Vue!!!</p>
        </transition>
    </div>
    <div id="demo3">
        <button @click="isShow=!isShow">显示/隐藏</button>
        <br>
        <transition name="bounce">
            <p style="display: inline-block;" v-show="isShow">Hello Vue!!!</p>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:"#demo",
            data(){
                return {
                    isShow:true,
                }
            }
        })
        new Vue({
            el:"#demo2",
            data(){
                return {
                    isShow:true,
                }
            }
        })
        new Vue({
            el:"#demo3",
            data(){
                return {
                    isShow:true,
                }
            }
        })
    </script>
</body>

3.过滤器

过滤器就是对我们要在网页显示的数据进行一些格式化操作后再显示.

注意: 并没有改变原本的数据, 而是产生新的对应的数据

过滤器的使用步骤:

定义过滤器.
1
2
3
4
Vue.filter(filterName, function(value[,arg1,arg2,...]){
    // 进行一定的数据处理
    return newValue
})
使用过滤器. 注意: 原始数据之后和过滤器之前都有一个空格.
1
2
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

<body>
    <div id="test">
        <h2>显示格式化的日期时间</h2>
        <p>未处理:{{datetime}}</p>
        <p>完整版:{{datetime | datetimeFilter}}</p>
        <p>年月日:{{datetime | datetimeFilter('YYYY-MM-DD')}}</p>
        <p>时分秒:{{datetime | datetimeFilter('HH:mm:ss')}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
    <script type="text/javascript">
        Vue.filter('datetimeFilter',function (value,format) {
            //设置形参默认值也可以
            //function (value,format="YYYY-MM-DD HH:mm:ss")
            return moment(value).format(format||"YYYY-MM-DD HH:mm:ss")
        })
        new Vue({
            el:"#test",
            data:{
                datetime:new Date(),
            }
        })
    </script>
</body>

4. vue指令

vue指令分为: 内置指令和自定义指令.

①vue内置指令

常见的一些内置vue指令:

v-text: 更新元素的 test Content.

v-html: 更新元素的 inner HTML.

v-if: 如果为 true, 当前标签才会输出到页面.

v-else: 如果为 false, 当前标签才会输出到页面.

v-show: 通过控制元素的 display 来控制元素的显示与隐藏.

v-for: 遍历数组/对象.

v-on: 绑定事件监听, 一般简写为 “@”

v-bind: 强制绑定解析表达式, 一般简写为 “:”

v-model: 双向数据绑定.

ref: 为HTML元素指定唯一标识, vue对象通过 $refs 属性访问这个元素对象.

v-cloak: 防止闪现, 与 CSS 配合: [v-cloak]{display: none}

如下图, 在经过vue解析之后, 才会将原始HTML文件中的vue指令和一些表达式去除或替换. 如果解析过慢, 或vue等待的数据还没有到来, 此时HTML页面就会出现如下图的情况. 为了防止, 出现了 v-cloak 指令.

注意: 在网页中第一次运行下述代码时, 会出现上述图片中的情况.

<body>
    <div id="test">
        <p ref="example">Hello Vue!!!</p>
        <button @click="output">弹出</button>
        <p>{{msg}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        alert("----")
        new Vue({
            el:'#test',
            data:{
              msg:'I love China!',
            },
            methods:{
                output() {
                    alert(this.$refs.example.textContent)
                }
            }
        })
    </script>
</body>

②自定义vue指令

有两种方法: 全局注册和局部注册.

全局注册的指令, 当前页面的所有部分都可以用. 局部注册的指令, 只有在注册范围内可用.

全局注册:
1
2
3
Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
})
局部注册:
1
2
3
4
5
6
7
directives : {
    'my-directive' : {
        bind (el, binding) {
            el.innerHTML = binding.value.toupperCase()
        }
    }
}

注意: 下述代码有错误, 局部注册的 lower-text 指令, 在 test2 中不可用.

<body>
    <div id="test">
        <p v-upper-text="msg"></p>
        <p v-lower-text="msg"></p>
    </div>
    <div id="test2">
        <p v-upper-text="msg"></p>
        <p v-lower-text="msg"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.directive('upper-text',function (el,binding) {
            //全局注册的 upper-text 指令, 在本页面的所有vue对象中都可用
            //el: 指令属性所在的标签对象
            //binding: 包含指令相关信息数据的对象
            el.textContent = binding.value.toUpperCase()
        })
        new Vue({
            el:'#test',
            data:{
                msg:'I love China!',
            },
            directives:{
                //局部注册的 lower-text 指令, 在 test2 里面不可用,会报错
                'lower-text'(el,binding){
                    el.textContent = binding.value.toLowerCase()
                }
            }
        })
        new Vue({
            el:'#test2',
            data:{
                msg:'I love China!',
            },
        })
    </script>
</body>

5. vue插件

开发插件:

新建 JS 文件, 将插件的所有代码放到匿名函数调用里.

声明插件对象, 给插件对象添加 install 方法.

添加全局方法或属性, 用Vue函数对象点’‘Vue.’'添加.

添加全局资源: 指令/过滤器/过渡等, 用Vue函数对象点’‘Vue.’'添加.

添加实例方法, 通过 Vue.prototype 添加. 为了区别全局方法, 实例方法以"$"开头.

使用插件: 在引入Vue.js后, 先引入外部vue插件库, 再用 Vue.use(MyPlugin) 声明使用该插件. 实际上这调用了插件对象的 install 方法, 将插件中的功能"安装"到 Vue 里.

vue-myPlugin.js:

(function (window) {//匿名函数调用包裹插件代码, 更规范
  //1.创建需要向外暴露的插件对象
  const MyPlugin = {}
  //2.vue插件必须暴露一个 install 方法,且第一个参数必须是Vue
  MyPlugin.install = function (Vue, options) {
  //3.添加插件功能
    // ①. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('Vue函数对象的myGlobalMethod()')
    }
    // ②. 添加全局资源
    Vue.directive('my-directive',function (el, binding) {
      el.textContent = 'my-directive---'+binding.value
    })
    // ④. 添加实例方法.
    Vue.prototype.$myMethod = function () {
      console.log('vm---$myMethod()')
    }
  }
  //4.向外暴露插件对象
  window.MyPlugin = MyPlugin
})(window)

使用自定义插件:

<body>
    <div id="test">
        <p v-my-directive="msg"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/vue-myPlugin.js"></script>
    <script type="text/javascript">
        //声明使用插件
        Vue.use(MyPlugin)
        Vue.myGlobalMethod()
        const vm = new Vue({
            el:'#test',
            data:{
                msg:'I Love China!',
            },
        })
        vm.$myMethod()
    </script>
</body>