Vue 生命周期
①创建:beforeCreate、created
②挂载:beforeMount、mounted
③更新:beforeUpdate、updated
④销毁:beforeDestroy、destroyed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1>计数器</h1>
<button @click="count--">-</button>
<span>{{count}}</span>
<button @click="count++">+</button>
</div>
<script>
const app = new Vue({
el: "#box",
data: {
count: 100
},
// 1、创建阶段(准备数据)
beforeCreate() {
console.log('beforeCreate 响应式数据准备好之前', this.count);
},
created() {
console.log('created 响应式数据准备好之后', this.count);
// 可以开始发送初始化渲染请求了
},
// 2、挂载阶段(渲染模板)
beforeMount() {
console.log('beforeMount 模板渲染之前');
},
mounted() {
console.log('mounted 模板渲染之后');
// 可以开始操作dom了
},
// 3、更新阶段(修改数据,更新视图)
beforeUpdate() {
console.log('beforeUpdate 数据修改了 视图还没更新');
},
updated() {
console.log('updated 数据修改了 视图已经更新');
},
// 4、卸载阶段(销毁实例)
beforeDestroy() {
console.log('beforeDestroy');
// app.$destroy() // 在浏览器控制台输入 卸载当前项目
},
destroyed() {
console.log('destroyed');
}
});
</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>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
获取焦点:<input type="text">
<ul>
<li v-for="(item,index) in list" :key="item.id">
<div>{{item.title}}</div>
<div>{{item.source}}</div>
<div>{{item.time}}</div>
<img :src="item.img" alt="" style="width: 192px; height: 108px;">
</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#box",
data: {
list: []
},
async created() {
const res = await axios.get('https://hmajax.itheima.net/api/news'); // 请求数据
console.log(res);
this.list = res.data.data;
},
mounted() {
document.querySelector("input").focus(); // 获取焦点
}
});
</script>
</body>
</html>
开源可视化图表
工程化开发环境安装
1、全局安装(一次,以管理员身份打开cmd):yarn global add @vue/cli 或 npm i @vue/cli -g --no-fund
2、查看Vue版本:vue --version
3、创建项目架子:vue create project-name(项目名 不能用中文)
4、启动项目:yarn serve 或 npm run serve (找package.json)
5、语法高亮插件:Vetur
根组件(App.vue)
<template> <!--只能有一个根节点-->
<div class="box" >
<div class="test" @click="fn">Hello world!</div>
</div>
</template>
<script>
export default {
methods:{
fn(){
alert('你好');
}
}
}
</script>
<style lang="less">
// 让style支持less 需要安装less less-loader 依赖包
.box{
width: 300px;
height: 300px;
background-color: aqua;
.test{
width: 100px;
height: 100px;
color: red;
background-color: blueviolet;
}
}
</style>
普通组件的注册使用
1、局部注册:只能在注册的组件内使用
①在components文件夹下创建.vue文件( 快速生成结构)
②在使用的组件内导入并注册后使用
<template>
<div class="app">
<XyHeader></XyHeader> <!-- 使用 -->
</div>
</template>
<script>
import XyHeader from './components/XyHeader.vue' // 导入
export default {
components:{
XyHeader:XyHeader // 注册 可简写XyHeader
}
}
</script>
<style>
.app{
width: 640px;
height: 480px;
background-color: aqua;
margin: 0 auto;
}
</style>
③注意:组件名规范 大驼峰命名法 HmHeader
2、全局注册(main.js)其他跟局部注册都一样
import Vue from 'vue'
import App from './App.vue'
import XyButton from './components/XyButton.vue' // 导入
Vue.config.productionTip = false // 全局注册
Vue.component('XyButton', XyButton)
new Vue({
render: h => h(App),
}).$mount('#app')