資訊專欄INFORMATION COLUMN
摘要：簡介以前文件的組織是以以及這些文件進行垂直分割的，而中我們以組件為單位構(gòu)造，因此，最好的方式是把這些不同的類型的文件與組件相關(guān)的部分，圍繞組件組合成一個文件即文件，我稱其為水平分割。一個例子這里是官網(wǎng)上一個單文件多層組件的示例。
簡介
以前文件的組織是以.HTML、.js以及.css/less/scss這些文件進行垂直分割的，而Vue中我們以組件為單位構(gòu)造，因此，最好的方式是把這些不同的類型的文件與組件相關(guān)的部分，圍繞組件組合成一個文件即.vue文件，我稱其為水平分割。另外，在中寫模板也比原來的字符串形式的模板方便的多。
在webpack里面要加載*.vue文件，需要下面兩個包
$npm install vue-loader vue-template-compiler
webpack添加Loader配置
{
test: /.vue$/,
use: [
"vue-loader"
]
}
......
resolve: {
extensions: [".js", ".vue"],
alias: {
"Vue": "vue/dist/vue.js"
}
}
webpack的resolve選項，用來配置解析import、require中的路徑的細節(jié)，extensions就是在某文件沒寫擴展名時，默認的尋找擴展名。如import App from "./App"中，沒有App.js就找App.vue。alias是給路徑起個別名，方便一點，如import Vue from "Vue"即表示import Vue from "vue/dist/vue.js"
然后就可以編寫代碼了
{{heading}}
//index.js
import Vue from "Vue"
import App from "./App"
new Vue({
el: "#app-1",
template: "
文件App.vue即所謂的單文件組件，我們看到了模板、樣式和JS是如何水平分割的。
還有要注意的是，頁面原始的將會被組件替換掉。
模板寫在如下內(nèi)容中:
JS寫在如下內(nèi)容中：
css寫在如下內(nèi)容中:
我們在index.js中引用這個App.vue文件組件，這里讓它作為實例#app-1的子組件引入，也可以使用渲染函數(shù)使用它。
一個例子這里是官網(wǎng)上一個單文件多層組件的示例。App2.vue
在子組件BaseInputText.vue中，有如下代碼
這里在無參的v-on中綁定了一個事件對象，該對象中除了有必須的input事件，并與this.$listeners合并，this.$listeners包含了該子組件的所有下層組件（如果有的話）中的自定義事件。
就像示例中所做的那樣，屬性和方法都集中在上層的組件中，這里是TodoList.vue組件，通過Props下發(fā)數(shù)據(jù)到子組件。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93829.html
摘要：兩個同級組件之間傳遞數(shù)據(jù)，通過傳遞數(shù)據(jù)。準備工作，我新建了個文件，分別是實例根組件，包含和組件的父組件，的同級組件父組件向子組件傳遞數(shù)據(jù)，通過傳遞數(shù)據(jù)。 ??Vue 的單文件組件在使用 Vue 時非常常用，所以我們也會經(jīng)常遇到組件之間需要傳遞數(shù)據(jù)的時候，大致分為三種情況： 父組件向子組件傳遞數(shù)據(jù)，通過 props 傳遞數(shù)據(jù)。 子組件向父組件傳遞數(shù)據(jù)，通過 events 傳遞數(shù)據(jù)。 兩...
摘要：但是，面對辣么多的配置文件，還是從開始自己來吧，畢竟我只想打包一個組件。這里想一下我們的需求，我們想要打包一個組件，使用，根據(jù)上面的說明，不難想到還應(yīng)該需要一個可以用來識別并轉(zhuǎn)換文件，一句話，就是把按下面格式的編寫的組件轉(zhuǎn)換為模塊。 對于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項目結(jié)構(gòu)，進行.vue單文件組件的編寫，使用 npm run build命令會從main...
摘要：但是，面對辣么多的配置文件，還是從開始自己來吧，畢竟我只想打包一個組件。這里想一下我們的需求，我們想要打包一個組件，使用，根據(jù)上面的說明，不難想到還應(yīng)該需要一個可以用來識別并轉(zhuǎn)換文件，一句話，就是把按下面格式的編寫的組件轉(zhuǎn)換為模塊。 對于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項目結(jié)構(gòu)，進行.vue單文件組件的編寫，使用 npm run build命令會從main...
摘要：但是，面對辣么多的配置文件，還是從開始自己來吧，畢竟我只想打包一個組件。這里想一下我們的需求，我們想要打包一個組件，使用，根據(jù)上面的說明，不難想到還應(yīng)該需要一個可以用來識別并轉(zhuǎn)換文件，一句話，就是把按下面格式的編寫的組件轉(zhuǎn)換為模塊。 對于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項目結(jié)構(gòu)，進行.vue單文件組件的編寫，使用 npm run build命令會從main...
摘要：本文以及后面相應(yīng)文章，主要是相關(guān)技術(shù)棧來快速的實現(xiàn)單頁應(yīng)用開發(fā)。原文出處其他使用快速開發(fā)單頁應(yīng)用主體結(jié)構(gòu)使用快速開發(fā)單頁應(yīng)用使用快速開發(fā)單頁應(yīng)用登錄頁面使用快速開發(fā)單頁應(yīng)用功能組件與路由組件通信 本文所涉及代碼全在vue-cnode 單頁應(yīng)用，即在一個頁面集成系統(tǒng)中所有功能，整個應(yīng)用只有一個頁面。因為路由的控制在前端，單頁面應(yīng)用在頁面切換時比傳統(tǒng)頁面更快，從而在前端體驗更好。 將邏輯從...
閱讀 803·2021-11-18 10:02
閱讀 3790·2021-09-02 10:21
閱讀 1815·2021-08-27 16:16
閱讀 2122·2019-08-30 15:56
閱讀 2482·2019-08-29 16:53
閱讀 1423·2019-08-29 11:18
閱讀 3032·2019-08-26 10:33
閱讀 2703·2019-08-23 18:34
