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是自己定义的组件

javascript 复制代码
<h1 ref="xxx"></h1>
<School ref="xxx"></School>

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

javascript 复制代码
this.$refs.xxx 

5. props配置项

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

5.2. 传递数据:

javascript 复制代码
<Demo name="xxx"/>

5.3. 接收数据:

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

javascript 复制代码
props:['name'] 

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

javascript 复制代码
props:{name:String}

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

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

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

6.mixin(混入)

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

  2. 使用方式 :

第一步定义混合,创建一个js文件

javascript 复制代码
export const a =   {
                            data(){....},
                            methods:{....}
                            ....
                        }

第二步使用混入:

全局混入:

javascript 复制代码
import { a } from "./mixin"     //引入
Vue.mixin(xxx)                  //使用

​ 局部混入:在script中使用

javascript 复制代码
import { a } from "../mixin"         //引入
mixins:['xxx']                      //使用

7.插件

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

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

7.3. 定义插件:

javascript 复制代码
   对象.install = function (Vue, options) {
                    // 1. 添加全局过滤器
                    Vue.filter(....)

                    // 2. 添加全局指令
                    Vue.directive(....)

                    // 3. 配置全局混入(合)
                    Vue.mixin(....)

                    // 4. 添加实例方法
                    Vue.prototype.$myMethod = function () {...}
                    Vue.prototype.$myProperty = xxxx
}

7.4.使用插件:

javascript 复制代码
Vue.use()

8.scoped样式

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

javascript 复制代码
<style scoped></style>
相关推荐
咪库咪库咪1 分钟前
构建交互网站
前端
周星星日记2 分钟前
10.vue3中组件实现原理(上)
前端·vue.js·面试
小华同学ai3 分钟前
6.4K star!轻松搞定专业领域大模型推理,这个知识增强框架绝了!
前端·github
专业抄代码选手6 分钟前
【VUE】在vue中,Watcher与Dep的关系
前端·面试
Lazy_zheng9 分钟前
从 DOM 监听到 Canvas 绘制:一套完整的水印实现方案
前端·javascript·面试
尘寰ya11 分钟前
前端面试-微前端
前端·面试·职场和发展
蘑菇头爱平底锅12 分钟前
数字孪生-DTS-孪创城市-前端实现动态地铁分布线路图
前端·javascript·数据可视化
祯民16 分钟前
AI 时代前端进阶:10分钟入门基于 HuggingFace Transformers 库开源模型私有化部署
前端·aigc
驱动小百科32 分钟前
chrome无法访问此网站怎么回事 分享5种解决方法
前端·chrome·谷歌浏览器·谷歌浏览器无法访问此网站·无法访问此网站