項(xiàng)目目錄結(jié)構(gòu)：

1.在一個(gè)項(xiàng)目中一般的目錄結(jié)構(gòu)為：my_project------------項(xiàng)目文件夾|____src--------------------------------存放人可以看懂的源代碼，具備一定功能劃分，mvc思想|____dist-------------------------------存放真實(shí)上線的代碼（減少請求、混淆代碼）|____webpack.config.js------------------把src下面的代碼打包生成dist下的代碼， 1. 命令行(終端)輸入：webpack ，立即讀取webpack.config.js文件，并生成代碼到dist文件夾中，此為生產(chǎn)時(shí)使用 | 2.測試時(shí)使用：webpack-dev-server運(yùn)行src下面的代碼，虛擬出build.js進(jìn)行測試。 |____package.json-----------------------包管理文件，管理項(xiàng)目所依賴的包，供npm init初始化使用|____node_module------------------------依賴的包2.使用腳手架vue-cli初始化的項(xiàng)目中基本文件結(jié)構(gòu)：build------------打包的配置所在的文件夾|____build.js--------------------------------構(gòu)建生產(chǎn)版本,打生產(chǎn)的包|____check-versions.js-----------------------|____dev-client.js---------------------------|____dev-server.js---------------------------|____utils.js--------------------------------|____vue-loader.conf.js----------------------|____webpack-base.conf.js--------------------webpack打包核心配置|____webpack-dev.conf.js---------------------|____webpack-prod.conf.js--------------------config-----------webpack的配置文件夾|____dev.env.js------------------------------|____index.js--------------------------------核心配置，和webpack-base.conf.js基本一樣，webpack把他分開架構(gòu)|____prod.env.js-----------------------------src--------------開發(fā)項(xiàng)目的源碼文件夾|____assets----------------------------------靜態(tài)資源文件夾|____components------------------------------組件文件夾|____router----------------------------------路由文件夾|____App.vue---------------------------------入口組件，后綴為.vue的文件都是組件|____main.js---------------------------------項(xiàng)目入口文件static-----------靜態(tài)資源文件夾|____.gitkeep--------------------------------|____.babeirc--------------------------------es6解析的配置,開發(fā)ES6項(xiàng)目需要加這個(gè)配置文件 或者 在 webpack中代碼配置|____.editorconfig---------------------------編輯器的配置|____.gitignore------------------------------配置Git提交時(shí)要忽略的文件|____.postcssrc.js---------------------------html添加前綴的配置|____index.html------------------------------單頁面的入口文件|____package.json----------------------------項(xiàng)目的基本配置，可以得知項(xiàng)目的基礎(chǔ)配置，如包的版本號(hào)之類的|____README.md-------------------------------說明文檔

過濾器：

1.vue中沒有提供內(nèi)置過濾器，但是可以自定義過濾器，過濾器：把結(jié)果處理后渲染。2.過濾器分為：組件內(nèi)的過濾器 和 全局過濾器1.組件內(nèi)的過濾器：export default中的filters對象屬性，key就是過濾器名，value就是與key對應(yīng)的過濾方式函數(shù)體2.全局過濾器:vue.filter(名,function(){})3.當(dāng)全局過濾器和組件內(nèi)過濾器重名時(shí)，組件內(nèi)過濾器執(zhí)行。如案例：將一個(gè)message變量的第一個(gè)首字符轉(zhuǎn)為大寫后輸出：<div id="app">{{ message | uppercase }}</div><!-- message為輸出的值，uppercase為處理message定義在filters的函數(shù)名,即過濾器第一個(gè)參數(shù)為值，第二個(gè)參數(shù)為處理函數(shù) --><<script>new Vue({el:'#app',data:{message:'hello'},filter:{uppercase(value){return value.toString().charAt(0).toUpperCase() + value.slice(1)}}})</script>

vue中template的基礎(chǔ)語法：

