波波烤鸭
波波烤鸭

Vue教程(组件-创建方式)

  本文我们开始来介绍下Vue中的组件，组件是可复用的 Vue 实例，且带有一个名字。

Vue组件

  基础页面如下


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="./lib/vue-2.4.0.js">script>
head>
<body>
    <div id="app">

    div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                
            }
        })
    script>
body>
html>

1.通过extend方式

  我们先通过最原始的方式来实现看看，首先通过Vue.extends方法来定义一个全局组件。template 就是组件将来要展示的HTML内容

 // 1.使用 Vue.extend 来创建全局的Vue组件
 var com1 = Vue.extend({
     template: "
这是个Vue组件
"
 })

  然后通过Vue.component来添加我们的组件

// 2.使用 Vue.component('组件的名称', 创建出来的组件模板对象)
Vue.component("myCom",com1);

注意组件的名称如果采用的是 驼峰命名法，那么在使用组件的时候 大写必须改为 小写 而且要用 “-”连接。 都是小写就没有关系了

Vue教程(组件-创建方式)_第1张图片

Vue教程(组件-创建方式)_第2张图片

当然上面的写法我们也看以简写为如下:

Vue.component("myCom",Vue.extend({
      template: "
这是我们使用的另一个组件
"
  }))

Vue教程(组件-创建方式)_第3张图片

2.简写方式

  第二种创建Vue组件的方式其实是在前面的基础上我们可以简写Vue.extend() 创建全局Vue组件的操作，如下

Vue.component("myCom",{
     template: "
 第二种创建的方式  
"
 })

Vue教程(组件-创建方式)_第4张图片

注意 创建的组件HTML元素只能有一个root标签，如果有多个会报错，如下

Vue教程(组件-创建方式)_第5张图片

Vue教程(组件-创建方式)_第6张图片

用div括起来就可以了
Vue教程(组件-创建方式)_第7张图片

Vue教程(组件-创建方式)_第8张图片

3.template标签

  在上面的例子中我们的组件元素都是直接在template中直接通过字符串来声明的，这种书写的时候没有智能提示，容易出现错误，这时我们可以通过