免费的制作网站,好的网页设计网站,网站服务器在哪里,单位网站建设情况说明书组件就是用来实现局部特定功能效果的代码集合#xff0c;为的就是复用编码#xff0c;简化项目编码#xff0c;提高运行效率。
组件分为非单文件组件和单文件组件#xff0c;这里介绍的是非单文件组件。
一、创建组件
创建组件的语法格式如下#xff1a; const 组件名 …组件就是用来实现局部特定功能效果的代码集合为的就是复用编码简化项目编码提高运行效率。
组件分为非单文件组件和单文件组件这里介绍的是非单文件组件。
一、创建组件
创建组件的语法格式如下 const 组件名 Vue.extend({ // 组件的配置项 }) 这里的配置项和new Vue({}) 中的配置项写法是一样的不过不写el配置项。
且data配置项必须使用函数写法。
因为使用对象返回的方式会导致地址引用的问题不同的组件指向的是同一个地址修改的是同一个值。使用函数返回就不会造成这样的问题。
下面创建一个school组件和一个student组件 这里的template配置项中必须使用一个空的div将模板包裹住使用 能够方便对代码进行换行操作。
template里面的写法和在模板中编写的代码一致。 二、注册组件
一局部注册
局部注册组件在new Vue() 中使用components配置项进行注册 new Vue({ components:{ // 组件名 } }) 二全局注册
使用全局注册的组件能在任意模块中使用该组件语法格式如下 Vue.component(组件名, 组件名); 这里我们将student组件注册为全局组件 三、组件使用
直接在模板中引入如下标签 组件名/组件名 四、组件的注意事项
一组件的命名
1. 一个单词
使用小写的单词或者是单词首字母大写如school 或 School
2. 多个单词
每个单词的首字母大写或是每个单词之间使用-连接如MySchool 或 my-school
(必须在脚手架中才能使用使用首字母大写的形式) 二name配置项
使用name配置项可以指定组件在开发者工具中呈现的名字。 三组件标签的写法
1. school/school
2. school/ 注意该写法不使用脚手架的环境下会导致后续组件不能渲染 四创建组件的简写 const 组件名 { // 配置项 } 如下代码是等价的图一是完整写法图二是简写形式
