Vue.js官网

Posted on | In | | 次阅读

1. 所有的Vue组件都是Vue实例

2. 只有实例被创建时data中存在的属性才是响应式的

后添的属性为非响应式的

除非Object.freeze()，即阻止修改的属性
前缀$:与用户定义的属性区分开

1
vm.$el === document.getElementById('example')

$watch实例方法:

1
2
3
vm.$watch('a',function (newValue,oldValue){

})

3. 生命周期钩子 created mounted updated destroyed

this指向Vue实例
不能使用 => 函数

1
2
3
4
5
6
new Vue({
   ......
   created: function(){
   console.log('a is:'+ this.a)
  }
})

4. 模板语法

将DOM绑定到底层Vue实例的数据
写渲染render函数 + JSX
绑定文本： 使用v-once(一次性插值)
原始HTML： v-html 使用属性值被替换 xss攻击
特性：v-bind
js： 单个表达式

5. 计算属性computed：—复杂逻辑

1
2
3
4
5
6
(复杂逻辑放在Vue实例)(return绑定关系)
computed:{
   reversedMessage:function(){
	     return this.message....  
       }	
}

6. 计算属性缓存(computed) vs 方法(methods)

计算属性缓存 方法
computed methods
只有依赖改变时才重新求值响应 每次触发重新渲染，调用方法将总会再次执行函数
e.g Data.now()不改变 无
使用情况：多个计算属性依赖于很大的数组A，避免多次执行getter 无

7. 计算属性缓存(computed) vs 侦听(watch)

计算属性 侦听属性
computed watch
无 观察和响应Vue实例上的数据变动
默认只有getter属性，可添加setter属性 执行异步或者开销较大的操作

8. Class 与 Style 绑定

<1> v-bind处理

1. Class: 动态切换多个Class

1
2
3
4
5
6
7
8
9
<div v-bind:class="{~定义在computed里，返回对象的计算属性~}"></div>
computed:{
   classObject: function() {
       return {
          active:
          'text-danger':
      }
   }
}

2. 数组

3. 组件

<2> 内联样式

也可绑定数组样式

1
2
3
4
5
6
v-bind:style = "styleObject"
data: {
   styleObject: {
      color: 'red'
   }
}

9. 条件渲染

(1)在template元素上使用v-if条件渲染分组

1
<template v-if="ok"></template>

(2)else else-if

1
2
<div v-else>
<div v-else-if="type === B">

(3)可复用的元素

e.g 切换用户类型，不会清除input内容
用key方法：
v-if v-else 中复用已有template元素 规定不要复用：添加key，未添加key仍会复用*

(4)v-show= “ok” 相当于display

不支持template元素和v-else
总被渲染，只是简单CSS显示切换
初始化渲染开销大
频繁切换时使用*

10. 列表渲染

(1)item in items

1
2
<li v-for="item in items">
<li v-for="item of items">

(2)可提供多个参数

1
<li v-for="(value,key) in object"></li>

(3)为已有对象赋予多个新属性：用两个对象的属性创建一个新的对象

e.g Object.assign()或_.extend()

1
2
3
4
> vm.userProfile = Object.assign({},vm.userProfile,{
   age:27,
   favoriteColor:'Vue Green'
})

(4)列表渲染可过滤-computed

1
2
3
4
5
6
7
8
9
10
<li v-for="n in even(numbers)"></li>

methods {
  even:function (numbers){

  }
}
evenNumbers:function (){
  return
}

(5)组件的属性不同自动绑定

v-bind:item
is = “todo-item”

11. 事件处理 v-on

(1)监听事件v-on

(2)事件处理方法

v-on:click = “great” (methods定义function)
也可以使用example2.great()调用

(3)内联处理器中的方法

1
2
v-on:click = "say(hi)"
v-on:click = "warn(' ',$event)"

method中function有event参数

(4)事件修饰符

{.stop,.prevent,.capture,.self,.once}

(5)按键修饰符

{.enter,.tab,….}

(6)系统修饰符

{.ctrl,.alt,.shift,.meta}

12. 表单输入绑定 v-model input和textarea元素

负责监听用户的输入事件以更新数据 总将Vue实例的数据作为数据来源

(1)

1
2
<input v-model="message"/>
<p>{{message}}</p>

(2)推荐select初始值为空

