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定义this变量，data没有定义不能双向绑定，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让其独立
相同类型的元素之间切换，需要加入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>组件
规范：定义组件名和组件文件名使用camelCase (驼峰命名法)，通用组件可以加上base，父组件标签使用kebab-case命名
props
规范：要定义类型要详细，命名使用camelCase (驼峰命名法)
实战注意点:如果设置默认值，不进行自定义传参，需要直接定义为: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
说明：vue2.6,父组件使用插槽的v-bind能够访问子组件中的数据
注意：v-slot只能添加在一个<template> 上
//子级定义
<template>
<div class="header">
<slot name="header" v-bind:user="user"></slot>
</div>
</template>
//父级
<Header>
<template v-slot:header="data">
<p>{{data.user.name}}</p>
</template>
</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-else></router-view>自定义指令
作用：进行DOM操作
//全局定义
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
}钩子函数
bind：指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用
unbind：只调用一次，指令与元素解绑时调用
钩子函数参数
el:指令所绑定的元素
第二个参数的binding的value为指令的绑定值，值可以是对象的字面量
过滤器
作用：文本数据格式化
//全局过滤器
<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的函数。
混合(mixin)
定义：mixins:[mixin]
来分发 Vue 组件中的可复用功能
结束，撒花~~~
文章已同步我的github笔记
https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生更加美好……
