当前位置: 首页 > news >正文

[前端笔记035]vue2之脚手架vue-cli

前言

  • 本笔记参考视频,尚硅谷:BV1Zy4y1K7SH p61 - p95

简介

  • Vue 脚手架是 Vue 官方提供的标准化开发工具,vue-cli
  • 使用步骤
    1. 如果下载缓慢请配置 npm 淘宝镜像:npm config set registry http://registry.npm.taobao.org
    2. 全局安装@vue/cli:npm install -g @vue/cli
    3. 切换到你要创建项目的目录,然后使用命令创建项目:vue create xxxx
    4. 选择使用vue的版本
    5. 启动项目:npm run serve
    6. 暂停项目:Ctrl+C
  • 目录结构
.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

render 函数

  • 关于不同版本的函数,vue.js 与 vue.runtime.xxx.js的区别:
    1. vue.js 是完整版的 Vue,包含:核心功能+模板解析器
    2. vue.runtime.xxx.js 是运行版的 Vue,只包含核心功能,没有模板解析器
  • 因为 vue.runtime.xxx.js 没有模板解析器,所以不能使用 template 配置项,需要使用 render函数接收到的createElement 函数去指定具体内容

脚手架默认配置

  • Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpakc 配置,请执行:vue inspect > output.js
  • vue.config.js 是一个可选的配置文件,如果项目的(和 package.json 同级的)根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载
  • 使用 vue.config.js 可以对脚手架进行个性化定制,详见配置参考 | Vue CLI

ref属性

  • 被用来给元素或子组件注册引用信息(id的替代者)
  • 应用在html标签上获取的是真实DOM元素,应用在组件标签上获取的是组件实例对象(vc)
  • 使用方式:
    1. 打标识:

    2. 获取:this.$refs.xxx

props配置项

  • 功能:让组件接收外部传过来的数据
  • 传递数据:
  • 接收数据:
    1. 第一种方式(只接收):props:[‘name’]
    2. 第二种方式(限制数据类型):props:{name:String}
    3. 第三种方式(限制类型、限制必要性、指定默认值):
