尚硅谷Vue视频学习打卡-Vue组件化编程以及Vue脚手架的安装-简要介绍

最新推荐文章于 2024-06-19 20:53:45 发布

捶捶自己

最新推荐文章于 2024-06-19 20:53:45 发布

阅读量223

点赞数 2

分类专栏：浅尝前端之美文章标签： vue.js 学习前端配置环境

本文链接：https://blog.csdn.net/cczj0/article/details/126089412

版权

浅尝前端之美专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue2.0 + Vue3.0 ⭐️

2. Vue 组件化编程

2.1 为什么组件化编程

由于传统方式编写应用，会存在一些问题

依赖关系混乱，不好维护
代码复用率不高

组件的定义就是：

实现应用中局部功能代码和资源的集合

2.2 模块与组件、模块化与组件化

2.2.1 模块

理解：向外提供特定功能的js程序，一般就是一个js文件
为什么：js文件很多很复杂，所以需要模块管理
作用：复用js，简化js的编写，提高js的运行效率

2.2.2 组件

理解：用来实现局部（特定）功能效果的代码集合（html、css、image、audio）
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码、提高运行效率

2.2.3 模块化

当应用中的js都以模块来编写，那么这个应用就是一个模块化应用

2.2.4 组件化

当应用中的功能都是多组件的方式来编写的，那么这个应用就是一个组件化应用

2.3 非单文件组件

理解：一个文件包括n个组件该文件为html文件

注意：

组件中一定不要写el配置项、因为最终所有的组件都要被一个vm所管理，由vm决定el对象
data必须写为函数，避免组件被复用时，数据存在引用关系
进行注册的过程中注意全局注册和局部注册

备注：需要使用template配置组件结构（html）

第一步：创建组件

<script type="text/javascript">
    const school = Vue.extend({
        template:`
        <div>
        	<h2>模板样式</h2>
    	</div>
        `,
        data(){
            return {
                key: 'value',
                key: 'value'
            }
        }
    })
    const student = Vue.extend({
        template:`
        <div>
        	<h2>模板样式</h2>
    	</div>
        `,
        data(){
            return {
                key: 'value',
                key: 'value'
            }
        }
    })
</script>

第二步：注册组件

<script type="text/javascript">
    new Vue({
        el:'#root',
        components:{ // (局部注册)
            school,
            student
        }
    })
</script>

第三步：编写组件标签

<body>
    <div>
        <student></student>
        <school></school>
    </div>
</body>

开启全局注册

<script type="text/javascript">
	Vue.component('student', student);
</script>

2.3. 1 VueComponent

组件本质其实是一个名为VueComponent的构造函数，且不是由程序员来定义的，是由Vue.extend生成的
当我们写出组件名作为标签时，Vue解析会自动帮我们创建该组件名的对象实例并且执行new VueComponent(options)
每次调用Vue.extend 返回的都是一个新的 VueComponent 学过后端的应该很清楚
在组件中的this所指向的是 VueComponent 类似于java的动态绑定

2.3.2 内置关系

prototype 显示原型属性

__proto__ 隐式原型属性

他们都为原型对象的一个属性

内置关系：VueComponent.prototype.\__pro__ === Vue.prototype
在这里插入图片描述

2.4 单文件组件

理解：一个文件只包括一个组件该文件为 vue文件

由于VScode不认识Vue文件，所以推荐一些插件

在这里插入图片描述
注意：vue文件中仅仅有三个高亮模板：template、style、script

vue中的script 需要使用默认暴露（export default），以便于进行 import

3. Vue脚手架安装

Node.js安装（Vue脚手架安装的可选择前置条件）

如果出现：npm WARN config global --global, --local are deprecated. Use --location=global instead.
在这里插入图片描述
这种提示只要将这两个文件中的"prefix -g"修改为"prefix --location=global",保存

如果还有就将剩下的两个npx文件中的prefix -g也进行修改