<template><!-- 模板語法：vue內(nèi)置了一套模板引擎，是數(shù)據(jù)驅(qū)動(dòng)的，如下： --><div id='app'><span>輸出num的值：{{hello}}</span> <!-- {{變量名}} -----Mustache語法，控制定義變量的輸出 --><span v-html='hello'></span><!-- v-html='變量名' ---------Html賦值 （元素的innerHTML），注意這里變量的輸出不能包含{{}}，直接寫變量名字符串 --><span v-text='hello'></span><!-- v-text='變量名' ---------text賦值 （元素的innerText），注意這里變量的輸出不能包含{{}}，直接寫變量名字符串 ,只能在雙標(biāo)簽中使用--><ul><li v-for='person in persons'>{{person.name}}</li><!-- v-for='item in array/object' ---------遍歷數(shù)組或者對象，每一項(xiàng)為item --><li v-is='組件名稱'></li><!-- 某些標(biāo)簽只能嵌套在特定的標(biāo)簽中才會(huì)正常顯示，但是組件并不一定是這個(gè)特定的標(biāo)簽，此時(shí)可以使用特定標(biāo)簽加v-is='組價(jià)名'來實(shí)現(xiàn)渲染 --></ul><span v-bind:id='personid'></span><!-- v-bind:屬性名='變量的key'------v-bind: 簡寫為 ： 給元素綁定屬性，并給值 --><span :id='personid'></span><!-- v-bind簡寫形式 --><span v-bind:class="className ? 'red' : 'yellow'"></span><!-- v-bind:class="className ? 'red' : 'yellow'" 利用三元表達(dá)式控制兩樣式選其中一種，注意引號(hào)內(nèi)使用引號(hào)的情況 --><a v-bind:href="url">新頁面</a><!-- 動(dòng)態(tài)設(shè)置url --><a v-bind:[id]="url"> 動(dòng)態(tài)設(shè)置參數(shù)使用:[參數(shù)] </a><span>{{ true ? names : 'NO' }}</span><!-- {{ 表達(dá)式 ? 'true時(shí)輸出的內(nèi)容' : 'NO時(shí)輸出的內(nèi)容' }}--------使用表達(dá)式(三元表達(dá)式)，這里如果要輸出變量，那么直接在后面跟上變量key即可，無需加{{}} --><input type='text' v-model='hello'><!-- v-model='變量名'---給元素（input、textarea、select）綁定雙向數(shù)據(jù),數(shù)據(jù)是雙向改變的,js內(nèi)存數(shù)據(jù)改變影響頁面;在不同的標(biāo)簽上數(shù)據(jù)是不同的 --><span>{{message|capitalize}}</span><!-- {{message|capitalize}} 和 v-bind:id='rawld|formatld'-----過濾器,后面介紹 --><span v-bind:id='rawld|formatld'></span><!-- Class和Style綁定 --><span :class='{colors:isActive,fonts:isActive}'>{{hello}}</span><!-- 對象語法：v-bind:class='{colors:isActive,fonts:isActive}' ------colors和fonts是定義的class類名，無需在data中聲明；isActive是定義的變量，當(dāng)isActive為true時(shí)，顯示定義類的樣式內(nèi)容，否則不顯示。 --><span :class='[fontColor,fontSize]'>{{hello}}</span><!-- 數(shù)組語法:v-bind:class='[fontColor,fontSize]' ------fontColor和fontSize是定義在data中的變量名，它們的值為樣式類名字符串；只要給數(shù)組加上變量，那么這個(gè)變量對應(yīng)類名控制的樣式就會(huì)添加給元素 --><span :style="{color:activeColor,fontSize:fontSize + 'px'}">{{hello}}</span><!-- style語法：v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}"----color和fontSize等指CSS樣式屬性，它們的值為定義在data中對應(yīng)CSS屬性的值 --><!-- 條件渲染： --><span v-if='isExist'>{{hello}}</span><!-- 條件渲染:v-if='isExist'---- v-if控制元素是否存在,當(dāng)定義在data中的變量isExist值為false時(shí),這個(gè)元素消失(控制臺(tái)看不到此元素),并非隱藏；isExist值為true時(shí)出現(xiàn) --><span v-show='isExist'>{{hello}}</span><!-- 條件渲染:v-show='isExist'---- v-show控制元素是否顯示,當(dāng)定義在data中的變量isExist值為false時(shí),這個(gè)元素隱藏（display:none），并非消失；isExist值為true時(shí)顯示--><!-- 條件渲染：v-else:此指令需要和v-if指令結(jié)合使用，當(dāng)v-if中isExist變量值為false時(shí)出現(xiàn)v-else指令所在標(biāo)簽；值為true時(shí)消失 --><div v-if='isExist'>{{hello}}</div><div v-else>{{word}}</div><!-- 條件渲染：v-else-if:此指令需要和v-if及v-else指令結(jié)合使用(建議結(jié)合)，當(dāng)v-if中isExist變量值為false時(shí)再判斷v-else-if指令的條件，如值為true時(shí)執(zhí)行，否則執(zhí)行v-else指令；和原生中if/else if/else執(zhí)行一樣 --><div v-if='isExist'>{{hello}}</div><div v-else-if='isShow'>{{word}}</div><div v-else>{{jack}}</div><!-- 條件渲染組：當(dāng)需要對多個(gè)元素進(jìn)行條件渲染時(shí)，可以使用template進(jìn)行包裹，渲染完后是沒有template標(biāo)簽的--><template v-if="ok"><h3>h1</h3><p>P1</p></template><div v-cloak>{{hello}}</div><!-- 控制當(dāng)編譯完后才顯示，可以隱藏未編譯的 Mustache 標(biāo)簽，直到編譯完在顯示 --><!-- v-for in 遍歷數(shù)組 --><li v-for='item in arrays'>{{item}}</li><!--arrays可以是一個(gè)整數(shù)，此時(shí)從1遍歷到這個(gè)整數(shù)值--><li v-for='(item,index) in arrays'>{{item}}-{{index}}</li><li v-for='item of arrays'>{{item}}</li><!--也可使用of代替in--><li v-for='item in arrays' :key='item.id'>{{item}}</li><!--給每項(xiàng)通過key添加唯一標(biāo)識(shí)，便于找到自己--><!-- 也可以在template 中使用v-for遍歷一組內(nèi)容 --><!-- v-for in 遍歷對象 --><li v-for='value in objects'>{{value}}</li><li v-for='(value,key) in objects'>{{value}}-{{key}}</li><li v-for='(value,key,index) in objects'>{{value}}-{{key}}-{{index}}</li><!-- 事件處理器： --><button v-on:click.stop='alerts()'>彈框</button><!-- 綁定事件：v-on:事件='事件處理函數(shù)名（括號(hào)可以省略，處理函數(shù)是定義在methods中的函數(shù)）)';v-on：可以簡寫為@，注意直接在事件前面加@，如：@click --><a v-on:[even]="functionName"> 動(dòng)態(tài)參數(shù)設(shè)置事件類型 </a><!-- 事件修飾符： --><button @click.stop='alerts()'>彈框</button><!--這里stop阻止冒泡事件 --><button @click.prevent='alerts()'>彈框</button><!--這里.prevent阻止默認(rèn)事件 --><button @click.stop.prevent='alerts()'>彈框</button><!--這里stop.prevent也是阻止默認(rèn)事件，只是是串聯(lián)修飾符 --><button @click.self='alerts()'>彈框</button><!--這里self表示給自身綁定事件 --><button @click.once='alerts()'>彈框</button><!--這里once表示只觸發(fā)一次事件 --><!-- 訪問原始DOM事件：$event，如：$event.preventDefault()--><button @click='remove,show(e)'></button><!-- 給同一個(gè)事件綁定多個(gè)處理函數(shù) --><!--按鍵修飾符：--><input @keyup.enter="submit" /><!--只有按enter鍵時(shí)觸發(fā)事件函數(shù)--><input @keyup.KEY="submit" /><!--只有按下指定的鍵時(shí)觸發(fā)事件函數(shù)，KEY可以是按鍵的key值--><!--鼠標(biāo)按鈕修飾符：.left .right .middle--><!-- 更多建議查閱相關(guān)文檔 --><!-- Vue組件：全局組件和局部組件：單頁面一般是局部組件，多頁面一般是全局組件。父子組件通訊-數(shù)據(jù)傳遞：父組件向子組件通過Props傳遞數(shù)據(jù)，子組件是不允許給父組件傳遞的，但是可以通過Emit變相的底部觸發(fā)實(shí)現(xiàn)傳遞。Slot：插槽，后面詳細(xì)介紹。 --></div></template>

