生命周期
Vue生命周期:一个Vue实例从 创建 到 销毁 的整个过程。
生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁
钩子函数:Vue生命周期过程中,会自动运行一些函数,被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。
代码展示:
<body>
<div id="app">
<h3>{{ title }}</h3>
<div>
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100,
title: '计数器'
},
//1. 创建阶段(准备数据)
beforeCreate() {
console.log("响应式数据准备后之前", this.count);
//准备之前,无法获得数据
},
created() {
console.log("响应式数据准备后之后", this.count);
//this.数据名 = 请求回来的数据
//可以开始发送初始化渲染请求
},
//2. 挂载阶段(渲染模板)
beforeMount() {
console.log("模板渲染之前", document.querySelector('h3').innerHTML);
},
mounted() {
console.log("模板渲染之后", document.querySelector('h3').innerHTML);
//可以开始操作dom了
},
// 3. 更新阶段
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
// 4. 卸载阶段
beforeDestroy() {
console.log("beforeDestroy");
},
destroyed() {
console.log("destroyed");
},
})
</script>
</body>
结果展示:
在创建完成后才能获取到;在渲染完成后才可以开始操作dom
数据更新时:
卸载时:
工程化开发入门
安装vue-cli:
**基本介绍: **
Vue CLI 是 Vue 官方提供的一个全局命令工具。
可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。
- 通过Win + R ,输入 cmd 打开终端
- 输入安装vue cli
输入 vue --version ,检验是否先前已经安装了 vue cli
若未安装,输入 npm install -g @vue/cli 进行安装
- 检验是否安装成功
再次输入 vue --version ,若显示版本号,则安装成功
通过命令创建项目
打开所要项目创建位置(想在哪里创建,就在哪里打开),搜索栏输入 cmd 打开终端,输入 vue create one-project(项目名),回车显示下面样式
通过键盘上下箭头选择要创建的版本,回车
完成项目的创建
运行项目
项目创建完成后,根据提示输入 cd vue-dome (这里的vue-dome是你自己的项目名),进入项目文件夹,然后输入 npm run serve 运行终端, 回车等待运行
运行结束显示,为我们创建了一个名为 localhost:8080 的端口号
接下来我们可以打开浏览器 输入 localhost:8080 回车,打开我们的项目
当显示大V说明我们已经成功打开,若像关闭,可在终端输入 Ctrl + C
组件入门
**组件化:**一个页面可以拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。
好处:便于维护,利于复用 → 提升开发效率。
组件分类:普通组件、根组件。
**根组件:**整个应用最上层的组件,包裹所有普通小组件。
普通组件
组件的创建
在componens文件下以驼峰命名创建以.vue结尾的文件,已完成创建
<template>
<div class="MyHeader">
我是Header
</div>
</template>
<script>
export default {
}
</script>
<style>
.MyHeader{
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background-color: #8064a2;
color: white;
}
</style>
<template>
<div class="MyMain">
我是主体Main
</div>
</template>
<script>
export default {
}
</script>
<style>
.MyMain{
height: 400px;
line-height: 400px;
text-align: center;
font-size: 30px;
background-color: #f79646;
color: white;
margin: 20px 0;
}
</style>
<template>
<div class="MyFooter">
我是底部Footer
</div>
</template>
<script>
export default {
}
</script>
<style>
.MyFooter{
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background-color: #4f81bd;
color: white;
margin: 20px 0;
}
</style>
<template>
<button class="mybutton">通用按钮</button>
</template>
<script>
export default {
}
</script>
<style>
.mybutton {
height: 50px;
line-height: 50px;
padding: 0 20px;
background-color: aquamarine;
border-radius: 5px;
}
</style>
局部组件的使用
- 使用的组件内导入App.vue中的script,并局部注册 components: { 组件名:组件对象 }
- 使用:在template中以 <组件名></组件名> 的方式使用组件
- 效果展示:
全局组件的使用
全局组件与局部组件不同, 全局组件是在main,js中导入, 他的好处就是相同样式代码不需要重复写, 只需要引用注册好的组件即可。
- 导入组件,以及注册: main.js内导入,并全局注册 Vue.component(组件名, 组件对象)
- 使用组件
添加组件名,即可使用
3.效果展示