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  数据更新