(3)修饰符

13. 组件基础

1
2
3
4
5
6
7
8
9
//定义一个名为button-counter的新组件
Vue.component('button-counter',{
  data: function (){
    return {
      count: 0
    }
  },
  template: '<button v-on:click="counter++">You clicked me {{count}} times</button>'
  })

(1)组件的data必须是个函数

(2)模块系统

•局部注册：局部注册的组件在其子组件中不可用

1
2
3
4
5
6
7
//ComponetB.js
import ComponentA from './ComponentA'
export default {
  components: {
    ComponentA
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
var ComponentA = {/* */}
var ComponentB = {
  components: {
    '  ': ......
  }
}
-------Bebel和webpack，ES2015--------
export default {
  components: {
    componentA
  }
}

•全局导入基础组件 src/main.js

(3)prop传递属性

1
2
3
4
Vue.component('blog-post',{
  props: ['title'],
  template: '<h3>{{title}}</h3>'
  })

(4)支持 v-model

1
2
3
4
5
6
Vue.component('custom-input',{
  props: ['value'] //**value特性绑定到名为value的prop上**
  template:`
  <input v-bind:value = "value" v-on:input="$emit('input',$event.target.value)"></input> //input触发时，将新的值通过自定义的input事件抛出
  `
  })

14. prop

(1)单向数据流

父子prop：单向下行绑定
改变prop：

1
2
3
4
5
6
7
//传递一个初始值:本地data属性
props:['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

1
2
3
4
5
6
7
//计算属性：原始的值传入且需要转换
props:['size'],
computed: function () {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

(2)Prop验证：为prop中的值提供一个带有验证需求的对象

1
2
3
4
5
6
7
8
9
//带默认值的对象
propE: {
  type: Object,
  default:function () {
    return {
      message: 'hello'
    }
  }
}
1
2
3
4
5
6
//自定义验证函数
propF: function () {
  validator: function (value) {
    return ['success','warning','danger'].indexOf(value)
  }
}

实例创建之前验证，实例属性（data，computed等）在default或者validator函数中是不可用的

(3)非prop属性：指向一个组件，但该组件并没有相应prop定义的特性.

1
2
3
4
5
st => start:自动添加到跟元素上，class和style可添加
e => end:inheritAttrs:false  v-bind="$attrs"
op1 => operation:若想禁止添加

st-> op1 -> e

15. 自定义事件

(1)触发的事件需要完全匹配监听所用的名称

一个组件的v-model默认会利用名为value的prop和名为input的事件

(2)将原生事件绑定到组件

一个组件的根元素上直接监听一个原生事件

1
v-on:focus.native = "onFocus"

组件重构：.native监听失败 $listeners属性指向某个子元素v-on=”$listeners”

(3).sync修饰符

prop双向绑定 update:my-prop-name触发事件
子组件赋值 this.$emit(‘update:title’,new Title)
父组件监听事件并更新本地数据属性 v-on:update:title = “doc.title = $event”
缩写为 v-bind:title.sync = “doc.title” (v-bind.sync = “doc”)(多个)

16. 插槽 slot

若没有slot元素，则任何传入它的内容都会被抛弃
理解：类似于input元素中placeholder，若不输入其他内容（组件），则显示插槽

(1)具名插槽

1
2
<slot name="header"></slot>
<template slot="header">(父组件)

(2)共用插槽

1
2
3
4
5
<base-layout>
  <h1 slot="header">
     <p>...</p>(共用默认插槽)
  </h1>
</base-layout>

17.动态组件&异步组件

(1)失活的组件将会被缓存

(2)工厂函数：以一个工厂函数的方式定义你的组件

异步解析组件定义
被渲染的时候才会被触发，结果存起来供未来渲染

1.和webpack的code-splitting功能配合使用

1
2
3
4
5
Vue.component('async-webpack-example',function(resolve){
  //webpack将代码分割成不同包
  //包通过Ajax请求加载
  require(['./my-async-component'],resolve)
  })

2.webpack2+ES2015 返回import

1
2
3
Vue.component('async-webpack-example',
   ()=>import('./my-asynv-component')
)

18.处理边界情况

(1)访问元素&组件

根元素：this.$root
父元素：$parent
访问子组件：ref组件

1
2
<base-input ref="usernameInput">
this.$refs.usernameInput