vuejs入門教程 · 前端工程化指南

## 前言 vuejs作為單頁應用的必備技術之一，對于解決大部分的單頁簡單應用，是比較實用而且輕量級的。那么對于vuejs的一些基礎知識以及實用技巧，本篇進行了總結。備注：vue不支持ie8等低版本瀏覽器。 ## 目錄結構 | 目錄/文件| 說明 | | --- | --- | | build | 最終發布的代碼存放位置 | | config | 配置目錄，包括端口號等。我們初學可以使用默認的 | | node_modules | npm 加載的項目依賴模塊 | | src | 這里是我們要開發的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件：assets: 放置一些圖片，如logo等；components: 目錄里面放了一個組件文件，可以不用；App.vue: 項目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄； main.js: 項目的核心文件 | | static | 靜態資源目錄，如圖片、字體等 | | test | 初始測試目錄，可刪除 | | .xxxx文件 | 這些是一些配置文件，包括語法配置，git配置等。 | | index.html | 首頁入口文件，你可以添加一些 meta 信息或同統計代碼啥的 | | package.json | 項目配置文件。 | | README.md| 項目的說明文檔，markdown 格式 | ## 基本的標簽語法 ### 頁面組成 * 頁面由html,css,js三部分組成 ~~~  <template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> // 導入組件，注意 data必須為return返回數據；組件中導入的組件通過components導入； import Hello from './components/Hello' export default { name: 'app', components: { Hello }， data () { return { msg: '歡迎來到菜鳥教程！' } } } </script>  <style lang='less'　scope> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ~~~ ### 模板語法 * 文本基本使用{{ msg }} * html:v-html="rawHtml" * 綁定屬性 :disabled="isButtonDisabled" * 支持js表達式 ~~~ {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> ~~~ * 指令 v-if,v-else,v-show等可以用，注意：`v-bind縮寫為：，v-on縮寫為@`；新增了`v-else-if`用法，支持多條件判斷。 ~~~ <li v-for="book in booklist" :key="book.id"> <router-link :to="'/bookDetail/' +book.id" > {{book.id}}{{book.pubdate}}</router-link> </li> ~~~ ### 表單控制器 * 表單數據綁定 v-model ~~~ //文本框綁定 <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> ~~~ ~~~ //多個復選框用同一個名字, <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> ~~~ * 修飾符，可以對得到的數據進行控制，是否同步改變；是否轉換為數字；是否去除前后空格等 ~~~  <input v-model.lazy="msg" >  <input v-model.number="age" type="number">  <input v-model.trim="msg" type="text"> ~~~ ### 事件 * @click點擊事件，支持常見的所有web事件類型，參考[mdn:web事件類型](https://developer.mozilla.org/zh-CN/docs/Web/Events) 這里面有常見的click,focus,blur,mouseenter,mouseover等鼠標事件，也有鍵盤事件等。 * 支持基本的js語句以及方法，方法帶參數等 ~~~ //js語句 @click="counter++" //js method @click="greet" //js method with arguments @click="say('hello')" ~~~ * 事件修飾符在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。為了解決這個問題， Vue.js 為 v-on 提供了事件修飾符。通過由點(.)表示的指令后綴來調用修飾符。（需要注意的是同一個事件類型才會出現冒泡） * .stop 組織事件向上冒泡，默認事件是從下到上的 * .prevent 阻止默認事件 * .capture 事件從父到子 * .self 只有元素自己觸發 * .once 只觸發一次 * .native 對于組件中的事件如果子組件沒有定義對應的事件，但是父組件想觸發原生的事件，那么加native就可以實現觸發原生事件，不用通過事件的兩層傳遞。 ~~~  <a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.stop.prevent="doThat"></a>  <form v-on:submit.prevent></form>  <div v-on:click.capture="doThis">...</div>  <div v-on:click.self="doThat">...</div> ~~~ * [官網事件修飾符說明](https://cn.vuejs.org/v2/guide/events.html#事件修飾符) * 鍵盤修飾符，其中回車鍵是最常用的 * .enter * .tab * .delete (捕獲 “刪除” 和 “退格” 鍵) * .esc * .space * .up * .down * .left * .right * 鼠標修飾符 * .left * .right * .middle ### vue實例方法 ### 表單校驗 ### 服務端通訊 ## 定義自己的插件一般情況我們都是require得到需要的文件然后直接使用，但是使用element-ui的時候我們發現除了require之外，還需要vue.use(element-ui),這個就是因為element-ui定義了自己的插件。如果想定義自己的插件，基本步驟如下： 1. 編寫自己的組件 loading.vue ~~~  <template> <div class="loading"> loading... </div> </template> ~~~ 2. 在index.js文件中生命install方法，執行注冊組件 ~~~ import MyLoading from './loading.vue' // 這里是重點 const Loading = { install: function(Vue){ Vue.component('loading',MyLoading) } } // 導出組件 export default Loading ~~~ 3. main.js中配置使用loading ~~~ import Loading from '../components/loading' Vue.use(Loading); ~~~ 4. 頁面中直接使用 `<loading></loading>` ## 參考文檔 * [vuejs菜鳥教程](http://www.runoob.com/vue2/vue-tutorial.html) * [vuejs2官網文檔](https://cn.vuejs.org/v2/guide/) * [極客學院-vue教程](http://wiki.jikexueyuan.com/project/vue-js/start.html)