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.mfbz.cn/a/745003.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第七届IAIC(成都)国际医美产业大会在蓉召开

四川省人民医院新丽美获“中国整形美容协会医疗救助与修复基金-成都市整形修复定点医院”“‘放心美 医无忧’全过程保障示范医院”两块授牌 2024年6月24日&#xff0c;第七届IAIC&#xff08;成都&#xff09;国际医美产业大会暨“医美之都”高峰会议省医院新丽美整形修复基地…

龙芯CPU架构上使用向日葵远程工具

原文链接&#xff1a;龙芯CPU架构上使用向日葵远程工具 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在龙芯CPU上使用向日葵远程控制软件的文章。向日葵是一款强大的远程控制软件&#xff0c;能够帮助用户轻松地实现远程桌面访问和控制。本文将详细介绍如何在龙芯…

Android 11 ,默认授予预置应用/APK 需要的权限,解决permission denied for window type 2003 问题。

写这篇文章的原因是解决了一个APP闪退的问题&#xff0c;闪退的原因是插拔U盘时&#xff0c;注册的广播接收者接收到广播需要弹出一个Dialog询问是否需要打开U盘&#xff0c;这个Dialog设置的是系统级别悬浮窗&#xff0c;没有这个权限&#xff0c;报错导致闪退&#xff0c;下面…

Java-拼接字符串数组(String.join()方法)

问题引入 刷算法题lc2288的时候遇见的一个小细节&#xff0c;记录一下&#xff0c;有兴趣的朋友可以做一下&#xff0c;练习一下哈哈~ 此题需要使用大家都比较熟悉的split方法将句子按照空格拆分为字符串数组。 然后再在数组中对每一个字符串操作&#xff0c;操作完成后要求…

气膜体育馆的使用年限有多少—轻空间

气膜体育馆作为一种新兴的建筑形式&#xff0c;因其独特的结构和功能而备受青睐。它不仅在建设速度、成本控制和环保方面具有显著优势&#xff0c;还在使用年限上展现出良好的性能。轻空间将探讨气膜体育馆的使用年限及其影响因素。 气膜体育馆的基本结构 气膜体育馆主要由膜材…

在数字化营销中如何提高用户参与度和留存率

在当今数字化时代&#xff0c;如何有效地提高用户参与度和留存率成为企业营销的关键课题。蚓链在此为您揭示可采取的一系列重要措施。 在提高用户参与度方面&#xff1a; 其一&#xff0c;通过深入的数据分析洞察用户偏好与行为模式&#xff0c;进而提供高度个性化的内容、精…

录制视频怎么操作?手把手教会你!

在这个互联网科技高速发展的时代&#xff0c;录制视频已经成为了人们生活中一个不可或缺的技能。无论是记录游戏精彩瞬间、制作教程、分享生活趣事&#xff0c;还是进行在线教学&#xff0c;录制视频都是一种非常直观有效的方式。可是录制视频怎么操作呢&#xff1f;本文将介绍…

运行ChatGLM大模型时,遇到的各种报错信息及解决方法

①IMPORTANT: You are using gradio version 3.49.0, however version 4.29.0 is available, please upgrade 原因分析&#xff1a; 因为使用的gradio版本过高&#xff0c;使用较低版本。 pip install gradio3.49.0 会有提示IMPORTANT: You are using gradio version 3.49.…

Javac编译器

Java语言的编译器是一段不确定的操作过程&#xff0c;可能是讲Java文件转变为class文件的过程&#xff0c;也可能是指虚拟机的后端编译&#xff0c;讲字节码转换为机器码的过程&#xff0c;还肯是静态提前编译器直接讲Java文件编译为本地机器代码的过程。 前端编译器&#xff…

DevExpress WPF中文教程:Grid - 如何排序、分组、过滤数据(设计时)?

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

php反序列化漏洞简介

