vue-组件定义&&注册&&使用

vue组件使用的步骤

  1. 定义组件
  2. 注册组件
  3. 使用组件

定义组件

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>Documenttitle>
    <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: `
      

学校名称:{{schoolName}}

学校地址:{{address}}

`
, data() { return { schoolName: "希望小学", address: "[email protected]", }; }, methods: { showName() { alert(this.schoolName); }, }, });
script> html>

注册组件

  • 局部注册:在new Vue时,传入componnets选项
  • 全局注册:在Vue.component(‘组件名’,组件)

局部注册案例

<script>
	//创建vm
    new 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

你可能感兴趣的:(Vue,vue.js,javascript,前端)