一个Vue应用就是一个Vue实例

var mydata = {
 name:"Mike",
 age:23,
 job:"engineer"
};
//Vue实例模板如下
var vue = new Vue({
 el:"#myapp",  //myapp为应用的根节点

 data:mydata,  //mydata为这个应用的数据对象

 beforeCreate:function(){ ... }, //生命周期钩子函数beforeCreate，实例创建前调用该函数，此时el和data均为undefined
 created:function(){ ... },  //生命周期钩子函数created，当一个实例被创建完毕执行该函数，此时el还是为undefined，但是data数据已绑定完毕，为mydata
 beforeMount:function(){ ... },//生命周期钩子函数,有el选项，挂载DOM节点前执行该函数，此时el有对应的DOM节点数据，但DOM结构的数据绑还没有执行；定若没有el选项，生命周期结束
 mounted:function(){ ... },  //生命周期钩子函数，挂载DOM节点结束执行该函数，此时el有对应节点，数据绑定完成。
 beforeUpdate:function(){ .. }, //生命周期钩子函数，数据发现变化时先执行beforeUpdate，后执行updated，此时数据更新未完成。
 updated:function(){ ... },  //生命周期钩子函数，数据发现变化时先执行beforeUpdate，后执行updated，此时数据更新完成。
 beforeDestroy:function(){ ... }, //生命周期钩子函数，函数在实例销毁前调用，此时实例还可以调用
 destroyed:function(){ ... },  //生命周期钩子函数，在实例销毁后调用，此时Vue实例所有东西会解除绑定，事件监听器会被移除，所有子实例都被销毁

 computed:{  //计算属性
  helloName:function(){   //计算属性的getter
   return "Hello,"+this.name+"!";
  },
  increaseAge:function(){
   return this.age+1;
  }
 }
 
 watch:{  //侦听器，数据发生变化时，会调用该数据的侦听函数
  name:function(newVal,oldVal){  //如果name发生变化，这个函数会执行
    ...
  },
  job:function(newVal,oldVal){
    ...
  }
 }

 methods:{   //方法
  doSomething1:function(args){
   ...
  },
  doSomething2:function(args){
   ...
  },
 }
});

Vue特性总结如下

1.双向数据绑定 {{ something }}

一次性插值可以使用 v-once指令 这样绑定的内容不会随数据而改变。 <span v-once> {{name}} </span>

2.绑定html文本使用v-html指令 <div v-html="myhtml"></div>

 

3.v-bind指令用于绑定html属性，如下

  v-bind:href="myurl"
  v-bind:id="myid"
  v-bind可以缩写为 :属性 ,例如 :href="myurl"
  示例 :id  :class  :href  :title :src :style :key :value

 

4.v-on用于监听DOM事件，如下

  v-on:click="doSomething"
  v-on可以缩写为@  例如@click="doSomething"

 

5.修饰符

5.1 事件修饰符，用于指出指令该以特殊方式绑定，修饰符可以串联

例如 .prevent, .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit">...</form>
.stop 阻止事件冒泡
.prevent  阻止默认事件执行
.capture  事件采用捕获模式
.self  只有event.target是当前元素自身时才触发处理函数，即事件不是从内部元素触发
.once 事件只触发一次
.passive  
 

5.2 按键修饰符

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
 

6.计算属性computed

计算属性默认只有 getter，如上vue实例所示 ，不过在需要时你也可以提供一个 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]
    }
  }
}
// ...

对fullName进行赋值时，setter 会被调用 firstName 和 lastName 也会相应地被更新。
 

7.样式绑定

通过 :class 绑定相应的类名
通过 :style 绑定内联样式
 

8.条件指令

v-if  v-else-if  v-else
v-show
Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性
 

9.循环指令v-for

v-for="item in items"
v-for="(value,key,index) in items"
v-for通常与<template>配合使用，例如

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以最好把v-if放在v-for的外层元素
 

10.表单绑定 v-model

表单修饰符
.lazy 在“change”时而非“input”时更新
.number 输入值转为数值类型  v-model.number="age"
.trim 自动过滤首尾空白字符
 

11.组件

11-1 基础范例

Vue.component("my-compenent",{
 props:['name','age'],
 data:function(){
  return {
   count:0
  }
 },
 template:'<div>....</div>'
})

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
仅有的例外是像 el 这样根实例特有的选项。
 

