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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/103067.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习网络模型绘图模板

一 前言 本期为读者推荐一款名为ML Visuals的机器学习画图PPT模板&#xff0c;ML Visuals 专为解决神经网络画图问题设计&#xff0c;通过提供免费的专业的、科学的和充分的视觉和图形来帮助机器学习社区改善科学传播。目前&#xff0c;ML Visuals 包含了超过100多个的自定义图…

【NLTK系列01】:nltk库介绍

一、说明 NLTK是个啥&#xff1f;它是个复杂的应用库&#xff0c;可以实现基本预料库操作&#xff0c;比如&#xff0c;、将文章分词成独立token&#xff0c;等操作。从词统计、标记化、词干提取、词性标记&#xff0c;停用词收集&#xff0c;包括语义索引和依赖关系解析等。 …

[QCM6125][Android13] 默认关闭dm-verity以及OTA升级校验vbmeta和framework matrix失败问题

问题描述 在user版本增加root权限之后&#xff0c;每次进行remount的时候&#xff0c;总会提示 remount of the / superblock failed: Permission denied remount failed 这时候&#xff0c;需要先关闭dm-verify&#xff0c;重启&#xff0c;再remount&#xff1b;整个过程过于…

LeetCode【128】最长连续序列

题目&#xff1a; 分析&#xff1a; 1、最长连续序列的长度为 y-x1&#xff0c;如1-4&#xff1a;4-11 4 2、不要被这里的On误导&#xff0c;不敢使用双层循环 3、只要找到最小的数值&#xff0c;并由此开始计算&#xff0c;不产生重复计算&#xff0c;则为On 代码&#xf…

Docker简单案例

我们安装完Docker之后就可以练习了. 镜像 案例1-拉取、查看镜像 1&#xff09;首先去镜像仓库搜索nginx镜像&#xff0c;比如 : Docker Hub Container Image Library | App Containerization 搜索我们想要拉取的镜像 , 例如: nginx 复制命令&#xff1a; docker pull nginx …

【数据结构】单链表按位序插入元素e【前插】(带头结点的和不带头结点的)这篇很重要,文字说明比起其他篇是正确的

声明单链表的结构体成员 struct LNode {int data;struct LNode *next; };typedef struct LNode LNode;// 或者: 两者是等价的 typedef struct LNode {int data;struct LNode *next; }LNode;按位序插入元素e&#xff1a;就是在第i个位置插入新结点&#xff0c;数据域为e 以下带…

2023-10-10 mysql-{mysql_rm_db}-失败后回滚-记录

