一 Vue2.x生命周期
https://www.cnblogs.com/L-xmin/p/13031773.html
image.png
image.png
image.png
beforeCreate
此时，组件的data和methods以及页面DOM结构都还没有初始化
image.png
created
此时，组件的data和methods可用。但页面还没被渲染出来，在该函数中，我们经常会发起ajax请求
image.png
beforeMount
此时，模板结构已经在内存中编译完成，但还没有真正渲染到页面上。页面上看不到真实的数据，能看到的只是一个模板而已,仍然无法获得模板中的内容，仍然是一个插值表达式
image.png
mounted
组件创建阶段的最后一个生命周期。此时，页面已经真正渲染好了，用户可以看到真实页面数据。
以上执行完，组件就离开了创建阶段，进入运行阶段。如果用到了一些第三方UI插件，必须在mounted中来初始化插件。
运行中的生命周期函数，会根据data数据的变化有选择性的触发0次或n次
image.png
更新部分：以后当每点一次赞，num就会变化，就会触发下面的两个钩子函数
image.png
beforeUpdate
此时数据是最新的，但页面上呈现的数据还是旧的
updated
页面已经完成了更新，此时data数据是最新的，同时页面上呈现的数据也是最新的。
beforeDestroy
执行该函数的时候，组件即将被销毁但还没有真正销毁，此时组件（data、methods等数据或方法）还可以正常用。
destroyed
组件完成销毁，组件废了
二 使用Vue脚手架进行模块化开发
我们实际在使用vue开发项目的时候，大多使用其模块化的开发环境。我们去做一个后台管理系统，也是通过其模块化的开发环境搭建了一个单页应用，我们会发现项目中实际上只有一个html页面(index.html)，其他所有的功能都是通过编写vue相关的组件(.vue结尾的文件)，来完成最后的功能
image.png
2.1 搭建模块化环境测试
- 全局安装webpack，webpack是一个项目打包工具。-g是指全局安装
npm install webpack -g
- 全局安装vue脚手架
npm install -g vue
npm i -g @vue/cli-init // 如果这行有错误，执行下面一行的代码，如果没有，这行结束直接进行3步骤
npm i npm -g npm i @vue/cli -g
- 初始化vue项目。vue脚手架使用webpack模块初始化一个appname项目
vue init webpack appname
桌面创建项目文件夹名称，如vue-demo，然后进入该文件夹，在文件路径地址上输入cmd，回车就可以在当前目录中打开cmd窗口，在当前目录执行上面的命令。如果出现vue不是内部或者外部命令等错误，使用cnpm或者配置npm路径环境变量
npm config list
image.png
然后打开上面的地址，查看是否有vue.cmd
初始化的时候有几项配置
项目名称，项目描述，作者，vue构建版本（使用standalone），安装vue-router，不适用eslint，不使用单元测试，不安装e2e tests，选择npm为包管理工具
如果一直处于downloading template然后最后超时报错如下：
image.png
是因为github被墙了，无法访问，解决方法：https://www.cnblogs.com/liufqiang/p/13697531.html，按照要求更改后可以正常初始化
image.png
- 启动vue项目
上一步构建完后，再cd进入下一层目录，执行如下的命令来运行脚手架工程
npm run dev
项目的package.json中有scripts，代表我们能运行的命令
image.png
image.png
2.2 vue脚手架工程目录介绍
[图片上传中...(image.png-b2df76-1605495856311-0)]
在 vscode中打开vue-demo项目，可以看到如下目录
image.png
build：build文件夹是与打包工具webpack有关的代码
config：主要是一些配置信息，如项目访问端口号
image.png
node_modules：使用npm install 给项目安装的所有依赖
src：我们以后要写的功能基本都在src目录下，日常只关注src目录
image.png
static：静态资源文件，如图片，字体
index.html：首页内容，只有一个id为app的div
image.png
package.json：npm安装的依赖包的信息，我们每安装一个依赖，在package.json中都会有devDependencies依赖声明
2.3 vue脚手架项目运行流程
- 主入口是index.html，声明简单的id为app的div
- 然后在src目录中有非常重要的文件main.js。main.js就是主程序
image.png
主程序中首先创建了一个vue实例，挂载到了index.html页面的id为app的div，而router就是说使用到了vue的路由（负责页面跳转），router来源于上面的import导入，可以看到是同一目录的导入，我们可以看到router下面的index.js中的路径声明。在index.js中导出了一个组件，但是没有给他起名字，我们在导入的地方main.js导入的时候，import后面跟的就是我们给index.js中导出组件起的名字。上面图里面还导入了一个APP组件，这个是vue的一个单文件组件，元素最终渲染的话是通过指定了一个template，template模板使用了这个APP组件。APP组件长什么样，那么最终index.html页面中id为app的div元素就长什么样
image.png
- 关于APP.vue文件：可以发现内容分为3个部分，一个是template（模板，页面要显示成什么），一个是script（vue实例的methods，data等），一个是style（当前template的样式）。这是一个标准的vue单文件组件
https://cn.vuejs.org/v2/guide/single-file-components.html
模块化开发的时候，我们会写大量的.vue的单模块组件，格式就是上面的3个部分
image.png
上面的router-view是路由视图的意思，意思是上面是图片，下面显示什么，要根据我们访问路径动态决定。默认是// ， 后的/是默认要显示的视图。访问/的定义在route目录的index.js中，访问/，会使用我们名称为HelloWorld的组件，而Helloworld组件从哪来，我们从下图可以看到也是从外面导入的。导入Helloworld的from后面有个@符号，@符号代表当前src整个目录的根目录，然后从src下面的components下找HelloWorld.vue
image.png
- 如果我们想自己编写一个Hello.vue组件，来访问，我们同样在components目录下编写Hello.vue，编写3要素，template，script，style
<template>
<div>
<h1>你好啊，hello，{{name}}</h1>
</div>
</template>
<script>
// 导出vue实例，推荐data写函数的方式,return 一个对象，对象有个name值
export default {
data(){
return {
name:"周杰伦"
}
}
}
</script>
<style>
</style>
组件写好以后，要想使用，而且是路径/hello使用，那么接下来我们需要编写路由，在main.js中，我们可以看到导入的路由都在router目录下，因此我们在router目录下的index.js中添加一个路由path指向访问地址，name是访问path的地址，要展示哪个组件，使用之前都得先导入
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/hello',
name:'Hello',
component:Hello
}
]
})
然后保存，我们访问/hello路径
image.png
然后我们再访问/，会发现又变回了helloworld组件，而我们可以发现上面的图片不变，原因就是因为访问不同的组件只会改变路由视图的部分，不会改变路由视图上面的图片
我们如果想点击一个超链接就去我们的hello组件，那么可以使用如下的写法zai App.vue中
image.png
三 使用Vue整合element-ui
element-ui是一个使用比较广泛的vue组件库，帮我们抽取了常用的如单选框，输入框，按钮之类的各种组件，可以简化我们的开发
3.1 npm安装与引入
i是install的简写
npm i element-ui
安装完后，在我们vue-demo项目的package.json中的依赖列表会列出刚刚安装的element-ui，可以看到是2.14.1版本
image.png
然后，我们在main.js主程序中将element-ui组件以及它的css样式导入。
最后我们需要让vue使用我们的element-ui组件，添加一行代码Vue.use
image.png
未来我们需要用到其他组件库，也是在main.js中采用上述方法导入使用
3.2 使用element-ui组件
3.2.1 简单引入
alt+shift+F：整理代码 vscode快捷键
我们在我们之前编写的Hello.vue组件中使用Elementui，添加一个单选框，单选框组件代码复制下面链接的文档
https://element.eleme.cn/#/zh-CN/component/installation
image.png
如上文档所示，我们修改Hello.vue组件内容，添加单选框，label就是单选框的value值，通过data中设置radio值来默认让某个选中
<template>
<div>
<h1>你好啊，hello，{{ name }}</h1>
<el-radio v-model="radio" label="1">备选项1</el-radio>
<el-radio v-model="radio" label="2">备选项2</el-radio>
</div>
</template>
<script>
// 导出vue实例，推荐data写函数的方式,return 一个对象，对象有个name值
export default {
data() {
return {
name: "周杰伦",
radio: "1"
};
},
};
</script>
<style>
</style>
3.2 简单后台管理界面
在elementui官方文档的基本组件中选择container布局容器，elementui帮我们写好了常见的几个页面布局，我们使用如下的布局，分左右上三部分
image.png
复制template部分代码到App.vue里面，因为页面一进来就是index.html页面，是一个id为app的div，在main.js中配置了在这个div里面加载App.vue组件，相当于一进来就展示的是App.vue的template部分，因此我们将App.vue的template部分完全替换
然后将scripts部分的代码和style部分的代码复制并覆盖之前的App.vue的script和style中的代码
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
// :data就是v-bind:data的缩写，关联到了data里面的tableData数组，然后每一列el-table-column使用prop指定取出数组中每一个对象的哪个元素的值作为显示
// label就是表头显示的字
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
// 返回一个对象，对象这个属性用于展示表中数据
tableData: Array(20).fill(item)
}
}
};
</script>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
修改完后，再次访问，发现效果如下：
image.png
image.png
我们下面去实现点击左侧的选项1，右边显示默认给的用户列表，点击选项2，右边显示hello组件的内容
通过修改el-main标签，el-main就是右边的内容区，是需要根据路径的不容显示不同的内容，因此我们需要将它抽取出来。首先注释掉表格部分内容，然后改为如下
image.png
然后将表格部分内容抽取为一个组件，叫做MyTable组件,MyTable.vue文件
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
然后修改路由，通过点击左侧连接，右边内容页显示具体内容。
左边点击选项1，发送table请求，点击选项2，发送hello请求
修改router目录下的index.js文件，增加路由：
import MyTable from '@/components/MyTable'
{
path: '/table',
name: 'MyTable',
component: MyTable
}
然后修改导航一种分组一的选项1和选项2的index并且开发menu的属性router为true
image.png
image.png
然后再次点击左侧导航1的分组一的选项1和选项2可以看到正确的跳转了
网友评论