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, 需要安裝兩個(gè) loader 和相應(yīng)的 loader 配置
-
vue-loader(14.x 版本開始, 要想使用該 loader 還需要配置一個(gè)插件, 或降低版本) vue-template-compiler
-
使用Vue-CLI腳手架工具
如果你使用了Vue-CLI腳手架來構(gòu)建你的項(xiàng)目
那么恭喜你, 你不必為安裝和配置各種loader煩惱了, Vue-CLI已經(jīng)自動(dòng)幫你完成了這些事情
第二步分離
以 app.vue 文件來進(jìn)行舉例
<template>
<div class="title">
<h2>message</h2>
<button @click="btnClick">button</button>
<h2>{{ name }}</h2>
<cpn></cpn>
</div>
</template>
<script>
//如果要引用子組件的話在這里進(jìn)行, 將子組件導(dǎo)入到該文件中
// 如果你使用Vue-CLI構(gòu)建項(xiàng)目的話, ".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')
