vue 笔记-白红宇

什么是Vue

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有。

生命周期钩子

生命周期	描述
beforeCreate	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created	在实例创建完成后，属性已绑定。挂载阶段还没开始，DOM还未生成，$el 属性目前不可见。
beforeMount	在挂载开始之前被调用
mounted	模板编译挂载之后（不保证组件已在doucument中）
beforeUpdate	组件更新之前
updated	组件更新之后
activated	keep-alive 组件激活时调用
deactivated	keep-alive 组件停用时调用
beforeDestroy	实例销毁前调用，在这一步，实例仍然完全可用
destroyed	实例销毁后调用
errorCaptured	当捕获一个来自子孙组件的错误时被调用

注意箭头函数的使用

不在选项属性或者回调上使用箭头函数，因为箭头函数是与父级作用域绑定在一起的，this指向的是最近的普通函数的作用域

created: () => console.log(this.a); //Uncaught TypeError: Cannot read property of undefinedvm.$watch('a', newValue => this.myMethod()); //Uncaught TypeError: this.myMethod is not a function复制代码

计算属性和侦听器

计算属性

当有些数据需要随着其他数据的变动而变动时，数据依赖；

基于它们的依赖进行缓存的，不希望有依赖可使用方法实现；

//计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter//...computed: {  fullName: {    // getter    get: function () {      return this.firstName + ' ' + this.lastName    },    // setter     set: function (newValue) {      var names = newValue.split(' ')      this.firstName = names[0]      this.lastName = names[names.length - 1]    }  }}//...复制代码

侦听器: 当需要的数据在变化时执行异步执行或开销较大的操作

绑定 HTML Class

可同时写固定class和动态class


    
复制代码

条件渲染

1.在 <template> 元素上使用 v-if 条件渲染分组


    复制代码

2.用 key 管理可复用的元素

3.v-if='null、undefined 或 false' 表示为 fasle

列表渲染

1.可用 of 替代 in, 因为它更接近 JavaScript 迭代器的用法


    
复制代码

2.一个对象的 v-for 在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

object: {  firstName: 'John',  lastName: 'Doe',  age: 30}复制代码


    
       {
   { index }}. {
   { key }}: {
   { value }}
    
复制代码

//结果0.firstName: John1.lastName: Doe2.age: 30复制代码

3.数组更新检测

var example1 = new Vue({  el: '#example-1',  data: {    items: [      { message: 'Foo' },      { message: 'Bar' }    ]  }})复制代码

变异方法：触发视图更新包括： pop(), push(), shift(), unshift(), splice(), sort(), reverse()

example1.items.push({ message: 'AOA' })复制代码

替换数组: 用一个含有相同元素的数组去替换原来的数组是非常高效的操作包括: filter(), concat(), slice(), 总是返回一个新数组

example1.items = example1.items.filter(function (item) {  return item.message.match(/Foo/)})复制代码

注意事项: 由于 JavaScript 的限制，Vue 不能检测以下变动的数组

当你利用索引直接设置一个项时，响应式： Vue.set(vm.items, indexOfItem, newValue) 或 vm.$set(vm.items, indexOfItem, newValue)

当你修改数组的长度时: vm.items.splice(newLength)

4.对象更改检测注意事项还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除

var vm = new Vue({  data: {    userProfile: {      name: 'Anika'    }  }})//添加单个属性Vue.set(vm.userProfile, 'age', 27);vm.$set(vm.userProfile, 'age', 27);//添加多个属性vm.userProfile = Object.assign({}, vm.userProfile, {    age: 27,    height: 188})复制代码

5.显示过滤/排序结果

计算属性

{
   { n }}
复制代码

data: {    numbers: [ 1, 2, 3, 4, 5 ]},computed: {    evenNumbers: funciton() {        return this.numbers.filter(function (num) {            return num % 2 === 0;        })     }}复制代码

methods

{
   { n }}
复制代码

data: {    numbers: [ 1, 2, 3, 4, 5 ]},methods: {    even(numbers) {        return numbers.filter(function (num) {            return num % 2 === 0;        })     }}复制代码

事件处理

1.事件修饰符

.stop: 阻止单击事件继续传播

.prevent: 提交事件不再重载页面

.capture: 添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处理，然后才交由内部元素进行处理

.self: 只当在 event.target 是当前元素自身时触发处理函数, 即事件不是从内部元素触发的

.once: 点击事件将只会触发一次

.passive: 尤其能够提升移动端的性能, 不和.prevent一起使用

2.按键修饰符

.enter 回车键 <input @keyup.enter="submit">

.delete 捕获“删除”和“退格”键

v-model修饰符

.lazy: 使用 change 事件进行同步


    复制代码

.number: 自动将用户的输入值转为数值类型

复制代码

.trim: 自动过滤用户输入的首尾空白字符

复制代码

v-model等价于


    复制代码

组件

1.data必须是一个函数，每个实例可以维护一份被返回对象的独立的拷贝

2.通过事件向父级组件发送消息： $emit('方法名字', 参数), 通过方法名触发事件并传值

3.插槽<slot></slot>

作用域插槽

例如一个<todo-list>组件模板可能包含了以下代码：


        
             
              
                  
                   {
   { todo.text }}        
          
    
复制代码

现在当我们使用 <todo-list> 组件的时候，我们可以选择为待办项定义一个不一样的 <template> 作为替代方案，并且可以通过 slot-scope 特性从子组件获取数据

4.动态组件is


    
    复制代码

5.基础组件的自动化全局注册

6.自定义事件

始终使用 kebab-case 的事件名


    Vue.component('my-component', {    props: [],    template: `        
    
    `})复制代码

将原生事件绑定到组件

$attrs属性: 使用 v-bind="$attrs", 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用

$listeners属性


      Vue.component('base-input', {	inheritAttrs: false,	props: ['label', 'value'],	computed: {    	inputListeners: function() {    		var vm = this    		// `Object.assign` 将所有的对象合并为一个新对象    		return Object.assign({},    			// 我们从父级添加所有的监听器    			this.$listeners,    			// 然后我们添加自定义监听器，    			// 或覆写一些监听器的行为    			{    				// 这里确保组件配合 `v-model` 的工作    				input: function(event) {    					vm.$emit('input', event.target.value)    				}        		}    		)	    }	},	template: `	    	      {
     { label }}	      	    	  `})复制代码

.sync修饰符

待续