title: template 分离写法
date: 2020-04-29 00:47:12
tags:
Vue.js
categories:
Vue.js

image

第一步分离

const App = {
  template: `
    <div>
      <h2>message</h2>
      <button @click="btnClick">button</button>
      <h2>{{name}}</h2>
    </div>
  `,
  data() {
    return {
      message: "hello world",
      name: "zjh"
    };
  },
  methods: {
    btnClick() {
      console.log("click");
    }
  }
};

const app = new Vue({
  el: "#app",
  template: "<App></App>",
  components: {
    App
  }
});

第二步分离前提

使用webpack模块打包工具

• 如果你使用的是webpack模块打包工具

• 那么想要编译 Vue, 需要安装两个 loader 和相应的 loader 配置

  • vue-loader(14.x 版本开始, 要想使用该 loader 还需要配置一个插件, 或降低版本)
  • vue-template-compiler

使用Vue-CLI脚手架工具

• 如果你使用了Vue-CLI脚手架来构建你的项目

• 那么恭喜你, 你不必为安装和配置各种loader烦恼了, Vue-CLI已经自动帮你完成了这些事情

第二步分离

以 app.vue 文件来进行举例

<template>
  <div class="title">
    <h2>message</h2>
    <button @click="btnClick">button</button>
    <h2>{{ name }}</h2>
    <cpn></cpn>
  </div>
</template>

<script>
  //如果要引用子组件的话在这里进行, 将子组件导入到该文件中
  // 如果你使用Vue-CLI构建项目的话, ".vue"后缀可以省略
  import Cpn from "./Cpn.vue";

  export default {
    // name属性在将来Vue-Router中大有用处
    // 如果你不使用Vue-Router的话, 可以省略
    name: "app",
    components: {
      Cpn
    },
    data() {
      return {
        message: "hello world",
        name: "zjh"
      };
    },
    methods: {
      btnClick() {
        console.log("click");
      }
    }
  };
</script>

<style>
  .title {
    color: blue;
  }
</style>

在 main.js 中使用 app.vue

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')