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 Code Live Server
1 Vus.js web application HTML CSS Cascading Style Sheets View JavaScript Model vue010001.html HTML / JavaScript DOM HTML
1-2 Vue.js 2 Vue.js Vue UI JavaScript vue010002.html {{ }} v-on:click Vue / new Vue() Vue Vue.js React Angular MVVM NOTE MVVM Model View ViewModel Model View UI ViewModel View Model View Model Model View
Chapter 1 Vus.js 1-3 NOTE jquery jquery Vue.js jquery HTML vue010003.html HTML <a> <button> <input> <a> <input> <button>
1-4 Vue.js 2 <a> <a href=" " > </a> href <a> <a> <a> <input> <button> Vus.js HTML HTML Vue.js Vue.js HTML Vue.js HTML HTML <button> Vue.js
Chapter 1 Vus.js 1-5 Vue.js HTML Vue CLI HTML HTML Vue CLI 1-1 Vue.js Vue 1 Visual Studio Code vue0101.html 2! Tab HTML 3 HTML Vue.js <body> <script> Vue.js CDN vue010101.html <body> <!-- Vue 的 CDN --> <script src="https://unpkg.com/vue/dist/vue.js"></script> </body>
1-6 Vue.js 2 NOTE CDN Content delivery network Content distribution network CDN 100Gbps 10Gbps 10Gbps 10Gbps 10*10Gbps https://zh.wikipedia.org/wiki/ <script> Vue new Vue({}) Vue vue010102.html <body> <!-- Vue 的 CDN --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- Vue 實例的程式碼 --> <script> new Vue({ el: '#app' }) </script> </body> new Vue({}) Vue JavaScript object options
Chapter 1 Vus.js 1-7 el Vue HTML Vue id app el element JavaScript object literal ES 6 Vue Vue id app <div> vue010103.html <body> <!-- Vue 實例的掛載點 --> <div id='app'> </div> <!-- Vue 的 CDN --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- Vue 實例的程式碼 --> <script> new Vue({ el: '#app' }) </script> </body> Vue.js MVVM
1-8 Vue.js 2 Vue.js HTML Vue el 1-2 {{ }} mustache HTML Vue data HTML {{ }} mustache data binding Vue data message Vue {{ message }} mustache
Chapter 1 Vus.js 1-9 MVVM 1 HTML 2 NOTE Mustache https://pixabay.com/zh/ 小胡子 - 手把 - 男 - 头发 - 复古 - 男子 - 面部护理 - 酿酒 - 黑 -473661/
1-10 Vue.js 2 vue010103.html Hello World 1 vue010103.html vue010104.html 2 Vue data message <body> <!-- Vue 實例的掛載點 --> <div id='app'> </div> <!-- Vue 的 CDN --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- Vue 實例的程式碼 --> <script> new Vue({ el: '#app', data: { message: 'Hello World!' } }) </script> </body> 3 id app Vue message vue010104.html <body> <!-- Vue 實例的掛載點 --> <div id='app'> {{ message }} </div> <!-- Vue 的 CDN --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- Vue 實例的程式碼 --> <script> new Vue({ el: '#app', data: { message: 'Hello World!' } }) </script> </body>
Chapter 1 Vus.js 1-11 vue010104.html Vue HTML {{}} 2 1 vue010104.html vue010104e.html 2 Vue data numbers new Vue({ el: '#app', data: { numbers: [1, 4, 9, 16] } }) 3 id app Vue numbers <!-- Vue 實例的掛載點 --> <div id='app'> {{ numbers.map(x => x * 2) }} </div>
1-12 Vue.js 2 vue010104e.html {{}} {{ message }} v-pre <span>
Chapter 1 Vus.js 1-13 NOTE v-pre v- directive NOTE Vue <script> Vue HTML el id app data message {{ }} data Vue data data ES 6 vue010104m01.html
1-14 Vue.js 2 data ES 6 vue010104m02.html el data
Chapter 1 Vus.js 1-15 vue010104.html CDN Vue.js Vue.js JavaScript Library vue.js vue.js https://vuejs.org/v2/guide/installation.html Development Version Production Version minified version Development Version vue.js vue010104.html 1 vue010104.html vue010105.html 2 vue.js vue010105.html
1-16 Vue.js 2 3 vue010105.html CDN <script> vue. js vue010105.html <body> <!-- Vue 實例的掛載點 --> <div id='app'> {{ message }} </div> <!-- Vue 的函式庫檔 --> <script src="./vue.js"></script> <!-- Vue 實例的程式碼 --> <script> new Vue({ el: '#app', data: { message: 'Hello World!' } }) </script> </body> CDN vue.js