vue文件script基本語法：

<script>// 引入子組件：在一個(gè)vue文件中可以引入另一個(gè)vue文件（一般是此組件的子組件）import headervue from 'headervue.vue';export default {//1.name:-------給組件定義一個(gè)名字name: 'test',//2.data:function(){}-------變量的聲明，一般實(shí)際開發(fā)中采用es6簡寫,如下：data() {return { //放數(shù)據(jù)的對象，vue中的變量都要在這里進(jìn)行聲明：text: 'hello word!', //如果想要渲染text的內(nèi)容，那么在*.veu 文件頭部template中根節(jié)點(diǎn)使用{{}}包裹，即{{text}}，在template根節(jié)點(diǎn)中添加：<input type='text' v-model='text'>即可實(shí)現(xiàn)數(shù)據(jù)雙向綁定（主要是v-model指令的功勞）list: [{ name: jack }, { naem: join }, { name: qun }] //將此列表渲染：在*.veu 文件頭部template中根節(jié)點(diǎn)寫入，如下：// <ul>// <li v-for='persons in list'> //v-for指令用于遍歷// {{persons.name}}// </li>// </ul>}},//3.methods:{}-----方法的聲明，用于聲明函數(shù)方法供vue使用：methods: {add() {},remove() {}},//4.components:{}------聲明子組件，引入的組件要進(jìn)行聲明才可以正常使用，如果變量名和變量關(guān)鍵字相同，可以簡寫一個(gè)變量關(guān)鍵字即可：components: {headervue: headervue,footervue},//5.props:[]------設(shè)置接收父組件傳遞過來的參數(shù):props: ['key1', 'key2'],//6.filters:{}------聲明過濾器:filters: {myfilter: function(value) {return value;}},//7.created(){}------事件處理函數(shù)，數(shù)據(jù)已經(jīng)初始化，但是DOM還未生成：created() {},//8.mounted(){}-----數(shù)據(jù)裝載DOM后，DOM已經(jīng)生成mounted() {},//9.計(jì)算屬性：里面可以定義函數(shù)，但是此函數(shù)會(huì)自動(dòng)執(zhí)行，用于解決模板中表達(dá)式過長問題（將表達(dá)式定義在函數(shù)中并返回，模板中使用函數(shù)名即可）computed:{},//與methods不同的是computed是反應(yīng)依賴緩存機(jī)制的；只要依賴數(shù)據(jù)不變，computed就不會(huì)再調(diào)函數(shù)，而是在緩存中拿數(shù)據(jù)//10.偵聽器：不管什么時(shí)候待處理的事發(fā)生變化，都會(huì)執(zhí)行watch里面的函數(shù)：（可執(zhí)行異步操作）watch: {}}</script>

vue中style基礎(chǔ)語法：

<style scoped>/* 這里添加scoped表示這里定義的樣式只在此組件中有效，如果沒有加此標(biāo)識(shí)，那么引入此組件的其他組件也是會(huì)使用到這里的樣式的，建議添加 *//* 正常書寫css代碼即可 */</style>

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海

總結(jié)

以上是生活随笔為你收集整理的vue项目目录结构分析、过滤器、vue文件中基础template、script、style的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。