Vue整合
基础配置：
1.创建：cmd 中 输入 create vue vue_name
启动命令：npm run serve
2.当node_modules(依赖)丢失时通过 npm install 下载 【根据：package-lock.json下载】
3.下载路由 npm i vue-router@3.5.2 -S
main.js导入
// npm install axios 下载axios
import axios from 'axios'
Vue.prototype.request=axios
// https://element.eleme.cn/#/zh-CN/component/pagination#dai-you-bei-jing-se-de-fen-ye
//npm i element-ui -S 下载element-ui
// ElementUI 组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 引入echarts
//下载 npm install echarts@4.9.0
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue使用：
一.js中的区域：
a.data(){} :用于存放变量：除了布尔和数字外 都需要引号
b.methods:{} :用于存放一般的事件包括自定义的function
c.components:{} :用于注册组件
d.mounted(){} :生命周期，用于获取props，data，methods
e.computed:{} :用于计算渲染
f.filters:{} :用于过滤
g.watch: {} :用于监听
h.created(){} : 生命周期，用于获取数据
二.vue原生的渲染：
1.内容渲染指令：
a. v-text：用在标签中，覆盖原有内容
b. {{}}： 插值表达式，直接接收数据的一种方式
c.v-html:可以携带标签，识别标签
2.属性绑定指令:
v-bind:( 简写为 ：)
3.事件绑定
a. v-on:click="" 或者 @click=""
b.事件的修饰符：Ⅰ.@click.prevent 阻止浏览器的默认行为
Ⅱ.@click.once 只触发一次事件
Ⅲ.@click.stop 阻止冒泡
4.双向数据绑定
a. v-model
b. v-model.number: 把内容转为数字类型
c. v-model.trim ： 去除前后空格
d. v-model.lazy 失去焦点后触发同步
5.条件渲染指令
a. v-if v-else-if v-else条件判断
b.显隐： v-if：删除节点 达成显隐 更安全
v-show: 增加display-none
6.列表渲染指令
a. <tr v-for="(item,index) in mems" :key="item.id">
<td> {{index}}+{{item.id}}</td> </tr>
b. v-for 里写入索引index,以便在后端使用
c. key :主键，增加查询效率
7.过滤器
a. html使用 ：<p>{{ message | upperStr | upperStr 3}}</p>
b. 在filters中使用： upperStr(val){} value为 message
8.监听器
a. html 使用： v-model="watch1
b. 在watch使用： watch1(nval,oval){}（ nval 新的值；oval 旧的值 ）
9.计算属性
a. html使用 {{rgb}
b. 在computed 使用 ：
rgb(){
return `rgb(${this.r},${this.g},${this.b})`;
}
10. 在css中 scoped 会防止组件样式冲突
/deep/ h1{color: yellow; } /deep/ 样式穿透 影响子组件
三、组件的使用
1.组件的使用步骤：
a.创建组件
b.导入组件
import ZuJianName from '@/components/ZuJianName.vue';
c.注册组件
在computed 中 ZuJianName ：ZuJianName ，
当组件名和变量名相同可以简写为ZuJianName
d.使用组件 ：
<zu-jian-name></zu-jian-name> 小写，使用 - 拼接
2.路由占位符 : <router-view/>
3. 多个组件只显示一个<component :is="ZuJianName "> </component>
4.父子传值(一个vue在另一个vue里)
父-》子
父：<zi-zu-jian-name :abc="msg"></zi-zu-jian-name >
子：prop接收：与data同级
a. props:['abc']
b. props:{ 'abc':String}
c. props:{abc:{ type:String, default:'ok!' //默认值}}
子-》父：
子：this.$emit('fangda',this.num)
父: html :<zi-zu-jian-name @fangda="handle()"></zi-zu-jian-name>
js: handle(val){ this.fs=val}
5.兄弟传值（没有关系）
a.创建向外界共享vue的js文件，与views同级
b. 传值的vue :
sendMsg(){ bus.$emit('share',this.msg)}
c.接收值的vue：
bus.$on('share',val=>{this.getmsg=val})
6.web缓存
存入：localStorage.setItem ('username',this.username) 页面关闭后数据还存在 不安全
sessionStorage.setItem ('username',this.username) 页面关闭后数据不存在 安全
获取：this.username= localStorage.getItem('username');
this.username= sessionStorage.getItem('username');
四、路由的使用
在路由下载后可使用：
1. 导入依赖 当导入的依赖时node_modules 时直接写依赖的名称
import Vue from 'vue'
import VueRouter from 'vue-router'
2.导入页面组件 导入自己写的文件时必须使用相对路径
import Page1 from '../views/Page1.vue'
import Page2 from '@/views/Page2.vue' @是src文件
3. 配置路由规则
a.重定向 ：从一个vue直接跳到另一个vue
配置：
{
// 使用时路径，自己定义
//path: '/', 当进入是默认进入这个页面
path: '/page1',
// name自己定义
name: 'page1',
// 导入的页面组件名，与导入页面组件的名字一致
component: Page1
},
使用：
router-link 最终会渲染成a标签 to属性会渲染成href属性
<router-link to="/page2"> 跳转到page2</router-link>
b.嵌套路由 ： 相当于在Page1里嵌套了Page2 两个都显示
{
path:'/page1',
// 当配置后无需导入组件
component:()=>import('../views/Page1.vue'),
// 子路径
children:[
// 已经在上面导入组件
{path:'page2',component:Page2}
]
}
使用：
<router-link to="/page1/page2"> 跳转到page2</router-link>
<router-view></router-view> 需要子路由的占位符，多个子路由只用一个占位符
4.跳转路由的其他方式
this.$router.push("/page2"); push：会增加一条历史记录
this.$router.replace("/page2"); replace：不会增加历史记录，而是替换当前的记录
this.$router.go(-1); go:历史记录的前进和后退
this.$router.forward(); forward:历史记录的前一个
this.$router.back(); back:历史记录的后一个
5.全局守卫：防止不经过登录，直接访问重要页面 在router里
to :将要访问的路由信息
from：将要离开的路由信息
next：函数
next()：放行
next('/login')：代表没有权限，强制跳转
next(false):代表没有权限，也不强制跳转
router.beforeEach((to,from,next)=>{
//允许访问/跳转
// 如果
if(to.path=='/main'){
const username=sessionStorage.getItem('username');
if(username){
//允许访问/跳转
next();
}else{
// 不存在不允许访问，跳回登录页面
next('/login');}}else{ next();}})
补充：@1：生命周期
A。组件创建阶段 注意：方法按照顺序依次执行1次！！
beforeCreate：组件实例刚被创建，组件的 props/data/methods都不能使用
created：组件实例刚被创建，组件的 props/data/methods已创建好，处于可用状态。但是组件的模板结构尚未生成！
beforeMount：将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中没有组件的DOM结构。
mounted：将要把内存中的HTML结构，渲染到了浏览器之中。
B。组件运行阶段 注意：数据源发生变化就会执行，执行多次！！
beforeUpdate：将要根据变化过后，最新的数据，重写渲染组件的模板结构。
updated：已经根据最新的数据，完成了组件DOM结构的重新渲染。
C。组件销毁阶段 注意：方法按照顺序依次执行1次！！
beforeDestroy：将要销毁此组件，此时尚未销毁，组件还处于正常工作的状态。
destroyed：组件已经销毁，此组件在浏览器中对应的DOM结构已被完全移除。
结论：
a。如果要在第一时间获取数据，应该在created里进行数据的获取。
b。如果要在第一时间进行dom的操作，应该在mounted方法里进行