20231018
文章目录
- Vue 生命周期
- 生命周期案例
- 开源可视化图表
- 工程化开发环境安装
- 根组件（App.vue）
- 普通组件的注册使用
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="@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=".18.0/axios.min.js"></script><script src="@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(''); // 请求数据console.log(res);this.list = res.data.data;},mounted() {document.querySelector("input").focus(); // 获取焦点}});</script>
</body></html>
开源可视化图表
Apache ECharts
工程化开发环境安装
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 // 全局注册Vueponent('XyButton', XyButton)new Vue({render: h => h(App),
}).$mount('#app')
更多推荐
20231018
发布评论