一个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>