学习Vue第四周笔记：vue组件化编程和vue CLI初始化脚手架

GU-MU-C

已于 2024-04-04 17:40:24 修改

阅读量924

点赞数 9

文章标签： vue.js 学习笔记前端开发语言 javascript

于 2024-04-04 17:39:10 首次发布

本文链接：https://blog.csdn.net/g_xlike/article/details/137326083

版权

Vue组件化编程

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

vue组件化模式，是vue的特点。在学习vue第一周的文章里面就有提到。vue采用组件化模式，提高代码的复用率，让代码更好的可以维护。

传统方式编写应用如图所示：
传统方式编写方式

使用vue组件方式编写方式如图所示：

1.模块
a.理解:向外提供特定功能的js程序，一般就是一个js 文件
b.为什么:js 文件很多很复杂
c.作用:复用、简化js 的编写，提高js 运行效率
2.组件
a.定义:用来实现局部功能的代码和资源的集合
如：(html/css/js/image…)
b.为什么:一个界面的功能很复杂
作用:复用编码，简化项目编码，提高运行效率
3.模块化
当应用中的 is 都以模块来编写的，那这个应用就是一个模块化的应用
4.组件化
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

非单文件件组体件

非单文件组件:一个文件中包含有n个组件
单文件组件:一个文件中只包含有1个组件

基本使用

Vue 中使用组件的三大步骤

1.定义组件
使用 Vue.extend(options)创建，其中options和 new Vue(options)时传入的 options 几乎一
样，但也有点区别.
a.el不要写，因为最终所有的组件都要经过一个v 的管理，由 vm中的 el 才决定服务哪个容器

b.data必须写成函数，避免组件被复用时，数据存在引用关系

2.注册组件
a.局部注册:
new Vue()的时候 options 传入components 选项
b.全局注册:
Vue.component(‘组件名’,组件)

3.使用组件
编写组件标签如:

<school></school>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--第三步骤:使用组件-->
   <student></student>
</div>
</body>
<script>
    /*第一步:定义组件*/
    const student = Vue.extend({
        /*自定义组件时，不要用el属性，
        因为最终所有的组件都是被vm管理，由vm决定要挂载到哪个容器*/
        
      //使用template可以配置组件结构
        template:`
        <div>
            <span>{{name}}</span>
            <span>{{age}}</span>
        </div>
        `,
        /*data要写成普通函数形式，不能写成对象形式，
        因为一个组件被多个地方使用，任何一个地方修改了data对象，
        其他地方也会发生变化*/
       data(){
           return{
               name:'张三',
               age:20
           }
       }
    });
  //第二步：注册组件（全局注册）
  Vue.component('student',student);
    const vm = new Vue({
        el:"#root",
        /*第二步:注册组件(局部注册)*/
        components:{
            student
        }
    });
</script>
</html>

Vue 组件引入步骤?

采用ES6的import … from …语法或CommonJS的require()方法引入组件;

对组件进行注册,代码如下

// 注册
Vue.component('my-component', { template:`
	A custom component!
`})
使用组件<my-component> </my-component>

使用组件

组件注意事项

关于组件名

一个单词组成

第一种写法(首字母小写):school

第二种写法(首字母大写):School

多个单词组成
第一种写法(kebab-case命名):my-school

第二种写法(CamelCase 命名):MySchool(需要Vue 脚手架支持)
备注:
组件名尽可能回避 HTML中已有的元素名称，例如:h2、H2都不行
可以使用 name 配置项指定组件在开发者工具中呈现的名字
关于组件标签
第一种写法:

<school></school>

第二种写法:

<schoo1/>(需要 vue 脚手架支持)

备注:
不使用脚手架时，(会导致后续组件不能渲染）

一个简写方式:

const school=Vue.extend(options)可简写为const school=options

因为父组件 components引入的时候会自动创建

组件的嵌套

<title>组件的嵌套</title>
script type="text/javascript" src="../js/vue.js"></script>
<div id="root"></div>
<script type="text/javascript">
Vue.config.productionTip = false
//定义student组件
const student = Vue.extend({
name: "student',
template:`
<div>
<h4>学生姓名:{{name}}</h4>
<h4>学生年龄:{{age}}</h4>
</div>
`,
data(){return{name:'张三',age:18}}
})
//定义school组件
const school = Vue.extend({
name: 'school',
template:`
<div>
<h3>学校名称:{{name}}</h3>
<h3>学校地址:{{address}}</h3>
<student></student>
</div>
`，
data(){return {name :"学校"address:'江西'}}，
//注册组件(同部)
components:{student}
)
//定义hello组件
const hello = Vue.extend({
template:`<h3>{{msg}}</h3>`,
data(){return {msg:'欢迎来到学校学习!"}}
})
//定义aPp组件
const app = Vue.extend({
template:`
<div>
<hel1o></hello>
<schoolx</school>
</div>
`，
components:{school,hello }
})



//创建vm
new Vue({
e1l:'#root',
'<app></app>'
template:
//注册组件(同部)
components:{app}
</script>

VueComponent

关于 VueComponent

a.school组件本质是一个名为 Vuecomponent 的构造函数,且不是程序员定义的，而是Vue.extend()生成的

b.我们只需要写或，Vue 解析时会帮我们创建 school 组件的实例对象，即 Vue 帮我们执行newVueComponent(options)

c.每次调用 Vue.extend，返回的都是一个全新的VueComponent，
即不同组件是不同的对象

d.关于 this 指向
1.组件配置中 data 函数、methods中的函数、watch中的函数、computed 中的函数它们的this 均是 VueComponent实例对象

2.new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed 中的函数它们的 this均是 vue实例对象

VueComponent 的实例对象，以后简称vc(组件实例对象)Vue的实例对象，以后简称 vm

vue与component的关系

1.一个重要的内置关系:
Vuecomponent.prototype.proto=== Vue.prototype
2.为什么要有这个关系:让组件实例对象 vc可以访问到 Vue原型
上的属性、方法 vue与component的关系

初始化脚手架

说明：
1.Vue脚手架是 vue 官方提供的标准化开发工具(开发平台)
2.最新的版本是 4.x
3.文档 Vue CL
具体步骤：

1.如果下载缓慢请配置 npm 淘宝镜像 npm config set registry http://registry.npm.taobao.org

2.全局安装 @vue/cli npm install -g @vue/cli

3.切换到创建项目的目录，使用命令创建项目 vue create XXX
4.选择使用 vue 的版本
5.启动项目 npm run serve
6.打包项目 npm run build
7.暂停项目 Ctrl+C Vue脚手架隐藏了所有 webpack 相关的配置，若想査看具体的 webpack 配置，请执行vue inspect >output.js

关于不同版本的函数

1.vue.js与vue.runtime.xxx.js的区别

a.vue.js 是完整版的 vue，包含:核心功能+模板解析器
b.vue.runtime.xxx.js 是运行版的 Vue ，只包含核心功能，没有模板解析器
esm 就是ES6 module

2.因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容

vue.config.js 配置文件

vue inspect>output.js可以查看到Vue脚手架的默认配置
使用 vue.config·js 可以对脚手架进行个性化定制，和 package.json 同级目录

GU-MU-C

关注

9
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
学习Vue第四周笔记：vue组件化编程和vue CLI初始化脚手架

使用 Vue.extend(options)创建，其中options和 new Vue(options)时传入的 options 几乎一样，但也有点区别.a.el不要写，因为最终所有的组件都要经过一个v 的管理，由 vm中的 el 才决定服务哪个容器b.data必须写成函数，避免组件被复用时，数据存在引用关系。
复制链接

扫一扫