#yyds干货盘点#14.组件对象剖析

浅沫记忆

一、Vue组件对象
1.Vue组件本质上是 VueComponent 对象，而VueComponent对象是 Vue对象的扩展类对象。

Vue组件创建时可以使用任何有效的Vue对象属性和方法（如 data、methods、computed、created、……）。

var c = Vue.component('my-component',{
  template: '<h3>hello world</h3>'
});

2.组件绑定的HTML结构

可以直接在 template 属性中给出字符串形式，也可以使用HTML模板或Script模板形式；组件只允许有唯一一个根元素。
字符串：单引号或双引号，` ` 语法（支持字符串换行）

var c = Vue.component('my-component',{
  template: `
  <div class="rating">
    <span v-for="num in 5">
    <img src="images/star.png">
    </span>
  </div>
  `
});

HTML模板：在HTML中使用 <tmplate></template> 标签给出有效的HTML代码，在创建组件的 template属性中，给出上述<template>标签的id值。

<template id="rating">
  <div class="rating">
    <span v-for="num in 5">
    <img src="images/star.png">
    </span>
  </div>
</template>

var c = Vue.component('rating',{
  template: '#rating'
});

二、组件对象的属性
创建组件时，可以使用任何有效的Vue对象属性，如data属性、computed属性、methods属性等等。

data属性：表示Vue组件可用的响应式数据

必须是函数形式，否则程序出错；
必须在函数中返回独有对象，否则程序会产生对象共享内存的bug。

var c = Vue.component('my-component',{
  template: '.....',
  data: {
  name: 'my-component'
  }
});

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
</div>

computed属性：Vue组件中使用的计算属性
methods属性：Vue组件中使用的自定义方法（函数）
其它属性：生命周期回调方法、过滤器

三、Vue组件对象（HTML代码）

<!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>Vue组件对象剖析</title>
</head>
<body>
  <div id="app">
    <h6>my-component</h6>
    <my-component></my-component>
    <hr>
    <h6>另一个my-component</h6>
    <my-component></my-component>
  </div>
  <template id="my">
    <!-- 组件的html模板中只允许有一个根元素 -->
    <div>
      <div>this is div content</div>
      <p>this is p content from template</p>
      <p>message={{message}}</p>
      <button @click="message = 'update message'">修改message</button>
    </div>
  </template>
  <script src="vue.js"></script>
  <script>
    var data = {
      message: 'global message'
    }
    //创建一个全局组件
    const my = Vue.component('my-component',{
      template: '#my',
      //data属性：当前组件使用的数据信息
      //data属性必须是回调函数形式，回调函数中要返回对象
      //data属性应该返回一个独有对象
      data:function(){
        return {
        message: 'component-message'
        };
      }
      // template: `
      // <div>
      //   <span>this is span content</span>
      //   <p>this is p content</p>
      // </div>
      // `
    });
    //Vue实例对象
    var vm = new Vue({
      el: '#app'
    });
  </script>
</body>
</html>

注：一定要引入Vue.js点击链接下载开发版或生产版本在html中引入即可

[MySQL] #yyds干货盘点#14.组件对象剖析

浅沫记忆 LV3