el 和 template 同時出現(xiàn)

• 當一個實例同時擁有 el 和 template, Vue 在編譯的時候
  • Vue 會把 template 的實例全部替換到 el 掛載的內容上, 包括掛載的標簽也會被替換掉

<div id="app"></div>

<script>
  const app = new Vue({
    el: "#app",
    template: `
      <div>
        <h2>message</h2>
        <button @click="btnClick">button</button>
        <h2>{{name}}</h2>
      </div>
    `,
    data: {
      message: "hello world",
      name: "zjh"
    },
    methods: {
      btnClick() {
        console.log("click");
      }
    }
  });
</script>

• 最終<div id="app"></div>會被替換成 template 中的模板實例