項目目錄結構：

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

過濾器：

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

vue中template的基礎語法：

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

vue文件script基本語法：

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

vue中style基礎語法：

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

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。