生成vue的实例
var vm=new vue({
//这里是选项 他可以包含数据、模板、挂载元素、方法、生命周期钩子等函数
})
实例生命周期(在生命周期里this指向调用它的vue实例)
created在实例被创建后调用
created(){
this.hello();
}
vue2.0生命周期:
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
模板语法（不使用模板可以使用render函数使用JSX语法）
底层实现上Vue将模板编译成虚拟DOM渲染函数，在应用状态改变时，vue计算出重新渲染组件的最小代价并应用到DOM上。
先看怎么用
插值:双大括号!!!!!!必须的 数据改变 大括号内的值也跟着改变
{{msg}}
v-once
如果你想插入一次接下来大括号内的数据不改变 则添加v-once属性
不改变{{msg}}
v-html
{{msg}}效果和相同 ,但是后者是将数据转变为纯文本 不是HTML 为了输出HTML 所以使用v-html
v-bind
大括号不能在HTML属性中使用 要使用v-bind
如果msg为false 移除属性
使用JS表达式
{{msg+1}}
{{msg==true?0:1}}
指令
带有v-前缀
如果msg为true则插入div标签如果msg为false则移除属性，否则显示点击触发函数//双向数据绑定
.....等等 vue还支持自定义指令。后面说。
指令缩写
v-bind:href 或者 v-bind:id 可以缩写为 :href 和:id 就是省略前面的 v-bind
v-on:click 缩写为@click=""
计算属性
computed 计算属性会根据data 的值改变
{{getNewMsg}}
new Vue({
el:'#App',
data:{
msg:'hello'
},
computed:{
getNewMsg:function(){
return this.msg.split('').reverse().join('');
}
}
})
上边代码计算属性只用到了get，没有set。所以我们可以给自己一个set
new Vue({
el:'#App',
data:{
msg:'hello',
text:'word'
},
computed:{
all:{
get:function(){
return this.msg+this.text;
},
set:function(val){
return val+this.msg+this.text
}
}
}
})
然后vm.all="你好" 会返回 你好 hello word
函数
methods也可以实现刚才computed的效果。
{{getNewMsg}}
new Vue({
el:'#App',
data:{
msg:'hello'
},
methods:{
getNewMsg:function(){
return this.msg.split('').reverse().join('');
}
}
})
computed和methods比较
虽然最终的结果相同，但是计算属性基于缓存依赖，只有在他依赖的数据发生改变才会重新计算取值，而methods 每次都会重新计算取值。
wach方法
用于观察VUE实例上的数据变动
{{msg}}
new Vue({
el:'#App',
data:{
msg:'hello',
text:'word',
all:''
},
watch:{
msg:function(){
this.all=this.msg+this.text;
}
}
})
class与style绑定
如果isActive为false 则不显示 active 这个class，否则相反。
class和v-bind:class可以共同使用。
class支持三目运算符
内联样式
还可以绑定到一个对象上
data(){
return{
obj:{
color:'red',
fontSize:'12px'
}
}
}
条件渲染
v-if 、 v-else、v-else-if
大于0等于0小于0
还可以使用template
1111
2222
上边的代码修改msg切换不同的div内容，但是vue是不会重新渲染div标签的。根据就地复用策略，只是替换div里面的内容。如果想每次都重新渲染div标签。需要使用key，key不同则每次重新渲染。
v-if 和 v-show
v-show只是控制display。
v-if有更高的切换消耗，v-show有更高的初始化消耗。
列表渲染
v-for
data(){
return{
parents:"我是",
msg:[
{name:'foo'},
{name:'bar'},
]
}
}
{{parents}}-{{index}}-{{data.name}}
渲染结果: 我是-0-foo 我是-1-bar
事件处理器
使用template的好处
1。通过HTML模板就可以轻松定位JS对应方法
2。不需要JS手动绑定事件，易于测试
3。当viewmodel销毁 所有的事件处理器自动删除，无需手动删除
点击
new Vue({
el:'app',
methods:{
say:function(name,event){
alert(name+'我是vue')
if(event){event.preventDefault}
}
}
})
如果要获取原生DOM事件，需要传入event
事件修饰符
.stop 组件单击事件冒泡
.prevent 提交事件不在重载页面
.capture 使用事件捕获模式
.self 只当在本元素才发生
.once 新增
使用方式:
修饰符可以串联
表单控件
v-model 实现双向数据绑定
{{msg}}
new Vue({
el:'#app',
data:{
msg:'我是默认'
}
})
无论是复选框 单选框 下拉列表 基本上获取到用户选中的值的方式，就是使用v-model到一个数组
如果用户选中，则数组会把选中对象的value值存入数组中。
修饰符
.lazy 取消input事件转为change事件同步
.number 将用户输入的值转为number类型，如果返回NAN，则返回原值
.trim 取消前后空格
使用方式:
组件
注册全局组件
Vue.component('my-component',{
//选项
data:function(){
//在组件里 data 必须是函数，并且不能使用箭头函数
}
})
注册局部组件
通过使用组件实例选项注册，可以使组件在另一个组件中使用
var child={
template:'
我是组件'}
new Vue({
components:{
'my-components ':child
}
})
组件通信
思想：父组件通信子组件，使用props。子组件通信父组件使用自定义事件，通过$on（'事件名称'）监听事件 和 $emit('事件名称') 触发事件。
如果使用vuex，在根组件注册，我们在任意组件中都可以通过$store拿到store对象。如果子组件想要获取到父组件的数据，或者说非父子组件想要拿到彼此的数据，最高效的方式是使用vuex。
但是，还是要说下基本的props用法。
props
Vue.components('child',{
props :['msg'],
template:'
{{msg}}'})
注意：因为HTML不区分大小写，所以在传递props时，驼峰写法要通过短横线隔开
Vue.components('child',{
props:['myProps'],
template:'
{{myProps}}'})
动态props
传递props使用 v-bind,这样父组件修改子组件也得到修改
Vue.components('child',{
props:['msg'],
template:'
{{msg}}'})
字面量语法和动态语法
字面量：
props为 "1" 动态语法:
props为 1
单向数据流
props是单向绑定的，父组件修改影响子组件，但是不能反过来，这是为了防止子组件修改父组件的状态，让数据流难以理解。
可以通过Vuex管理state，这样子就避免了繁琐的props传递。后面会发布VUEX讲解的文章，请关注~
props验证
只用于new创建的实例中，创建实例时传递 props。主要作用是方便测试。
支持类型：string number boolean function object array
props:{
msg:Number，//只检测类型
//检测类型+其他验证
call:{
type:Number,
default:0,
requiredLtrue,
validator:function(val){
return val>=0
}
}
}
自定义事件
使用 v-on 绑定事件
父组件在使用子组件的地方直接用v-on监听子组件触发的事件， 子组件触发事件会触发父组件事件
子组件中要使用this.$emit('事件',参数)
父组件就可以使用 $on去监听
例如 在父组件中：
非父子组件通信
使用一个空的vue实例作为中央事件总栈
var bus=new Vue()
在A组件中触发事件
bus.$emit('a',1);
在B组件创建的钩子中监听事件
bus.$on('a',function(id){
})
slot
在子组件中
我是子组件标题
只有在没分发的内容才显示
在父组件中
这里的内容会替换掉子组件中的slot
渲染结果为
我是子组件标题
这里的内容会替换掉子组件中的slot
具名slot
给slot添加name属性
在子组件中
我是子组件标题
我是具名slot
在父组件中
这里替换掉 name为body的slot
Render函数
不想使用template，也可以用render写JSX。例如根据判断自动生成DOM结构，如果大量的判断用template会有大量的代码，这时候可以用render，使用createElement去创建标签。
这里只写个小用法。
new Vue({
el:"#app",
render:h=>h(App)
})
如果不使用render我们可以这样
new Vue({
el:'#app',
components:{App},
template:'
' })
总之JSX可以使用JS的完全编程能力。详细:http://cn.vuejs.org/v2/guide/render-function.html
自定义指令
有时候我们需要对DOM元素进行底层操作，所以需要自定义事件。
全局注册
例如我们创建v-focus
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
})
局部注册
组件接收一个选项
directives:{
focus:{
//指定的定义
}
}
使用：
自定义指令钩子函数
刚才我们全局定义 用到了 inserted函数，这就是钩子函数。
bind:function(){} //只调用一次，指令第一次绑定到元素时调用。
inserted:function(){} //被绑定元素插入到父节点 调用
update:function(){} //更新时调用
componentUpdated:function(){} //被绑定元素所在模板完成一次更新周期时调用
unbind:function(){} //指令与元素解绑调用
钩子函数参数
el：指令绑定的元素对象
binding:一个obj对象，他包括以下属性：
name:指令名称
value:绑定的值
oldValue:前一个值 只能在update函数和componentUpdate函数中使用
expression:绑定的值是字符串形式 例如 v-demo="1" 为1
arg: 传给指令的值 v-demo:foo arg值为foo
modifiers: 修饰符对象 只能在update函数和componentUpdate函数中使用
vnode:vue编译生成的虚拟节点
oldVnode:上一个虚拟节点
混合mixin
var mixin={
created:function(){
this.hello();
},
methods:{
hello:function(){
console.log("Hello");
}
}
}
var Component=Vue.extend({
mixins:[mixin]
})
如果相同的属性，都会被调用，只是混合对象的钩子将在组件自身钩子之前调用
如果 例如 方法的名字相同，就取组件自身的方法
以上就是vue2.0常用的小点，省略了一些内容。包括像是vue-router、vuex、编写插件等等。
本篇只是总结基础知识点，希望能帮到你。