jquery JavaScript 框架 framework JavaScript rich web application Vue.js JavaScript Evan You Google 2014 Vue.js GitHub 75,000 GitHub 1 Vue collaborators npm 40,000 DOM 1 在我開始編寫本書時, 此專案在 GitHub 上已獲得 65,000 顆星 在你閱讀本書時, 此專案所獲得的星星數可能已超過 75,000 顆了!
viii HTML JavaScript JavaScript Vue.js JavaScript JavaScript ECMAScript 2015 JavaScript const fat arrow destructuring ES2015 2 React B Vue.js React 7 2 1 Vue.js Vue.js 2 Vue.js Vue.js components codebase 3 Vue HTML JavaScript Vue CSS helper functionality 2 我推薦 Babel 網站上的 Learn ES2015 ( https://babeljs.io/learn-es2015)
ix 4 JSX Vue Getting Started guide templating syntax Vue JSX React Vue JSX 5 vue-router Vue view layer vue-router 6 Vuex Vuex 7 Vue vue-test-utils Vue A Vue vue-cli Vue B React Vue React Vue Vue React
第一章 Vue.js Vue.js Vue Vue.js framework Ajax jquery Vue jquery ul is-blue ul <ul class="js-items"></ul> $(function () { $.get('https://example.com/items.json').then(function (data) { var $itemsul = $('.js-items'); if (!data.items.length) { var $noitems = $('li'); $noitems.text('sorry, there are no items.'); $itemsul.append($noitems);
2 else { data.items.foreach(function (item) { var $newitem = $('li'); $newitem.text(item); if (item.includes('blue')) { $newitem.addclass('is-blue'); $itemsul.append($newitem); ); ); ); 1. $.get() Ajax 2..js-items $itemsul 3. li li document 4. li blue is-blue Vue Vue <ul class="js-items"> <li v-if="!items.length">sorry, there are no items.</li> <li v-for="item in items" :class="{ 'is-blue': item.includes('blue') "> {{ item </li> </ul> el: '.js-items',
Vue.js 3 items: [], created() { fetch('https://example.com/items.json').then((res) => res.json()).then((data) => { this.items = data.items; ); ); 1. fetch() Ajax 2. JSON JavaScript 3. items Vue Document Object Model DOM HTML Vue li item Vue view jquery reload Vue jquery Vue Vue Vue routing URL vue-router vuex Vue vue-test-utils vue-router 5 vuex 6 vue-test-utils 7
4 Vue <script src="https://unpkg.com/vue"> created() { // ); ID app div Vue body Vue CDN 1 Vue JavaScript Vue el div webpack bundler ECMAScript 2015 JavaScript CSS 2 vue-loader webpack vue-loader webpack loader HTML JavaScript CSS 2 webpack webpack npm vue-loader webpack configuration 1 內容傳遞網路 (content delivery network,cdn) 架設在世界各地的伺服器上, 讓內容可以迅速地傳遞 CDN 有助於開發與快速雛型製作, 不過在產品版上使用 unpkg 前, 你應該要再研究看看它是否適合於你的應用
Vue.js 5 module: { loaders: [ { test: /\.vue$/, loader: 'vue',, //...... ] webpack vue-loader webpack vue-loader webpack vue vue-cli $ npm install --global vue-cli $ vue init webpack vue-cli
6 Vue src.vue Vue 樣版 templates HTML 指令 directives Vue Good morning! 6 Good afternoon! Good evening! <p v-if="ismorning">good morning!</p> <p v-if="isafternoon">good afternoon!</p> <p v-if="isevening">good evening!</p>
Vue.js 7 var hours = new Date().getHours(); ismorning: hours < 12, isafternoon: hours >= 12 && hours < 18, isevening: hours >= 18 ); data Vue ismorning isafternoon isevening v-if v-if 2:30 p.m. <p>good afternoon!</p> 雖然 Vue 具有響應式功能 (reactive functionality), 上述範例並不具響應性, 網頁內容也不會隨著時間的改變而更新 稍後我們會就響應性進行更詳細的說明 data Vue v-if <p v-if="hours < 12">Good morning!</p> <p v-if="hours >= 12 && hours < 18">Good afternoon!</p> <p v-if="hours >= 18">Good evening!</p>
8 hours: new Date().getHours() ); JavaScript JavaScript computed properties interpolation <p>hello, {{ greetee!</p> greetee: 'world' ); <p>hello, world!</p> <p v-if="path === '/'">You are on the home page</p> <p v-else>you're on {{ path </p>
Vue.js 9 path: location.pathname ); location.pathname URL / /post/1635 v-if path / v-else v-if if-else else <p>the second dog is {{ dogs[1] </p> <p>all the dogs are {{ dogs </p> dogs: ['Rex', 'Rover', 'Henrietta', 'Alan'] ); The second dog is Rover All the dogs are [ "Rex", "Rover", "henrietta", "Alan" ] Vue JSON logging
10 v-if v-show v-if v-show v-if 2 DOM Vue <div v-if="true">one <div v-if="false">two <div>one CSS v-show Vue <div v-show="true">one <div v-show="false">two <div>one <div style="display: none">one v-if Vue HTML v-show v-if <div v-show="user"> <p>user name: {{ user.name </p> 2 假值 (falsy value) 表其值為 false undefined null 0 "" 或 NaN 的值
Vue.js 11 user: undefined ); Vue user.name v-if v-if Vue v-if v-else-if v-else <div v-if="state === 'loading'">loading /div> <div v-else-if="state === 'error'">an error occurred <div v-else> our content! div state loading state error v-show v-if DOM v-show v-show CSS v-show v-for <ul> <li v-for="dog in dogs">{{ dog </li> </ul>
12 dogs: ['Rex', 'Rover', 'Henrietta', 'Alan'] ); list <ul> <li>rex</li> <li>rover</li> <li>henrietta</li> <li>alan</li> </ul> v-for <ul> <li v-for="(rent, city) in averagerent"> The average rent in {{ city is ${{ rent </li> </ul> averagerent: { london: 1650, paris: 1730, NYC: 3680 );
Vue.js 13 key v-for="rent in averagerent" v-for="(dog, i) in dogs" (value, key) 1 10 <ul> <li v-for="n in 10">{{ n </li> </ul> el: '#app' ); 0 9 0 n-1 n v-bind v-bind HTML submit type <button v-bind:type="buttontype">test button</button> buttontype: 'submit' );
14 <button type="submit">test button</button> v-bind type attribute buttontype properties disabled checked property <button v-bind:disabled="buttondisabled">test button</button> buttondisabled: true ); attributes v-bind v-bind <button :disabled="buttondisabled">test button</button> buttondisabled: true ); v-bind 不管你選用的是 v-bind 還是短語法, 請持續下去 將 v-bind 與短語法混用會造成混淆