目录 php序列化和反序列化简介 序列化 反序列化 类中定义的属性 序列化实例 反序列化实例 反序列化漏洞 序列化返回的字符串格式 魔术方法和反序列化利用 绕过wakeup 靶场实战 修复方法 php序列化和反序列化简介 序列化 将对象状态转换为可保持或可传输的格式的…

构建家庭NAS之三:在TrueNAS SCALE上安装qBittorrent

本系列文章索引&#xff1a; 构建家庭NAS之一&#xff1a;用途和软硬件选型 构建家庭NAS之二&#xff1a;TrueNAS Scale规划、安装与配置 构建家庭NAS之三&#xff1a;在TrueNAS SCALE上安装qBittorrent 大部分家庭NAS用户应该都会装一个下载工具。本篇以qBittorrent为例&…

如何使得Macos的剪切板感知fileURL并当fileURL被执行paste 动作时 回调到某个监听的函数 从而来填充file content

问题及尝试&#xff1a; 我在做一个跨平台文件拷贝的功能&#xff0c;文件可能是从其他操作系统比如Linux 或者Windows 拷贝到Macos上&#xff0c; 但是我试过所有可以hook NSPasteboard的方法&#xff0c;确实没有找到可以监听macos 剪切板的方法&#xff0c;因为fileURL 确实…

基于STM32设计的智能家居远程调温系统(通过红外线控制空调)_75

文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】ESP8266工作模式配置1.3 设计的意义1.4 开发工具的选择1.5 系统框架图1.6 系统功能总结1.7 原理图二、硬件选型2.1 ESP8266-串口WIFI2.2 STM32F103C8T6开发板2.3 红外学…

YoloV7改进策略:SPD-Conv加入到YoloV7中,让小目标无处遁形

摘要 SPD-Conv是一种新的构建块&#xff0c;用于替代现有的CNN体系结构中的步长卷积和池化层。它由一个空间到深度&#xff08;SPD&#xff09;层和一个非步长卷积&#xff08;Conv&#xff09;层组成。 空间到深度&#xff08;SPD&#xff09;层的作用是将输入特征图的每个空…

文华WH7主图多空预警系统指标公式源码

RSV:(CLOSE-LLV(LOW,9))/(HHV(HIGH,9)-LLV(LOW,9))*100;//收盘价与N周期最低值做差&#xff0c;N周期最高值与N周期最低值做差&#xff0c;两差之间做比值定义为RSV K:SMA(RSV,3,1);//RSV的移动平均 D:SMA(K,3,1);//K值的移动平均 DIFF : EMA(CLOSE,12) - EMA(CLOSE,26); D…

1uH电感SK6615电流1.5A频率2MHz输入5.5V同步降压转换器

SK6615C 1.5A 2MHz 5.5V同步降压转换器 SK6615 SOT23-5封装和丝印LA 描述 该SK6615C是一款高效、DC-DC降压型开关稳压器&#xff0c;能够提供高达1.5A的输出电流。该器件的工作输入电压范围为 2.6V 至 5.5V&#xff0c;输出电压范围为 0.6V 至 VIN。工作频率为2MHz&#xff0c…

神经网路学习7-线性模型

一个最简单的线性模型&#xff0c;w是权重&#xff0c;一般来说会取随机值&#xff0c;然后不断学习直到与预期相同 如此以此取每个值与真实值的差值&#xff0c;即评估误差 即找一个合适的权重w&#xff0c;使得平均误差最小 上面的是针对单个样本的&#xff0c;后面的是对…

30-33、SpringBoot项目部署\属性配置方式\多环境开发(一个文件)\多环境分组(多个文件)

1、打包插件:和springboot的版本保持一致 根pom <build><plugins><!--打包插件--><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>3.1.3</versi…

urfread刷算法题day7|118. 杨辉三角

观察可得&#xff1a;每行第一个和最后一个&#xff0c;都是1. 而且每行的元素个数也是只比上一行多1个 中间的元素计算的时候&#xff0c;值为它上一行相邻两个元素的和。 考验ArrayList基本功 class Solution {public List<List<Integer>> generate(int numRow…