Vue组件化编程以及初始化脚手架

最新推荐文章于 2023-06-28 00:07:21 发布

TA_WORLD

最新推荐文章于 2023-06-28 00:07:21 发布

阅读量192

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56303170/article/details/121044288

版权

Vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

组件化编程以及初始化脚手架

文章目录

组件化编程以及初始化脚手架

非单文件组件 —— 一个文件中包含n个组件（n>1）

单文件组件 —— 一个文件中只包含1个组件

Vue中使用组件的三大步骤

一、定义组件（创建组件）

二、注册组件

三、使用组件（写组件标签）

非单文件组件的三步骤

定义组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎时一样的，但是仍有区别

区别如下：

el不要写，因为最终所有的组件都要经过一个vm的管理，有vm中的el决定服务于哪个容器
data必须写成函数，避免组件被复用时，数据存在引用关系，写成函数形式，被服用的各个数据都是独立的，不会因为一个的改变而发生变化

备注：使用template可以配置组件的结构——HTML

	// 创建一个学生组件
	const student = Vue.extend({
		template:`
			<div>
				<h2>学生名称:{{studentName}}</h2>	
				<h2>学生年龄:{{studentAge}}</h2>	
			</div>
		`,
		data(){
			return{
				studentName:"张三",
				studentAge: 18
			}
		}
	})

注意：在template中写结构的时候，需要在外围添加div进行包裹

注册组件

局部注册：靠new Vue的时候传入components选项

注意：components是有s的，此处容易出错

	// 注册组件
	new Vue({
		el:"#root",
		components:{
			school:school,
			student:student
		}
	})

全局注册：靠Vue.component('组件名', 组件)
```
Vue.component("school", school)
```

编写组件标签

<school></school>

单文件组件的三步骤

定义

创建一个Vue文件，在这个文件写入html css javascript

<template></template>——写入结构（HTML）

<script></script>——写入业务逻辑（JS）

<style></style>——写入样式（CSS）

Student.vue

<template>
    <div>
      <h2>学生姓名：{{studentName}}</h2>
      <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return{
            studentName:"张三",
            age:16
        }
    }
}
</script>

<style>

</style>

School.vue

<template>
  <div>
      <h2>学校名称：{{schoolName}}</h2>
      <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return{
            schoolName:"清华",
            address:"北京"
        }
    }
}
</script>

<style>

</style>

App.vue

<template>
  
</template>

<script>
import School from "./School"
import Student from "./Student"

export default {
    name:App,
    components:{
        School,
        Student
    }
}
</script>

<style>

</style>

注册

main.js

import App from "./App"

new Vue({
    el:"#root",
    components:{
        App:App
    }
})

引用

<body>
	<div id="root">
		<App></App>
	</div>
	<script src="./main.js"></script>
</body>

但是这样子会报错，Cannot use import statement outside a module，这是因为没有使用脚手架，导致在代码中的import出现了问题，不能出现效果

组件的嵌套

	// 创建一个学生组件
	const student = Vue.extend({
		template:`
			<div>
				<h2>学生名称:{{studentName}}</h2>	
				<h2>学生年龄:{{studentAge}}</h2>	
			</div>
		`,
		data(){
			return{
				studentName:"张三",
				studentAge: 18
			}
		}
	})

	// 创建一个学校组件(内嵌学生组件)
	const school = Vue.extend({
		template:`
			<div>
				<h2>学校名称:{{schoolName}}</h2>	
				<h2>学校地址:{{address}}</h2>	
				<student></student>
			</div>
		`,
		components:{
			student:student
		},
		data(){
			return{
				schoolName:"北大",
				address:"北京"
			}
		}
	})

	// 注册组件（内嵌学校组件）
	new Vue({
		el:"#root",
		components:{
			school:school
		}
	})

关于VueComponent

之前创建的school组件的本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需要写<school/>或者<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行：new VueComponent(options)
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
关于this的指向：
1. 组件配置中
  
  data函数、method中的函数、watch中的函数、computed中的函数，它们的this均是 VueComponent实例对象
2. new Vue(options)配置中
  
  data函数、method中的函数、watch中的函数、computed中的函数，它们的this均是 Vue实例对象

组件命名注意点

一个单词组成：

第一中写法（首字母小写）：school
第二种写法（首字母大写）：School

无论首字母大小写，最后经过Vue解析的组件都为首字母大写

多个单词组成：

第一种写法：my-school
第二种写法：MySchool（需要Vue脚手架支持）

脚手架

初始化脚手架

第一步（仅第一次执行）：全局安装@vue/cli

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令行创建项目

vue create xxxx

第三步：启动项目

npm run serve

备注：

如果出现下载缓慢请配npm淘宝镜像：npm config set registry http://registry.npm.taobao.org
Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行：vue inspect > output.js

模块项目结构：

├──node_modules
├──public
│├──favicon.ico:页签图标
│└──index.html:主页面
├──src
│├──assets:存放静态资源
││└──logo.png
││──component:存放组件
││└──HelloWorld.vue
││──App.vue:汇总所有组件
││──main.js:入口文件
├──.gitignore:git版本管制忽略的配置
├──babel.config.js:babel的配置文件
├──package.json:应用包配置文件
├──README.md:应用描述文件
├──package-lock.json：包版本控制文件

TA_WORLD

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化编程以及初始化脚手架

组件化编程以及初始化脚手架文章目录组件化编程以及初始化脚手架Vue中使用组件的三大步骤非单文件组件的三步骤定义组件注册组件编写组件标签单文件组件的三步骤定义注册引用组件的嵌套关于VueComponent组件命名注意点脚手架初始化脚手架非单文件组件 —— 一个文件中包含n个组件（n>1）单文件组件 —— 一个文件中只包含1个组件Vue中使用组件的三大步骤一、定义组件（创建组件）二、注册组件三、使用组件（写组件标签）非单文件组件的三步骤定义组件使用Vue.extend(opti
复制链接

扫一扫