vue使用方法

var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// `this` 在方法里指當前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以用 JavaScript 直接調用方法
example2.greet() // -> 'Hello Vue.js!'

 

vm.$data是vm的data屬性；
vm.$el是el屬性指向的dom結點；
vm.$watch是監視屬性變化
vm.$mount：掛載dom結點；
beforeCompile：加載模板之前；
compiled：加載模板之后；
ready：完成之后（我猜的）；
beforeDestroy：摧毀之前；
destroyed：摧毀之后；

 

vue全局API

1.extend 構造器
	<div id="mount-point"></div>
	var Profile=Vue.extend({
		template:'<p>{{name}}</p>',
		data:function(){
			return{
				name:"名字"
			}
		}
	})
	new Profile().$mount('#mount-point')

2.Vue.nextTick([callback,context]) 異步更新隊列
	vm.msg="hello"
	Vue.nextTick(function(){
		//DOM更新了
	})

3.Vue.set(object,key,value) 設置的值

4.Vue.delete(object,key) 刪除對象屬性

5.Vue.directive(id.[definition]) 注冊全局指令
	Vue.directive('my-directive',{
		bind:function(){},
		inserted:function(){},
		update:function(){},
		componentUpdated:function(){},
		unbind:function(){}
	})

	Vue.directive('my-directive',function(){
		//這里將會被'bind'和'update'調用
	})

	var myDirective=Vue.directive('my-directive')


6.Vue.filter(id,[definition])  過濾
	Vue.filter('my-filter',function(value){
		//返回處理后的至
		return 
	})

	var myFilter=Vue.filter('my-filter')


7.Vue.component(id,[definition])  注冊組件
	Vue.component('my-component',Vue.extend({

	}));

	var MyComponent=Vue.component('my-component')


8.Vue.use() 引入插件

9.Vue.mixin()

10.Vue.compile(template) 編譯模版字符串
	var res=Vue.complie('<div>{{msg}}</div>')

	new Vue({
		data:{
			msg:'hello'
		},
		render:res.render,
		staticRenderFns:res.staticRenderFns
	})


數據

1.data

2.props 接收父組件數據

3.propsData 創建傳遞，方便測試
	var Comp=Vue.extend({
		props:['msg'],
		template:'<div>{{msg}}</div>'
	})

	var vm=new Comp({
		propsData:{
			msg:'hello'
		}
	})

4.computed 計算屬性
  var vm=new Vue({
  	data:{
  		a:1
  	},
  	computed:{
  		aDouble:function(){
  			return this.a*2
  		},
  		aPlus:{
  			get:function(){
  				return this.a+1
  			}
  		}
  	}
  })


5.methods 方法
	var vm=new Vue({
		data:{
		 	a:1
		},
		methods:{
			click(){
				console.log(this.a)
			}
		}
	})

6.watch 觀察
	var vm=new Vue({
		data:{
			a:1,
			b:2,
			c:3
		},
		watch:{
			a:function(){
				console.log("a改變了");
			}
		}
	})


DOM

1.el

2.template

3.render


生命周期
1.beforeCreate  實例初始化之后

2.created 創建完成之后調用

3.beforeMount 掛載開始關被調用

4.mounted 掛載

5.beforeUpdate 數據更新時調用

6.updated  數據更新