props:{ name:{ type:String, //类型 required:true, //必要性 default:'JOJO' //默认值 } 
}
  • props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据

mixin配置项

  • 功能:可以把多个组件共用的配置提取成一个混入对象
  • 定义混入:在另外的js文件中
//分别暴露
export const mixin1 = { data(){....}, methods:{....} .... }
export const mixin2 ={ ...}
  • 使用混入:
    1. 按需引入定义混入的js文件中暴露的混入
    2. 全局混入:Vue.mixin(xxx)
    3. 局部混入:mixins:['xxx']
  • 组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”,在发生冲突时以组件优先。
  • 同名生命周期钩子将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。

插件

  • 功能:用于增强Vue
  • 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
  • 定义插件:
plugin.install = function (Vue, options) {// 1. 添加全局过滤器Vue.filter(....)// 2. 添加全局指令Vue.directive(....)// 3. 配置全局混入Vue.mixin(....)// 4. 添加实例方法Vue.prototype.$myMethod = function () {...}Vue.prototype.$myProperty = xxxx}

scoped 样式

  • 作用:让样式在局部生效,防止冲突
  • 写法:<style scoped>
  • scoped样式一般不会在App.vue中使用
  • style还有个属性为lang,可以设置为 less/scss,默认CSS,使用less需要先下载相关的loader,如less-loader,注意版本问题

todoList总结

  • nanoid库,用npm安装,用于生成唯一id
  • 组件化编码流程:
  1. 拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突
  2. 实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
    • 一个组件在用:放在组件自身即可
    • 一些组件在用:放在他们共同的父组件上(状态提升)
  3. 实现交互:从绑定事件开始
  • props适用于:
    1. 父组件 ==> 子组件 通信
    2. 子组件 ==> 父组件 通信(要求父组件先给子组件一个函数)
  • 使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的
  • props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做

浏览器本地存储

  • 可以将用户信息存储到浏览器本地存储,sessionStorage和localStorage;前者有效期较短,页面关闭就会丢失,注意是页面不是浏览器会话,所以使用较少;后者,不删不会消失
  • sessionStorage和localStorage为全局变量,都只能存字符串,可以直接打印使用,
  • 两者用法一样sessionStorage.setItem(“数据名字”,“值”)/getItem(“数据名字”)/removeItem(“数据名字”)/clear()

组件自定义事件

  • 一种组件间通信的方式,适用于:==子组件 > 父组件

  • 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)

  • 绑定自定义事件:

    1. 第一种方式,在父组件中:<Demo @atguigu=“test”/> 或
    2. 第二种方式,在父组件中:
<Demo ref="demo"/> 
... mounted(){ this.$refs.demo.$on('atguigu',data) }
  • 若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法
  • 触发自定义事件:this.$emit(‘atguigu’,数据)
  • 解绑自定义事件:this.$off(‘atguigu’),解绑多个传数组
  • 组件上也可以绑定原生DOM事件,需要使用native修饰符
  • 注意:通过this.refs.xxx.refs.xxx.refs.xxx.on(‘atguigu’,回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!

全局事件总线(GlobalEventBus)

  • 一种组件间通信的方式,适用于任意组件间通信
  • 安装全局事件总线:
new Vue({...beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm},...
}) 
  • 使用事件总线:
  • 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
export default {methods(){demo(data){...}}...mounted() {this.$bus.$on('xxx',this.demo)}
}
  • 提供数据:this.bus.bus.bus.emit(‘xxx’,data)
  • 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件

消息订阅与发布(pubsub)

  • 消息订阅与发布是一种组件间通信的方式,适用于任意组件间通信
  • 使用步骤:
    1. 安装pubsub:npm i pubsub-js
    2. 引入:import pubsub from ‘pubsub-js’
  • 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
export default { 
methods(){ demo(data){...} } 
... mounted() { this.pid = pubsub.subscribe('xxx',this.demo) } }
  • 最好在beforeDestroy钩子中,使用pubsub.unsubscribe(pid)取消订阅
  • 提供数据:pubsub.publish('xxx',data)

Vue封装的过渡与动画

  • 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名
  • 图示:
    在这里插入图片描述
  • 准备好样式:
    1. 元素进入的样式:
      • v-enter:进入的起点
      • v-enter-active:进入过程中
      • v-enter-to:进入的终点
    2. 元素离开的样式:
      • v-leave:离开的起点
      • v-leave-active:离开过程中
      • v-leave-to:离开的终点
  • 使用包裹要过度的元素,并配置name属性:
<transition name="hello"> //将v-改成 hello-即可变为专属动画<h1 v-show="isShow">你好啊!</h1>
</transition>
  • 备注:若有多个元素需要过度,则需要使用:,且每个元素都要指定key值
  • 可以使用第三方动画库 animate.css,先npm下载,再import ‘animate.css’,然后在transition标签中使用
<transition-group appearname="animate__animated animate__bounce" //animate.css基础引入enter-active-class="animate__backInUp"  //动画名leave-active-class="animate__backOutUp"	//动画名>

相关文章:

[前端笔记035]vue2之脚手架vue-cli

前言 本笔记参考视频&#xff0c;尚硅谷:BV1Zy4y1K7SH p61 - p95 简介 Vue 脚手架是 Vue 官方提供的标准化开发工具&#xff0c;vue-cli使用步骤 如果下载缓慢请配置 npm 淘宝镜像&#xff1a;npm config set registry http://registry.npm.taobao.org全局安装vue/cli&#…...

《Linux的权限》

本文主要对linux的一些基本权限进行讲解 文章目录前言Linux权限&#xff08;1&#xff09;权限的概念&#xff08;2&#xff09;linux下用户分类(root,普通)(3)linux的文件属性文件属性的分类文件权限修改文件权限1、chmod2、chown和chgrp3、fiile权限的三个重要的问题第一个问…...

js类型转换

类型转换 1.字符串转换 字符串转换在原来值的基础上加上 "" let num 1 num String(num) // "1"String(false) // "false"2.数字转换 在算数函数和表达式中&#xff0c;会自动进行数字转换。其自动完成的数字转换为隐式转换&#xff0c;也可…...

PostMan工具的使用

PostMan工具的使用 1 PostMan简介 代码编写完后&#xff0c;我们要想测试&#xff0c;只需要打开浏览器直接输入地址发送请求即可。发送的是GET请求可以直接使用浏览器&#xff0c;但是如果要发送的是POST请求呢? 如果要求发送的是post请求&#xff0c;我们就得准备页面在页…...

Sentinel 授权规则规则持久化

本篇博客我们来学习授权规则&#xff0c;授权规则是对请求者的一种身份的判断。 1、授权规则 授权规则是对请求者的身份做一个判断。你有没有权限来访问我&#xff1f;那就有人可能会说这个功能&#xff0c;好像以前我们在学习微服务的时候讲过网关他不就是把门的吗&#xff1…...

C#大型HIS医院LIS管理系统源码

▶ 一、实验室信息管理系统&#xff08;LIS&#xff09;是什么&#xff1f; 实验室信息管理系统也就是平时所说的LIS&#xff08;Laboratory Information System&#xff09;系统&#xff0c;其主要服务的对象主要是医院检验科工作人员&#xff0c;也是医院信息化建设必…...

Java基础学习(5)

Java基础学习一 面向对象1.1 介绍对象1.2 设计对象并使用1.2.1定义类的补充注意事项1.3 封装好处:1.3 private关键字1.4 this关键字1.5 构造方法构造方法的注意事项:1.6 标准的JavaBean1.7 对象内存图1.7.1 一个对象的内存图1.7.2 两个对象内存图1.7.两个引用指向同一个对象1.8…...

SpringBoot接口 - 如何生成接口文档之Swagger技术栈

SpringBoot开发Restful接口&#xff0c;有什么API规范吗&#xff1f;如何快速生成API文档呢&#xff1f;Swagger 是一个用于生成、描述和调用 RESTful 接口的 Web 服务。通俗的来讲&#xff0c;Swagger 就是将项目中所有&#xff08;想要暴露的&#xff09;接口展现在页面上&am…...

JavaScript execCommand函数

execCommand函数命令execCommand方法是执行一个对当前文档&#xff0c;当前选择或者给出范围的命令。处理Html数据时常用如下格式&#xff1a;document.execCommand(sCommand[,交互方式, 动态参数]) &#xff0c;其中&#xff1a;sCommand为指令参数&#xff08;如下例中的”2D…...

2023年安徽省中职网络安全跨站脚本攻击

B-4&#xff1a;跨站脚本攻击 任务环境说明&#xff1a; √ 服务器场景&#xff1a;Server2125&#xff08;关闭链接&#xff09; √ 服务器场景操作系统&#xff1a;未知 √ 用户名:未知 密码&#xff1a;未知 1.访问服务器网站目录1&#xff0c;根据页面信息完成条件&am…...

Jmeter之常用断言总结篇

在使用Jmeter进行性能测试或者接口自动化测试工作中&#xff0c;经常会用到的一个功能&#xff0c;就是断言。断言是在请求的返回层面增加一层判断机制&#xff0c;因为请求成功了&#xff0c;并不代表结果一定正确&#xff0c;因此需要判断机制提高测试准确性。本文主要介绍6种…...

Elasticsearch:如何在 Elastic 中实现图片相似度搜索

作者&#xff1a;Radovan Ondas 在本文章&#xff0c;我们将了解如何通过几个步骤在 Elastic 中实施相似图像搜索。 开始设置应用程序环境&#xff0c;然后导入 NLP 模型&#xff0c;最后完成为你的图像集生成嵌入。 Elastic 图像相似性搜索概览 >> 如何设置环境 第一步…...

一起Talk Android吧(第五百二十三回:获取位置信息经验总结)

文章目录 整体概述位置权限与蓝牙权限综合使用特殊机型的使用方法官方建议各位看官们大家好,上一回中咱们说的例子是"如何有效地获取位置权限",这一回中咱们说的例子是" 获取位置信息经验总结"。闲话休提,言归正转, 让我们一起Talk Android吧! 整体概…...

发光立方体效果 html+css

一.话不多&#xff0c;看效果 css简单创意特效&#xff0c;关注我看更多简单创意特效~ 二.实现&#xff08;附完整代码&#xff09; 定义标签&#xff1a; <div class"container"><div class"q1"></div><div class"h2"&…...

READ: Large-Scale Neural Scene Rendering for Autonomous Driving

READ: Large-Scale Neural Scene Rendering for Autonomous Driving &#xff1a;面向自动驾驶的大规模神经场景绘制 门卷积 https://www.jianshu.com/p/09fc8490104d https://blog.csdn.net/weixin_44996354/article/details/117409438摘要&#xff1a;论文提出了一种大规模神…...

Linux环境C语言开发基础

C语言是一门面向过程的计算机编程语言&#xff0c;与C、C#、Java等面向对象编程语言有所不同。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、仅产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。C语言诞生于美国的贝尔实验室&#xff0c;由丹…...

string类(上)

string类&#xff08;上&#xff09;1.标准库中的string类2.string类对象的常见构造①string()②string(const char* s)③string(size_t n,char c)④string(const string&s)⑤string(const string& str,size_t pos,size_t lennpos)⑥string&#xff08;const char* s,s…...

ElasticSearch快速入门详解(亲测好用,强烈推荐收藏)

3.快速入门 接下来快速看下elasticsearch的使用 3.1.概念 Elasticsearch虽然是一种NoSql库&#xff0c;但最终的目的是存储数据、检索数据。因此很多概念与MySQL类似的。 ES中的概念数据库概念说明索引库&#xff08;indices)数据库&#xff08;Database&#xff09;ES中可…...

出入了解——Vue.js

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。座右铭&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石&#xff0c;故能成其高。个人主页&#xff1a;小李会科技的…...

MySQL8 双主(主主)架构部署实战

前言 大家好&#xff0c;我是 沐风晓月 本文收录于《数据库入门到精通系列》专栏&#xff0c; 更多内容可以关注我的csdn博客。 本文主要讲解MySQL主主架构实战,在开始之前需要根据下面的提示来配置环境&#xff1a; Linux基础命令不熟参考&#xff1a; 《linux基本功-基础…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...