Vue lifeCycle & Little tips summary

| 生命周期

| keep-alive 组件切换/缓存

PS：使用 keep-alive 的组件，实例化 name 值与路由配置 name 值必须相同，否则 keep-alive 失效

  • activated 当 keepalive 包含的组件再次渲染的时候触发
  • deactived 当 keepalive 包含的组件销毁的时候触发

keepalive 可以接收三个属性作为参数进行匹配对应的组件进行缓存，默认 keepalive 包含的组件都缓存

  1. include 包含的组件
  2. exclude 排除的组件
  3. max 缓存组件的最大值

其中 include，exclude 可以为字符，数组，以及正则表达式 max 类型为字符或者数字

<!-- 只缓存组件 name 为 a 或者 b 的组件 -->
<keep-alive include="a,b">
 <component :is="currentView"/>
</keep-alive>
<!-- 组件名为 c 的组件不缓存 -->
<keep-alive exclude="c">
 <component :is="currentView"/>
</keep-alive>
<!-- 如果同时使用include,exclude,那么exclude优先于include，下面的例子只缓存a组件 -->
<keep-alive include="a,b" exclude="b">
 <component :is="currentView"/>
</keep-alive>
<!-- 如果缓存的组件超过了 max 设定的值 5，那么将删除第一个缓存的组件 -->
<keep-alive exclude="c" max="5">
 <component :is="currentView"/>
</keep-alive>

| 动态添加类名和样式

动态添加类名

  1. 对象语法： <div class="tab" v-bind:calss="{'active' : active , 'unactive' : !active}"> </div> vm实例中需要包含data : {active : true} 渲染结果为： <div class="tab active"></div>
  2. 数组语法： <div v-bind:class="[classA, classB]"></div> vm实例中需要包含 data : {classA : ‘class-a’,classB : ‘class-b’ } 渲染结果为：<div class="class-a class-b"></div>
  3. 使用三元表达式: <div v-bind:class="[classA, isB ? classB : '']"></div> 如果 vm.isB = false, 则渲染结果为 <div v-bind:class="class-a"></div>

动态添加样式

  1. 对象语法：直接绑定符合样式格式的对象
    <div v-bind:style="alertStyle"></div>
    data : { alertStyle : {color : ‘red’,fontSize : ‘20px’ } }
    除了直接绑定对象外，也可以绑定单个属性或直接使用字符串
    <div v-bind:style="{ fontSize : alertStyle.fontSize, color : 'red'}"></div>
  2. 数组语法：v-bind:style 允许将多个样式对象绑定到统一元素上。
    <div v-bind:style="[ styleObjectA, styleObjectB]"></div>

| 常用修饰符

数据绑定 => 文本插值:v-once
单次插值，即首次赋值后，再更改 vm 实例属性值不会引起 DOM 变化。
Vue.js 2.0 去除了 1.0 的写法，采用 v-once 代替。以上模板需要改写为 <span v-once='name'></span>

input 参数特性
lazy（在change事件中同步数据） 例：<input v-model="query" lazy />
number（会自动将用户输入转为 Number 类型，如果原值转换结果为 NaN 则返回原值。 ）
debounce 设置的最小延时，单位为 ms，即为单位时间内仅执行一次数据更新。 <input v-model="query" debounce="500" />

Vue.js 2.0 中取消了 lazy 和 number 作为参数，用修饰符（modifier）来代替 :
<input v-model.lazy="query" />　 .lazy修饰符可以实现单向数据绑定 <input v-model.numer="age" />
去除了debounce，原因是无法监测到输入新数据，但尚未同步到vm 实例属性时这个状态。
新增了 trim 修饰符，去掉输入值首尾空格 : <input v-model.trim="name" />

常用事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用时间捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>

常见的按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

<!--全部的按键别名：-->
enter / tab / delete (捕获 “删除” 和 “退格” 键) / esc / space
up / down / left / right / ctrl / alt / shift / meta

<!-- 通过全局 config.keyCodes自定义按键修饰符别名,记住要在new新实例之前注册 -->
<!-- 可以使用 v-on:keyup.f1 -->
Vue.config.keyCodes.f1 = 112

| vue 中使用 jQuery

  1. npm install jquery --save

  2. webpack 配置：webpack.base.conf.js 新增代码块

     var webpack = require('webpack')
 plugins: [
     new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery",
         jquery: "jquery",
         "window.jQuery": "jquery"
     })
 ],

参考链接

Vue 开发必须知道的 36 个技巧

vue-in-github
Vue2 技术栈归纳与精粹
Vue-plugin(page/dialogs/tablegrid/uploader/ztree/gallery/region)
Vue技术内幕
前端路由简介以及vue-router实现原理
从0到1手写一个vuejs
Vue UI库
vuejsdevelopers
Awesome Vue revue 前端日刊 力荐 35 个最好用的 Vue 开源库！