<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h2 v-bind:class="className">类型绑定</h2>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'helloVue',
className:'redBg'
},
beforeCreate:function(){
console.log('beforeCreate');
console.log(this);
console.log(this.msg);
console.log(this.cilckEvent);
// Vue刚实例化,此时数据data和事件方法methods还未绑定vm对象上
// beforeCreate这个钩子函数可以做ajax请求,对数据进行绑定
},
created(){
console.log('created');
// 数据data和方法methods绑定到vm对象上
// 还没渲染到视图上
console.log(this);
console.log(this.msg);
console.log(this.cilckEvent);
},
beforeMount(){
console.log('beforeMount');
// 渲染之前,根据数据生成的DOM对象是获取不到的
var dom = document.querySelector('.redBg');
console.log(dom); //null
},
mounted(){
console.log('mounted');
// 渲染之后
var dom = document.querySelector('.redBg');
console.log(dom);
},
beforeUpdate() {
// 数据更改,但内容未更改之前
console.log('beforeUpdate');
},
updated:function(){
// 内容已更新完毕
console.log('updated');
},
beforeDestroy() {
// 应用销毁之前
console.log('beforeDestory');
},
destroyed() {
// 应用销毁之后
console.log('destoryed');
},
methods:{
cilckEvent(){
console.log('点击事件');
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
<com v-if="flag"> </com>
</div>
<script>
Vue.component('com',{
template:'<div><h1>{{con}}</h1> <button @click="changeData">修改</button> </div>',
data:function(){
return {
con:'hello component',
}
},
methods:{
changeData:function(){
this.con = 'hello Vue';
}
},
beforeCreate:function(){
console.log('beforeCreate');
// Vue刚实例化,此时数据data和事件方法methods还未绑定vm对象上
// beforeCreate这个钩子函数可以做ajax请求,对数据进行绑定
},
created(){
console.log('created');
// 数据data和方法methods绑定到vm对象上
// 还没渲染到视图上
},
beforeMount(){
console.log('beforeMount');
},
mounted(){
console.log('mounted');
// 渲染之后
},
beforeUpdate() {
// 数据更改,但内容未更改之前
console.log('beforeUpdate');
},
updated:function(){
// 内容已更新完毕
console.log('updated');
},
beforeDestroy() {
// 应用销毁之前
console.log('beforeDestory');
},
destroyed() {
// 应用销毁之后
console.log('destoryed');
},
});
var vm = new Vue({
el:'#app',
data:{
flag:true,
},
})
// 组件可能会多次使用,要返回一个新对象
</script>
</body>
</html>