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

vue2脚手架笔记总结1

        1.什么是组件

              组件是实现局部代码和功能资源的集合

        2.vue.config.js配置文件

             使用vue inspect > output.js可以查看到Vue脚手架的默认配置,但是在这里面修改不会影响实际的配置,如果需要修改配置需要使用用vue.config.js文件,详情见:https://cli.vuejs.org/zh

        3.关于不同版本的Vue

             vue的原始版本报班核心功能和模板解析器,但是这样在打包的时候会一起打包上模板解析器,白白多占用1/3的空间,所以对vue进行的拆分

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

        4.ref属性

                4.1. 被用来给元素或子组件注册引用信息(id的替代者)
                4.2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
               4.3. 使用方式:
                   (1). 打标识:在html元素或者组件中直接添加,school是自己定义的组件

<h1 ref="xxx"></h1>
<School ref="xxx"></School>

                  (2). 获取:获取的组件是VueComputed的实例对象,标签就是标签

this.$refs.xxx 

        5. props配置项

                5.1. 功能:让组件接收外部传过来的数据

                5.2. 传递数据: 

<Demo name="xxx"/>

                5.3. 接收数据:

                   (1). 第一种方式(只接收):

props:['name'] 

                   (2). 第二种方式(限制接收类型):

props:{name:String}

                   (3). 第三种方式(限制类型、限制必要性、指定默认值):

