vue.js学习和实战笔记

vue.js记录

文章已同步我的github笔记 https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生更加美好……

vue实例

生命周期

beforeCreate：不能访问this.$el和this.$data用于初始化非响应式变量
created：可以访问this.$data，不能访问到this.$el属性，this.$refs内容，用于ajax请求，created里赋值，data不用定义
beforeMount：this.$el和this.$data都初始化了，挂载前this.$el的值为'虚拟'的元素节点，比较少使用
mounted：'虚拟'的Dom节点被真实的Dom节点替换，用于获取VNode信息和操作，this.$refs可以访问
beforeupdate：响应式数据更新时调用，发生在虚拟DOM打补丁之前
updated：虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，data数据变化时只会触发update
beforeDestroy：实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例，用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

指令

指令带有 v- 前缀的特殊属性

v-html

解释：更新DOM对象的textContent,为了输出真正的 HTML
还有v-on、v-bind、v-model、v-for、v-if、v-else、v-else-if不展开说明
注意:v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
v-if和v-show的区别：v-show适合非常频繁地切换

修饰符

事件修饰符:

.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认行为，调用 event.preventDefault()
.once事件只触发一次

按键修饰符:
@keyup.enter……
表单修饰符:
.lazy、.number、.trim

key

推荐：使用 v-for 的时候提供 key 属性，以获得性能提升
说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素,vue会复用已有元素，使用两个input切换会共用，需要使用key让其独立

Class 与 Style 绑定

表达式的类型：字符串、数组、对象（重点）

//1
<div v-bind:class="{ active: true }"></div> ===> 解析后
<div class="active"></div>
//2
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析后
<div class="active errorClass"></div>

组件

prop

定义组件名kebab-case或者PascalCase(自己使用)

实战注意点:如果设置默认值，不进行自定义传参，需要直接定义为:default: () => {return xxx},否则会报错，原因：props default 数组／对象的默认值应当由一个工厂函数返回

//使用prop来传值:
//子组件html
<template>
    <header class="ly-header">
        <span>{{title}}</span>
    </header>
</template>
//js
props:['content','value']
进行验证，type类型有：Number、String、Boolean、Array、Object
propA: {
     type: Number,
     default: 100
 }
//父组件html
<header :title="我是标题">

注意:父级组件<comp some-prop="1"></comp>1为字符串，使用:some-prop="1"，1为数字

通过事件向父级组件发送消息

推荐始终使用 kebab-case 的事件名
$emit方法并传入事件的名字，来向父级组件触发一个事件

//子级
<template>
    <div class="header" @click="$emit('say-event')">点击我</div>
</template>
//父级
<template>
    <Header :content="content" @say-event="sayHanle"></Header>
</template>
<script>
    import Header from '@/components/header';
    export default{
    methods:{
            sayHanle(){
                console.log(222);
            }
        }
    }
</script>

动态组件-is

//currentTabComponent改变，组件也随之改变
<component v-bind:is="currentTabComponent"></component>

插槽-slot

说明：通过<slot></slot> 标签指定内容展示区域

//子级定义
<template>
    <div class="header">
        <slot name="title"></slot>
        <slot name="desc"></slot>
    </div>
</template>
//父级
<Header>
    <p slot="desc" class="desc">我的描述</p>
</Header>

keep-alive

主要用于保留组件状态或避免重新渲染,include(只有名称匹配的组件会被缓存),exclude(任何名称匹配的组件都不会被缓存)
:max="10"(最多可以缓存多少组件实例)
相对应的周期函数为:activated(keep-alive 组件激活时调用),deactivated(组件停用时调用)

更便利的方式为:路由设置元信息keepAlive: true，进行设置
<keep-alive v-if="$route.meta.keepAlive">
      <router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

自定义指令

作用：进行DOM操作

//全局定义
Vue.directive('focus', {
    inserted: function (el) {
        el.focus()
    }
}

钩子函数
bind：指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
unbind：只调用一次，指令与元素解绑时调用

过滤器

作用：文本数据格式化

//全局过滤器
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>

<script>
Vue.filter('date', function(value, format) {
    // value 要过滤的字符串内容，比如：dateStr
    // format 过滤器的参数，比如：'YYYY-MM-DD hh:mm:ss'
})
</script>
//局部过滤器
filters: {
    filterName: function(value, format) {}
}

监视数据变化-watch

作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作

watch:{
    info:function(val,oldVal){
         console.log('当前值为：' + val, '旧值为：' + oldVal)
    }
}

选项包括有三个
第一个是handler：其值是一个回调函数，即监听到变化时应该执行的函数。
第二个是deep：其值是true或false，确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到）
第三个是immediate：其值是true或false，确认是否以当前的初始值执行handler的函数。

结束，撒花~~~

文章已同步我的github笔记 https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生更加美好……