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方法里进行