Vue
2017-09-01 本文已影响0人
LorenaLu
生命周期(钩子)函数
1、created
2、mounted
3、updated
v-model.lazy 数据变化将在文本框失去焦点时触发,默认是keydown
.trim
.number 转换为数字
<div id="box">
<input type="text" v-model.number="msg">
{{msg}}
</div>
var vm = new Vue({
el:"#box",
data:{
msg : "Hello Vue"
},
created: function(){
console.log("创建成功",this.$el)//undefied
},
mounted :function(){
console.log("挂载成功",this.$el)//<div...>
},
updated:function(){
console.log("重新渲染完成")
}
})
console.log(vm.$el)
4、watch
5、mixins
混合,对于生命周期类函数,不会覆盖都将被执行;
对于 methods 之类的函数,将优先使用组件或实例内的同名函数
总结
v-for、 解决不能识别的问题 :key 、v-model 、v-class 、v-style
v-bind 、:、v-if 、v-else、 v-else-if、v-show
v-html 、v-once 、v-on:click、@click
var vm = new Vue({//根组件
el: "#box",
data: {
msg: "Hello Vue",
},
methods:{},
computed:{},
watch:{},
directives:{},
filters:{},
created:function(){},
mounted:function(){},
beforeUpdate:function(){},
update:function(){},
destroyed:function(){},
components: { //子组件
data: function(){
return {}
},
methods: {},
computed: {},
watch: {},
directives: {},
filters: {},
created: function () { },
mounted: function () { },
beforeUpdate: function () { },
update: function () { },
destroyed: function () { },
}
})
vm.$mount("sel")
vm.$watch("attr",function(){})
vm.$el
vm.$emit(eventName[,params])
vm.$on(eventName,function(){})
npm install -g cnpm --registry=http://registry.npm.taobao.org/
cnpm install -g vue-cli
常用命令:
vue init webpack myapp
cnpm install --save-dev watchpack ajv chokidar schema-utils (丢失包后安装)
cnpm install//脚手架工具依赖的模块
npm run dev
cnpm install --save-dev vuex