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>

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

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

相关文章

探索ONLYOFFICE桌面编辑器8.1:更强大的办公软件(新功能全新详解)

引入 时间到达2024年&#xff0c;办公软件已经成为不可或缺的的一部分。想到办公软件不知道大家首先想到那些产品 office 亦或是 WPS&#xff0c;但一个前者需要购买才能使用完整服务&#xff0c;一个漫天的弹广告不充会员什么都用不了。那难道世面上就没有一块正在好用无广告的…

每天认识:事件和中断

在计算机科学中&#xff0c;事件和中断是两种不同的概念&#xff0c;它们在操作系统和计算机硬件的上下文中有着不同的作用和含义&#xff1a; 事件(Event)&#xff1a; 事件通常指的是系统中发生的一个特定的行为或状态的改变&#xff0c;它可以是由用户操作触发的&#xff0c…

Clonable接口和拷贝

Hello~小伙伴们&#xff01;本篇学习Clonable接口与深拷贝&#xff0c;一起往下看吧~(画图水平有限&#xff0c;两张图&#xff0c;&#xff0c;我真的画了巨久&#xff0c;求路过的朋友来个3连~阿阿阿~~~) 目录 1、Clonable接口概念 2、拷贝 2、1浅拷贝 2、2深拷贝 1、Clon…

Linux学习第52天:Linux网络驱动实验(三):一往(网)情深

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 许久没有更新&#xff0c;的确是最近有点懈怠了。没有任何借口&#xff0c;接受所有的批评。接下来无论如何也要坚持下去&#xff0c;不管处于什么境地、什么原因&am…

免交互 实验

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

解决Java中的数组越界异常的技术

解决Java中的数组越界异常的技术 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java开发中&#xff0c;处理数组越界异常是一项关键的技术挑战。当我们访问…

CesiumJS【Basic】- #015 深度测试对渲染的影响

文章目录 深度测试对渲染的影响1 目标2 实现main.ts深度测试对渲染的影响 1 目标 探究depthTestAgainstTerrain关闭和开启对渲染的影响 2 实现 当 viewer.scene.globe.depthTestAgainstTerrain = true 时,深度测试将与地形进行对比。这意味着所有的几何体都会与地形进行深…

PIL、cv2、numpy,和pytorch(torch)之间的转换

一、单通道图片&#xff08;灰度图&#xff09;的读取和转换 1、OpenCV读取&#xff08;BGR&#xff09;&#xff1a; 因为大多数显示或处理图像的函数都期望图像是BGR格式&#xff08;即Blue-Green-Red&#xff09;&#xff0c;而不是灰度格式。 在OpenCV imread函数图片读取…

QT QML 生成二维码

Qt生成二维码 C版 文章目录 步骤1&#xff1a;安装libqrencode步骤2&#xff1a;创建C类生成二维码步骤3&#xff1a;将C类与QML绑定步骤4&#xff1a;创建QML界面步骤5&#xff1a;配置项目文件总结 在Qt QML中实现二维码生成&#xff0c;可以使用一个C库来生成二维码&#x…

DAMA数据管理各职能总结

数据管理职能目标和原则活动主要交付物角色和职责一级活动二级活动负责角色批准角色贡献角色数据治理&#xff1a;数据资产管理的实际管理和控制&#xff08;计划、监控和提升&#xff09;1.定义、审批、沟通数据战略、政策、标准、架构、流程和度量体系1.1 数据管理计划P1.1.1…

鼠标与键盘交互设计

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在海龟绘图中&#xff0c;也支持与鼠标或键盘的交互操作。它提供了监听键盘按键事件、鼠标事件以及定时器等方法&#xff0c;下面分别进行介绍。 1键…

spark查看日志

Logger 当 Spark 任务已经提交到集群运行后&#xff0c;可以通过以下几种方式查看LoggerFactory输出的日志&#xff1a; Web 界面&#xff1a;在 Spark 任务运行时&#xff0c;可以通过访问 Spark 的 Web UI 来查看日志。通常&#xff0c;可以在浏览器中输入http://<drive…

背包模型——AcWing 423. 采药

背包模型 定义 背包模型是一种常见的算法问题模型&#xff0c;它主要涉及将一些物品放入一个容量有限的背包中&#xff0c;以达到某种最优目标&#xff0c;如最大化价值或最小化重量等。 运用情况 常用于资源分配、项目选择、货物装载等实际问题中。例如&#xff0c;在选择…

AWS云中的VPC启用流日志保存S3(AWS中国云)

问题 需要在AWS中国云中对VPC启用流日志操作。 步骤 创建s3桶 这里设置一个s3桶名&#xff0c;创建即可。如果出现已存在具有相同名称的存储桶错误&#xff0c;就换个桶名再试一试吧。 启用vpc流日志 找到vpc流日志入口操作&#xff0c;如下图&#xff1a; 设置vpc流日志…

『亚马逊云科技产品测评』程序员最值得拥有的第一台专属服务器 “亚马逊EC2实例“

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 引言 自2006年8月9日&#xff0c;在搜索引擎大会&#xff08;SES San Jo…

嵌入式EMC

名词介绍&#xff1a; EMC&#xff1a;兼容&#xff0c;设备间相互兼容在共同环境下工作的能力。包括&#xff1a;EMI和EMS EMI&#xff1a;interference干扰&#xff0c;自身对其他设备的干扰 EMS&#xff1a;susceptibility抗干扰能力 EMS包含以下&#xff1a; 浪涌&…

Java文件操作小项目-带GUI界面统计文件夹内文件类型及大小

引言 在Java编程中&#xff0c;文件操作是一项基本且常见的任务。我们经常需要处理文件和文件夹&#xff0c;例如读取、写入、删除文件&#xff0c;或者遍历文件夹中的文件等。本文将介绍如何使用Java的File类和相关API来统计一个文件夹中不同类型文件的数量和大小。 准备工作…

c++基本数据类型和计算(三)习题讲解

1.【单选题】 int a450; int main() { int a100; { int a 999; std::cout << a; } } A.999 B.100 C.450 解析&#xff1a;这道题考察作用域&#xff0c;本身遵守就近原则&#xff0c;所以选A。 2.【单选题】 int a; { int b 100; } ab<&l…

MySQL 基础概念

MySQL逻辑架构 MySQL 服务器逻辑架构图 最上层的服务并不是MySQL所独有的&#xff0c;大多数基于网络的客户端/服务器的工具或者服务都有类似的架构&#xff0c;比如连接管理、授权认证、安全等等。 大多数MySQL的核心服务都在第二层&#xff0c;包括查询解析、分析、优化、…

手持小风扇品牌有哪些?分享口碑最好的五款手持小风扇

手持小风扇在炎热的夏季成为了许多人解暑的好帮手。它们不仅轻便便携&#xff0c;随时随地都能为我们带来清凉和舒适。然而&#xff0c;市场上手持小风扇的品牌繁多&#xff0c;让人眼花缭乱。为了帮助大家做出更明智的选择&#xff0c;接下来我们将分享口碑最好的五款手持小风…