摘要: 2023-10-10 mysql-{mysql_rm_db}-失败后回滚-记录 mysql_rm_db 完整函数代码: /**Drop all tables, routines and events in a database and the database itself.@param thd Thread handle@param db Database name in the case given by userIts alr…

找单身狗2

一个数组中只有两个数字是出现一次&#xff0c;其他所有数字都出现了两次。编写一个函数找出这两个只出现一次的数字。 例如&#xff1a;有数组的元素是&#xff1a;1,2,3,4,5,1,2,3,4,6&#xff0c;只有5和6只出现1次&#xff0c;要找出5和6。 这里我们不妨回忆一下之前找单身…

实现SHELL中的列表和字典效果

很多情况下我们需要有种类型来存储数据&#xff0c;在python中有列表和字典&#xff0c;golang中有切片slice和map&#xff0c;那么在shell中&#xff0c;我们能否实现列表和字典呢&#xff0c;答案是肯定的&#xff0c;下面跟着博哥的示例来一步步掌握在shell中实现列表和字典…

centos7下安装elasticsearch7.8.1并配置远程连接

1、下载安装包 sudo wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.8.1-linux-x86_64.tar.gz 2、解压 sudo tar -zxvf elasticsearch-7.8.1-linux-x86_64.tar.gz 3、添加用户并设置密码 sudo useradd es sudo passwd es # 设置密码 Lida15…

嵌入式系统开发【深入浅出】 EXTI 与 NVIC

目录 CPU 感知外部事件变化的三种方式 中断分三个级别 中断控制器 STM32 的中断和异常 NVIC 中断控制器 NVIC 结构体成员 抢占优先级和响应优先级 简单配置NVIC中断控制器 EXTI 外部中断【中断源级】​ STM32系列微控制器实际上最多有23根外部中断线&#xff08;EXT…

“桥接模式”和“NAT模式”以及“host-only模式(仅主机模式)”

使用虚拟机的时候&#xff0c;我们常看到网络链接配置中&#xff0c;有【桥接】、【NAT】、【仅主机】的选项&#xff0c;今天就来介绍一下这三种网络链接模式。 关于虚拟机中配置网络的内容可以看这篇博客&#xff1a; 深入浅出的介绍一下虚拟机VMware Workstation——part2…

千兆以太网传输层 UDP 协议原理与 FPGA 实现(UDP回环)

文章目录 前言心得体会一、UDP GMII 回环测试工程介绍二、UDP GMII 回环测试工程顶层设计三、UDP GMII 回环测试工程仿真设计四、UDP GMII 回环测试工程仿真波形五、UDP GMII 回环测试工程上板演示前言 经过前面章节的理论讲解和模块设计,相信大家已经对以太网传输以及如何实…

自己一天在家没事就爱折腾

来吃馍馍了&#xff0c;看我自己动手做的花卷&#xff0c;味道一定美极了&#xff0c;哈哈&#xff0c;有没有想吃的呀&#xff01;快来我家&#xff0c;我和你一起分享。

三维地下管线建模软件MagicPipe3D V3.1.3发布

经纬管网建模系统MagicPipe3D V3.1.3持续更新&#xff0c;内容如下&#xff1a; &#xff08;1&#xff09;新增管线流向配置&#xff0c;建模生成带流向箭头管道模型&#xff1b; &#xff08;2&#xff09;新增建模完成后可以直接载入3DTiles或obj模型功能&#xff1b; &a…

5.(vue3.x+vite)v-if与v-show区别

前端技术社区总目录(订阅之前请先查看该博客) 1:效果预览 2:v-if与v-show区别 1、v-if会增删DOM元素。 2、v-show比v-if性能更高,因为v-show只能动态的改变样式(display),不需要增删DOM元素。 3、v-if切换时候回实时的销毁和重建内部的事件、钩子函数等,v-show只会…

基于大规模分布式系统的云原生运维实践

在云计算、大数据、人工智能等新兴技术的推动下,众多行业都在经历一场轰轰烈烈的数字化转型大潮。随着容器技术和编排系统的发展、基础设施不断云化、分布式微服务架构不断演进和敏捷、DevOps等开发理念的带动&#xff0c;应用云化已经是不可逆转的趋势&#xff0c;云原生也成为…

Docker 网络访问原理解密

How Container Networking Works: Practical Explanation 这篇文章讲得非常棒&#xff0c;把docker network讲得非常清晰。 分为三个部分&#xff1a; 1&#xff09;docker 内部容器互联。 2&#xff09;docker 容器 访问 外部root 网络空间。 3&#xff09;外部网络空间…

k8s集群安装v1.20.9后-2-改造部署自己的服务k8sApp,增加istio

1.环境准备: K8s集群,已经实现了k8s-app小例子,可以正常访问。(已包含docker) 在此基础上对项目进行改进,实现istio流量切换。 2.安装部署istio 2.1 安装go 官网下载go和istio的安装包,上传到k8s集群虚拟机上(三个机器都安装) [root@node1 ~]# cd /root/Public/i…

Cisdem Video Player for mac(高清视频播放器) v5.6.0中文版

Cisdem Video Player mac是一款功能强大的视频播放器&#xff0c;适用于 macOS 平台。它可用于播放不同格式的视频文件&#xff0c;并具有一些实用的特性和功能。 Cisdem Video Player mac 中文版软件特点 多格式支持&#xff1a;Cisdem Video Player 支持几乎所有常见的视频格…