Vue生命周期一篇就够了和组件注册和复用功能实现
Posted houzhicongone
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue生命周期一篇就够了和组件注册和复用功能实现相关的知识，希望对你有一定的参考价值。
大家一定要学会看官方的文档，它是一个最好的文档
Vue的生命周期
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="js/vue.min.js"></script>
<body>
<div id="container">
<label v-once>str</label>
<label for="">str</label>
</div>
<script type="text/javascript">
new Vue(
el:"#container",
data:
str:'从前有座山'
,
beforeCreate()
//1.data初始化之前，不可以操作data
,
created()
// 2.data初始化之后执行，模板加载之前，可以修改和获取data中的值
console.log(str);
this.str="山里有座庙";
,
beforeMount()
// 3.模板加载之后，数据初始化(挂载)渲染之前，可以修改和获取data中的值
this.str="庙里有口井";
,
mounted()
// 挂载之后执行，可以对data数据进行修改，但是不会影响v-once数据的渲染
this.str="井里有只蛙";
,
beforeUpdate()
// data数据被修改之后，重新渲染到页面之前
,
updated()
// data数据修改之后，重新渲染到页面之后
this.str="after"
,
beforeDestroy()
,
destroyed()
,
</script>
</body>
</html>
Vue的组件复用
script中
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter',
data: function ()
return
count: 0
,
template: '<button v-on:click="count++">You clicked me count times.</button>'
)
</script>
注意组件复用的data必须是一个函数
body中
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue中
new Vue( el: '#components-demo' )
组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
在Body中加上复用的地方
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="js/vue.min.js"></script>
<body>
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
</body>
以上是关于Vue生命周期一篇就够了和组件注册和复用功能实现的主要内容，如果未能解决你的问题，请参考以下文章