Vue框架基础知识(二)

Vue生命周期

• 三大阶段

1. 初始化显示阶段(4个钩子)beforeCreate,created,beforeMount,mounted
2. 数据更新显示(2个钩子)beforeUpdate,updated
3. 死亡(2个钩子)beforedDestroy,destroyed

• 常见的生命周期方法

1. mounted(),发送ajax请求,启动定时器等异步任务
2. beforeDestroy():做收尾工作,如清理定时器

过渡和动画

1. Enter 显示
2. Leave 隐藏

		/*显示和隐藏的过渡效果*/
        .move-leave-active, .move-enter-active {
            transition: all 3s ease;
        }

        /*隐藏时候的样式*/
        .move-enter, .move-leave-to {
            opacity: 0;
            transform: translateX(20px);
        }

基本步骤:

1. 在目标元素外包裹<transition name="xxx">
2. 定义class样式

• 指定过渡样式
• 指定隐藏时候的样式:opacity/其他

过滤器

自定义过滤器：

  	Vue.filter('dataString', value => {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    })

只想要年份:可以单独传入

    <p>{{data | dataString('YYYY-MM-DD')}}</p>
    Vue.filter('dataString', (value, format = 'YYYY-MM-DD HH:mm:ss') => {//----形参默认值----
        return moment(value).format(format)
    })

指令

• ref通过给元素注册唯一的标识符,找到这个元素对象
  <p ref="content">hello!小凡</p>
alert(this.$refs.content.innerHTML)

• v-cloak与css配合,[v-cloak]{display:none}让其在解析之前隐藏,解析之后v-cloak没有了,看不见{{}}所以不影响后面

• 自定义指令—directive(全局),directives(局部)

1. 定义全局指令

	<p v-upper-text="msg1"></p>
  Vue.directive('upper-text', (el, binding) => {
        el.textContent = binding.value.toUpperCase()
    })

2. 定义局部指令–在Vue的配置对象里面写—变量名加处理函数

	 	directives: {
            // 'lower-text':function(el, binding) {
            //     el.textContent = binding.value.toLowerCase()
            // }
            'lower-text'(el, binding) {//简写
                el.textContent = binding.value.toLowerCase()
            }
        },

自定义插件

有关插件的详情点击这里

• 添加全局方法或者 property。如：vue-custom-element

• 添加全局资源：指令/过滤器/过渡等。如 vue-touch

• 通过全局混入来添加一些组件选项。如 vue-router

• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router