props:{name:{type:String, //类型required:false, //必要性default:'张三' //默认值}
}

                备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。(例子:data:{a:this.name})

           6.mixin(混入)

                1. 功能:可以把多个组件共用的配置提取成一个混入对象,比如css样式

                2. 使用方式 :
                        第一步定义混合,创建一个js文件                    

export const a =   {data(){....},methods:{....}....}

                        第二步使用混入:
                            全局混入:

import { a } from "./mixin"     //引入
Vue.mixin(xxx)                  //使用

​                            局部混入:在script中使用

import { a } from "../mixin"         //引入
mixins:['xxx']                      //使用

        7.插件 

                7.1. 功能:用于增强Vue,比如监视、过滤、自定义指令等功能可以写入到插件中

                7.2. 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。             

                7.3. 定义插件:

   对象.install = function (Vue, options) {// 1. 添加全局过滤器Vue.filter(....)// 2. 添加全局指令Vue.directive(....)// 3. 配置全局混入(合)Vue.mixin(....)// 4. 添加实例方法Vue.prototype.$myMethod = function () {...}Vue.prototype.$myProperty = xxxx
}

                7.4.使用插件:

Vue.use()

        8.scoped样式

           让样式在局部生效,防止冲突,当我们多个组件中的样式名称相同时就会引用后引入的组件样式,在style中加入scoped就可以让样式局部生效,互不冲突

<style scoped></style>

相关文章:

vue2脚手架笔记总结1

1.什么是组件 组件是实现局部代码和功能资源的集合 2.vue.config.js配置文件 使用vue inspect > output.js可以查看到Vue脚手架的默认配置,但是在这里面修改不会影响实际的配置&#xff0c;如果需要修改配置需要使用用vue.config.js文件&#xff0c;详情见:https://cli.vuej…...

校园巡礼:一周只上四天课,入学即发钱?深圳理工大学,开局即王炸

校园巡礼 | 一周只上四天课&#xff0c;入学即发钱&#xff1f;深圳理工大学&#xff0c;开局即王炸&#xff01; 会议之眼 快讯 目前各省的高考成绩现已陆续揭晓&#xff0c;广东省教育考试院发布了2024年高考录取最低分数线&#xff0c;物理类本科线为442分&#xff0c;历史…...

免交互 实验

免交互 交互&#xff1a;我们发出指令控制程序的运行&#xff0c;程序在接收到指令之后按照指令的效果做出对应的反应。 免交互&#xff1a;间接的&#xff0c;通过第三方的方式把指令传送给程序&#xff0c;不用直接下达指令。 Here document 免交互 这是命令行格式&#…...

Sublime Text 设置

备份 {"font_size": 10,"index_files": true,"font_face": "Courier New","vintage_start_in_command_mode": false,"ignored_packages": ["Vintage"],"word_wrap": "false" }关闭…...

spire.Pdf 将pdf转成image

一、nuget安装 <ItemGroup><PackageReference Include"Spire.PDF" Version"10.6.7" /></ItemGroup> 二、直接上代码 using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Logging; using System; using System.IO;namespace …...

仓颉编程语言 -- 初识(一)

官网 文档 原生智能化 内嵌AgentDSL的编程框架&#xff0c;自然语言&编程语言有机融合&#xff1b;多Agent协同&#xff0c;简化符号表达&#xff0c;模式自由组合&#xff0c;支持各类智能应用开发。 天生全场景 轻量化可缩放运行时&#xff0c;模块化分层设计&#xf…...

前端JS必用工具【js-tool-big-box】学习,数值型数组的正向排序和倒向排序

这一小节&#xff0c;我们说一下前端 js-tool-big-box 这个工具库&#xff0c;添加的数值型数组的正向排序和倒向排序。 以前呢&#xff0c;我们的数组需要排序的时候&#xff0c;都是在项目的utils目录里&#xff0c;写一段公共方法&#xff0c;弄个冒泡排序啦&#xff0c;弄…...

python web框架哪家强?Flask、Django、FastAPI对比

前言 当你掌握了python的基础知识&#xff0c;并且会用和HTML和CSS编写简单的静态网页。现在你只需再掌握一个python web框架的知识&#xff0c;就可以开始编写一个动态的网站了。目前市面比较流程的python web框架有三个flask、Django、FastAPI。接下来我们对比一下。他们三个…...

Mybatis plus:IService接口

一、介绍 在MybatisPlus框架中&#xff0c;IService接口扮演着重要的角色。作为一个通用的服务接口&#xff0c;IService定义了一系列方法&#xff0c;包括查询、插入、更新、删除等。这些方法的定义使得在服务层进行数据库操作变得更为便捷和高效。 IService 接口是一个泛型接…...

时序分析基本概念介绍——min pulse width 最小脉冲宽度

文章目录 前言一、什么是 min pulse width&#xff1f;二、为什么检查 min pulse width&#xff1f;三、如何设置 min pulse width约束&#xff1f;1. 在sdc里面定义2. library里面定义 四、如何检查 min pulse width&#xff1f;五、如何修复 min pulse width&#xff1f;总结…...

PHP原生代码生成pdf---解决中文乱码问题

github地址 尝试了使用composer下载FPDF或者FPDI&#xff0c;但是无法解决中文乱码问题。只有使用这个github上的中文包才可以&#xff0c;那俩没必要下。 直接上代码(这里并没有使用任何框架) require(./fpdf/chinese.php);//生成pdf$pdf new PDF_Chinese();$pdf->AddPage…...

智慧车库管理系统

摘 要 随着城市化进程的不断加快&#xff0c;私家车数量的快速增长给城市交通带来了巨大的挑战&#xff0c;停车问题成为城市交通管理中的一大难题。车辆停车时&#xff0c;在停车场寻找停车位耗时过久&#xff0c;不仅仅浪费用户的时间&#xff0c;还可能引起交通拥堵。城市停…...

每日新闻掌握【2024年6月26日 星期三】

2024年6月26日 星期三 农历五月廿一 大公司/大事件 OpenAI将终止对中国提供API服务 从6月24日晚间开始&#xff0c;已有多名用户收到了来自OpenAI的邮件。该邮件表示&#xff0c;“我们的数据显示您的组织来自OpenAI目前不支持的地区的API流量。”邮件进一步表示&#xff0c;…...

InVEST实践及在生态系统服务供需、固碳、城市热岛、论文写作等实际项目中应用

白老师&#xff08;研究员&#xff09;&#xff1a;长期从事生态系统结构-格局-过程-功能-服务的变化与响应关系等研究工作,重点围绕生物多样性、生态系统服务与价值等&#xff0c;构建生物地球化学模型和评价指标体系&#xff0c;为城市、区域和自然保护区的可持续发展和生态环…...

慧科新闻搜索研究数据库的使用指南及个人获取途径

《慧科新闻搜索研究数据库》WiseSearch由慧科讯业有限公司出品。WiseSearch是具有新闻搜索/浏览、对比分析等功能的一站式新闻搜索平台&#xff1b;内容包括1200种报刊和8000 网站的新闻资讯&#xff0c;平面媒体涵盖全国综合大报、党委机关报、都市报、行业报刊媒体&#xff0…...

SpringBoot学习03-[Spring Boot与Web开发]

Spring Boot与Web开发 RestTemplateMockMvc在SPringBoot中使用 SpringBoot整合swagger2SpringBoot的springmvc自动配置底层原理包含ContentNegotiatingViewResolver和BeanNameViewResolverContentNegotiatingViewResolverBeanNameViewResolver 支持提供静态资源&#xff0c;包括…...

数据恢复篇:如何恢复丢失的Android短信?

许多用户发现自己处于重要短信意外从Android手机中删除的情况。幸运的是&#xff0c;有一些行之有效的方法可以在没有root的情况下恢复已删除的短信Android&#xff0c;这可以成为救命稻草。这些技术不需要深厚的技术知识&#xff0c;也不需要损害设备的安全性。为了帮助您摆脱…...

数据结构历年考研真题对应知识点(栈)

目录 3.1栈 3.1.1栈的基本概念 【栈的特点&#xff08;2017&#xff09;】 【入栈序列和出栈序列之间的关系(2022)】 【特定条件下的出栈序列分析(2010、2011、2013、2018、2020)】 3.1.2栈的顺序存储结构 【出/入栈操作的模拟(2009)】 3.1栈 3.1.1栈的基本概念 【栈…...

BarTender版软件下载及安装教程

​根据行业数据显示强大的配套应用软件甚至能够管理系统安全性、网络打印功能、文档发布、打印作业记录等&#xff0c;为满足不同的需要和预算&#xff0c;BarTender 提供四个版本&#xff0c;每个都拥有卓越的功能和特性。根据软件大数据显示多国语言支持&#xff1a;轻松设计…...

Python 中从字典中提取所有值到列表

目录: 使用 keys() 方法使用 values() 方法使用 items() 方法使用 * 解包使用列表推导式使用 lambda 函数有时候,在使用 Python 字典时,只关心获取字典的值而不关心字典的键。可以使用多种方法从字典中获取所有的值。 使用 keys() 方法 Python 字典(Dictionary) keys() 方…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

鸿蒙Navigation路由导航-基本使用介绍

1. Navigation介绍 Navigation组件是路由导航的根视图容器&#xff0c;一般作为Page页面的根容器使用&#xff0c;其内部默认包含了标题栏、内容区和工具栏&#xff0c;其中内容区默认首页显示导航内容&#xff08;Navigation的子组件&#xff09;或非首页显示&#xff08;Nav…...