vue生命周期和组件
1.事件
1）函数内部阻止事件冒泡 e.cancelBubble=true;2）标签内阻止事件冒泡 @click.stop=“show1()”3）键盘事件 keydown 函数中获取键盘编码keyCode4）在标签内直接绑定按键事件 @keyup.13=“show()” @keyup.enter=“show()”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<div @click='fu()'>
父元素
<!--第一种阻止事件冒泡的写法-->
<!--<button @click.stop='zi()'>子元素</button>-->
<button @click='zi($event)'>子元素</button>
</div>
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#out",
methods:{
fu(){
console.log('fu')
},
zi(e){
e.cancelBubble=true;
console.log('zi')
}
}
})
</script>
</html>
一、生命周期
1.钩子函数：指一方面有变动，另一方面立马来处理这些变动的函数称为钩子函数。
每个钩子函数的this指向，必须指向VUE实例化对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<p>{{info}}</p>
<button @click='update()'>更新</button>
<button @click='tap()'>销毁</button>
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#out",
data:{
info:"hello"
},
methods:{
update(){
this.info='hi'
},
tap(){
this.$destroy()//销毁：数据以及事件跟vue实例做一个解绑
}
},
beforeCreate(){//用这个实现的效果是loading图的展示
},
created(){//到这里只是创建完了，并没有挂载节点
console.log(this.info)
},
beforeMount(){//在挂载之前改下数据也是可以的
},
mounted(){//挂载完成以后进行数据的获取，axios请求，关闭loading
console.log(this.$el)
},
beforeUpdate(){
console.log(1)
},
updated(){//data里的数据发生更改，这两个函数就会被触发
console.log(2)
},
beforeDestroy(){
console.log('xiaohui1')
},
destroyed(){//销毁必须调用destroyed的方法才能触发
console.log('xiaohui2')
}
})
</script>
</html>
2.生命周期是什么：
vue实例化对象或组件对象从开始创建到完全销毁的一个过程被称为一个生命周期。
3.为什么要用它以及神魔时候去用它？
因为实例化在创建以及组件在进行构建的过程中要发生一系列的改变，不管是组件数据的变更还是组件移除，都要发生变更，这些变更只能借助生命周期提供的函数进行操作，一旦组件或实例化对象发生变更的时候，需要做一些数据的处理的情况下，需要管理组件成长阶段里的变更，这时候必须要用生命周期进行管理，因为生命周期里提供了钩子函数，方便对于组件以及实例化对象的变更来做处理，所以我们要用到生命周期。
4.如何来用它？
生命周期大体分为四个阶段：四个阶段分别是什么，每个阶段提供的函数是什么，除了这四个阶段意外，因为官方提供的是11个，另外三个钩子函数是干神魔的
二、组件（重中之重）
1.组件是带有结构、样式以及行为的几何体
2.两种写法：
1）全局写法：
// 注册组件，传入一个扩展过的构造器Vue.component('my-component', Vue.extend({ /* ... / }))
// 注册组件，传入一个选项对象（自动调用 Vue.extend）Vue.component('my-component', { / ... */ })
// 获取注册的组件（始终返回构造器）var MyComponent = Vue.component('my-component')
2）私有写法：
vue实例化 中 components { ‘组件名’: 组件内容 }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<h1>组件</h1>
<v-header></v-header>
<v-con></v-con>
<v-footer></v-footer>
</div>
</body>
<script type="text/javascript">
//全局的组件，任何实例化对象都能用
Vue.component('v-header',Vue.extend({
//在这里这样用
template:`<div>
<div>hello</div>
<p>{{str}}</p>
<button @click="tap()">事件</button>
</div>`,
data:function(){//组建的数据存储方式
return{
str:'hi'
}
},
methods:{
tap(){
this.str='hello world'
}
}
}))
//简写
var con=Vue.component('v-con',{
template:'<h1>he组件</h1>',
mounted(){
console.log('组件挂载')
}
})
console.log(con)//组件的本质是一个对象
var vm=new Vue({
el:'#out',
methods:{
},
//私有组件
components:{
'v-footer':{
template:'<h2>私有组件</h2>'
}
}
})
</script>
</html>
三、模板
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
四、用组件封装一个点击登录的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.toast{
position: fixed;
left: 50%;
top:50%;
background: rgba(0,0,0,.35);
padding: 10px;
border-radius: 5px;
transform: translate(-50%,-50%);
color:#fff;
}
</style>
<body>
<div id="out">
<button @click="tap()">toast提示框</button>
</div>
</body>
<script type="text/javascript">
//目的是点完以后把这个组件显示出来
var Toast=Vue.component('Toast',{
template:`<div class="toast" v-if="isshow">
{{text}}
</div>`,
data(){
return{
text:'登陆成功',
isshow:true,
duration:2000//隔多久隐藏
}
}
})
var toast=function(){
let vueToast=new Toast({//vueToast对象作用的范围是新创建的div元素
el:document.createElement("div")
})
//把当前作用的dom元素插入到浏览器里面
document.body.appendChild(vueToast.$el)
//放到body里面调用toast函数这个组件就可以展示了
setTimeout(function(){
vueToast.isshow=false;
},vueToast.duration)
}
var vm=new Vue({
el:"#out",
methods:{
tap(){
toast()
}
}
})
</script>
</html>
网友评论