武汉seo外包优化加速
vue组件使用的步骤
- 定义组件
- 注册组件
- 使用组件
定义组件
Vue.extend(options)
其中options和new Vue(options)出入的options对象几乎一样，但是也有不同。
-
创建 el不用写—最终所有组件需要经过一个vm的管理，由vm的el决定服务哪个容器。
-
data必须写成函数—因为组件复用，数据存在引用关系。
Vue创建组件案例 Vue.extend()创建
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>学习Vue组件</h2></div></body><script type="text/javascript">Vue.config.productionTip = false;//创建一个vue实例new Vue({el: "#root",data: {opacity: 1,},});//定义一个vue组件let school = Vue.extend({template: `<div class="demo"><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button> </div>`,data() {return {schoolName: "希望小学",address: "123456@qq.com",};},methods: {showName() {alert(this.schoolName);},},});</script></html>注册组件
- 局部注册：在new Vue时，传入componnets选项
- 全局注册:在Vue.component(‘组件名’，组件)
局部注册案例
<script>//创建vmnew Vue({el: '#root',data: {msg:'你好啊！'},//第二步：注册组件（局部注册）components: {school: school,student: student// ES6简写形式// school,// student}})
</script>
全局注册案例
//注册vue组件Vue.component('school',school)
使用组件
<div id="root"><h2>{msg}</h2><school></school></div>
使用注意点
组件名
-
一个单词
-
首字母小写 school
-
首字母大写 School
-
多个单词
-
kebab-case命名 my-name
-
CamelCase命名 MyName(需要脚手架支持)
组件标签
（需要使用脚手架，否则导致后续标签无法渲染）
组件定义简写
const school = Vue.extend(options) 可简写为：const school = options