Components in several ways

The components components

• Create a separate.vue file and import it

//main.js

import Demo from "./Demo"; // Import this file, also called component

import Vue from "vue/dist/vue.common";

Vue.config.productionTip = false;

const vm = new Vue({
  components: {frank:Demo
  },
  data() {
    return {
      n: 0}; },template: ` < div class = "red" > {{n}} < button @ click = "add" > + 1 < / button > < frank / > / / key < / div > `.methods: {
    add() {
      this.n += 1; }},}). $mount ("#app1");

Copy the code

//Demo.vue
<template>
  <div>
    <div class="red">
      frank
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      n:0}},methods: {add(){
      this.n +=1}}}</script>

<style scoped>
  .red{
    color: red;
  }
</style>
Copy the code

• Create it in main.js

This can be interpreted as generating an instance of template

import Vue from "vue/dist/vue.common";

Vue.config.productionTip = false;

Vue.component("Demo2", {
  template: ` 
      

       demo2
      
 `});const vm = new Vue({
  components: {frank:Demo
  },
  data() {
    return {
      n: 0.array: [1.2.3.4.5.6.7.8]}; },template: ` < div class = "red" > {{n}} < button @ click = "add" > + 1 < / button > < Demo2 / > / / here < hr > {{filter (array)}} < / div > `.methods: {
    add() {
      this.n += 1;
    },
    filter() {
      console.log("Executed.");
      return this.array.filter((i) = > i % 2= = =0);
    },
  },
}).$mount("#app1");

Copy the code