jquery JavaScript 框架 framework JavaScript rich web application Vue.js JavaScript Evan You Google 2014 Vue.js GitHub 75,000 GitHub 1 Vue collaborators

Size: px

Start display at page:

Download "jquery JavaScript 框架 framework JavaScript rich web application Vue.js JavaScript Evan You Google 2014 Vue.js GitHub 75,000 GitHub 1 Vue collaborators"

钟惜国
6 years ago
Views:

1 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 顆了!

2 viii HTML JavaScript JavaScript Vue.js JavaScript JavaScript ECMAScript 2015 JavaScript const fat arrow destructuring ES React B Vue.js React Vue.js Vue.js 2 Vue.js Vue.js components codebase 3 Vue HTML JavaScript Vue CSS helper functionality 2 我推薦 Babel 網站上的 Learn ES2015 (

3 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

4 第一章 Vue.js Vue.js Vue Vue.js framework Ajax jquery Vue jquery ul is-blue ul <ul class="js-items"></ul> $(function () { $.get(' (data) { var $itemsul = $('.js-items'); if (!data.items.length) { var $noitems = $('li'); $noitems.text('sorry, there are no items.'); $itemsul.append($noitems);

5 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',

6 Vue.js 3 items: [], created() { fetch(' => 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

7 4 Vue <script src=" 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',, //.$

8 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

9 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>

10 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>

11 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>

12 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

13 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 的值

14 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>

15 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 );

16 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' ); n-1 n v-bind v-bind HTML submit type <button v-bind:type="buttontype">test button</button> buttontype: 'submit' );

17 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 與短語法混用會造成混淆

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue html vue html vue Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code h

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue010101.html vue010104.html vue0101 01 04 Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code https://code.visualstudio.com/ Chrome XAMP Visual Studio