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