vue学习（二）组件

组件

组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
简单效果图：

代码：
1、message消息组件：

<template>
<!-- 组件1 动态绑定message数据 -->
  <div id="app-1">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello",
    };
  },
};
</script>`

2、悬停绑定组件：

<template> 
<!--组件2 鼠标悬停查看消息 -->
  <div id="app-2">
      <span v-bind:title="mgs">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
    </div>
</template>

<script>
export default {
  data() {
    return {
      mgs: "页面加载于 " + new Date().toLocaleString(),
    };
  },
};
</script>

3、组件的整合展示：

<template>
  <div id="app">
     <!-- 加载组件的两种表达方式 -->
    <zujian1></zujian1>
    <zujian2 />

    <div id="app-3"> {{message}} </div>
    <div id="app-4">
      <input v-model="message" />
      <button v-on:click="reverseMessage">反转消息</button>
    </div>
  </div>
</template>

<script>
import zujian1 from "./zujian";
import zujian2 from "./ol";

export default {
  components: {
    zujian1,
    zujian2,
  },
  data() {
    return {
      message: "默认数据",
    };
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split("").reverse().join("");
    },
  },
};
</script>