11-2 组件传值

组件通过props进行传值，props是单向绑定，父组件的属性变化时，将传导给子组件，但不会反过来。
子组件要向父组件传值要用监听/触发机制 $emit(eventName,[arg1,arg2,...]),$on(eventName)
 

11-3 使用组件

①<my-compenent name="Jack" age=18></my-compenent>
②也可以通过v-bind传值 

<mycompenent v-bind:name="parentsName"></mycompenent> 

用v-bind动态绑定props的值到父组件的数据中，每当父组件数据变化时子组件也对应发生变化
 

11-4 组件的props验证

组件可以为props制定验证要求，示例如下

Vue.component("mycompenent",{
 props:{
  propA:Number, //一种数据类型要求
  propB:[Number,String], //多种数据类型要求
  propC:{   //数据类型，是否必须，默认值
   type:Number,
   required:true,
   default:18
  },
  propD:{
   default:function(){ //自定义默认值函数
     return {message:'hello'};
   }
  },
  propE:{
   validator:function(args){  //自定义验证函数
    return args>10;
   }
  }
 },
 data:function(){
  return {
   count:0
  }
 },
 template:'<div>....</div>'
})

 

11.5 子组件向父组件传值

子组件和父组件沟通需要三大要素：
①沟通桥梁eventName
②子组件的eventNameHandler，在eventNameHandler函数中触发eventName，即$emit(eventName,[arg1,arge2,...])
③父组件的eventNameHandler，当子组件触发eventName,父组件的eventHandler就会执行，并接受到子组件eventHandler的参数
绑定监听事件eventName分两大步：
①子组件绑定对应的事件可以触发子组件的eventHandler
②父组件使用子组件时用v-on:eventName="parentEventHandler"监听eventName事件
PS：官方推荐kebab-case 的事件名。即eventName应该写成event-name

Vue.component('my-component',{
 props:['age'],
 template:'<div :click="childAddHandler">{{age}}</div>',
 methods:{
   childAddHandler:function(){
     this.age += 1;
     this.$emit('add');
   }
 }
});

new Vue({
  el:"#app",
  data:{
    total:0
  },
  methods:{
    parentAddHandler:function(){
      this.total += 1;
    }
  }
});

<div id="app">
 <my-component v-on:add="parentAddHandler"></my-component>
</div>

 

11.6 动态组件

使用<component></component>和is配合可以实现活动面板切换（组件切换）的效果

 

<component v-bind:is="currentTabComponent"></component>

小tips:通常 动态组件与keep alive配合使用

 

<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

这样，做组件切换时，之前的组件状态会被缓存起来，再切回去时前一个组件时状态不变

 

11.7 局部注册组件

Vue.component(...)是全局注册组件，这意味组件不管需不需要都会被下载，可以使用局部注册，需要时候再引入
大致步骤如下
①将组件赋值给变量对象

 

var componentA = {
 props: ...,
 template: ...,
 ... 
};
var componentB = {
 props: ...,
 template: ...,
 ... 
};
var componentC = {  //子组件可以嵌套子组件
 components: {
    'component-a': ComponentA
  },
 props: ...,
 template: ...,
 ... 
};

②根据需要引入子组件

 

new Vue({
  el:"#app",
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
});

 

12 slot 插槽

12.1 slot与组件配合时候，实例如下

<my-component>this is some text!!</my-component>

Vue.component('my-component',{
 template:"<h1>this is title！！</h1><article><slot></slot></article>"
})

则实际效果如下

<h1>this is title！！</h1><article>this is some text!!</article>

 

12.2 具名插槽

当有多个插槽时，需要给插槽明明进行区分，使用如下

 

13 子组件通过$root访问根实例

例如根实例有数据name
则子组件 通过 this.$root.name可以访问到
对于少量组件应用来说，$root十分方便，但大型应用还是推荐vuex做数据管理

 

14 子组件通过$parent访问父组件实例

 

15 通过ref访问子组件实例或子元素

例如子组件有 <input ref="nameInput"/>  ref相当于定义id
则父组件可以通过 this.$refs.nameInput 访问到该Input节点

 

16 动画过渡效果

vue提供了<transition></transition>实现过渡效果 
如下，当show切换时，p元素会有淡入淡出的动画效果

<transition name="fade">
 <p v-if="show">hello</p>
</transition>