一、生命周期
1、概述
1、Vue生命周期分为四个阶段:
创建------挂载------更新------销毁
(1)创建:将用户提供的普通数据转换成响应式数据------响应式处理
(2)挂载:操作DOM渲染模板
(3)更新:修改数据,更新视图(会多次执行)
(4)销毁:销毁实例
2、生命周期函数(钩子函数)
2.1、概念
1、在Vue生命周期中,会自动运行一些函数,被称为生命周期钩子,让开发者可以在特定阶段运行自己的代码
2.2、使用
javascript
1、语法
//创建阶段
beforeCreate(){
//响应式数据准备好之后要做什么
},
created(){
//响应式数据准备好之后要做什么
},
//挂载阶段
beforeMount(){
//模板渲染之前
},
mount(){
//模板渲染之后
}
...
2.3、示例
javascript
1、created
const app = new Vue({
el: '#app',
data: {
list:[],
},
async created(){
//当响应式数据准备好了后,就直接将数据显示出来
const res = await axios.get('http://hmajax.itheima.net/api/news');
console.log(res.data.data);
this.list = res.data.data;
},
})
2、mounted
const app = new Vue({
el: '#app',
data: {
words: ''
},
mounted(){
//当dom渲染完成后,直接让输入框获取焦点
document.querySelector('#inp').focus()
//.focus:获取焦点
}
})
3、小黑记账清单------案例
javascript
const app = new Vue({
el: '#app',
data: {
list: [],
name:'',
price:'',
},
computed:{
sum(){
return this.list.reduce((sum,item) => sum+item.price,0)
}
},
methods:{
async getList(){
//将需要反复调用的获取数据封包
const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
params:{
creator:'谷歌',
}
})
console.log(res.data.data);
this.list = res.data.data;
},
async delList(id){
const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`);
console.log(res);
this.getList();
},
async add(){
const res = await axios.post('https://applet-base-api-t.itheima.net/bill',{
//post不需要加data之类的,只有用get或者delete时需要
creator:'谷歌',
name:this.name,
price: this.price,
})
//console.log(res);
this.getList();
}
},
async created(){
//运用生命周期钩子,使一启动页面就获取数据
this.getList();
}
})
------------图表功能以后再来实现吧------------
二、工程化开发和Vue CLI脚手架
1、概念
1、传统开发模式:基于html/css/js,直接引入核心包开发
2、工程化开发:基于构建工具(例如:webpack)的环境中开发Vue
问题:缺乏统一标准
3、Vue CLI脚手架:Vue官方提供的一个全局命令工具,可以帮助我们快速创建一个 开发Vue项目的标准化基础架子,且集成了webpack配置
2、使用步骤
javascript
1、全局安装:yarn global add@vue/cli 或者 npm i @vue/cli -g
2、查看Vue版本:vue --version
3、创建项目架子:vue create project-name(项目名称)
//进入到要创建项目的目录中,右键空白处,选择在终端中打开,然后输入命令创建
4、启动项目:yarn serve 或 npm run serve(找package.json)
//要进到项目目录中启动
3、目录认识
javascript
1、main.js
//用于导入APP.vue,基于App.vue创建结构渲染index.html
render: h => h(app)
相当于
render:(createElement) => {
return createElement(App)
}
4、组件化开发 & 根组件
1、组件化:将一个页面拆分成一个个组件,每个组件有着自己独立的结构、样式、行为。
好处:便于维护,利于复用
2、组件分为:普通组件和根组件
3、根组件:整个应用最上层的组件,包裹所有普通小组件
4、普通组件的注册使用
javascript
1、局部注册:只能在注册的组件内使用
1.1、创建.vue文件(三个组成部分)
1.2、在使用的组件内导入并注册
2、全局注册:所有组件内都能使用
使用:当成html标签使用'<组件名><组件名>'
3、详细步骤
(1)在components文件夹下新建vue文件,在里面设置组件内容
(2)在根组件中引入组件
import 组件名=名 from '组件文件路径'
(3)为组件命名
export default {
components:{
'组件名'组件,
}
}
(4)使用
<组件名></组件名>
5、全局组件的注册使用
javascript
1、全局注册
1.1、创建.vue文件
1.2、main.js中进行全局注册
2、详细步骤
1、导入文件
import Hmbutton from './components/HmButton.vue';
2、为组件命名
Vue.component(组件名',组件对象)