VUE 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
beforeCreate: function () {
console.log('beforeCreatea ’);
},
created: function () {
console.log('createda ' );
},
beforeMount:function(){
console.log('beforeMounta’);
},
mounted:function(){
console.log('mounteda’);
}
VUE 组件
组件是可复用的 vue 实例,说白了就是一组可以重复使用的模板,且带有一个名字。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。至此,我们的组件都只是通过Vue.component全局注册的:
Vue.component('my-component-name', {
// ... options ...
})
定义组件
Vue.component('组件名', {template: '模板内容' });
<template id="temp">
<h1>一级标题{{msg}}</h1>
</template>
Vue.component('组件名', {template: '#id 名' });
组件中的数据
export default {
data: function () {
return {
count:0,
msg:"组件数据"
}
}
}
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。
组件中的函数
methods:{
add:function(){
this.count++;
}
}
组件的使用
<!-- 定义组件 -->
<template id="temp">
<h1 v-on:click="test()">我是组件h1标签{{count}} {{msg}}</h1>
</template>
<div id="app">
<mytemp></mytemp>
<mytemp></mytemp>
</div>
<script type="text/javascript">
/* 定义组件 */
Vue.component('mytemp',//组件名
{
template:"#temp",
/* 组件中的数据 */
data:function(){//data() 也可以
return{
count:0,
msg:"组件消息"
}
},
/* 组件中的方法 */
methods:{
test:function(){//test()
this.count++;
}
}
})
var app = new Vue({
el: "#app"
})
</script>