Vue架構【基礎篇-第02章】：介紹
阿新 • • 發佈：2018-11-26
介紹
一、Vue.js是什麼
Vue是一套用於構建使用者介面的漸進式框架。與其他大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue也完全能夠為複雜的單頁應用提供驅動。
二、起步
嘗試Vue.js最簡單的方法是使用JSFiddle 上的 Hello World 例子。我們可以在瀏覽器新標籤頁中開啟它，或者建立一個.html檔案，然後通過如下方法引入Vue:
<!-- 開發環境版本，包含了有幫助的命令列警告 --> <scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生產環境版本，優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
三、宣告式渲染
1. Vue.js的核心是一個允許採用簡潔的模板語法來宣告式的將資料渲染進DOM的系統：
<!DOCTYPE html> <html lang="zh-CN"> <head> <metacharset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <!--模板語法--> <h2>{{ msg }}</h2> <h3>{{ 'hhahda' }}</h3> <h3>{{ 1+1 }}</h3> <h4>{{ {'name':'alex'} }}</h4> <h5>{{ person.name }}</h5> <h2>{{ 1>2? '真的': '假的' }}</h2> <p>{{ msg2.split('').reverse().join('') }}</p> <div>{{ text }}</div> </div> <!--1.引包--> <script src='./vue.js'></script> <script> //2.例項化物件 new Vue({ el:'#app', //繫結那塊地 data:{ //資料屬性 種子 msg:'黃瓜', person:{ name:'wusir' }, msg2:'hello Vue', text:'<h2>日天</h2>' } }); </script> </body> </html> ----------------------- 結果 ----------------------------- 黃瓜 hhahda 2 { "name": "alex" } wusir 假的 euV olleh <h2>日天</h2>
上面就是我們建立的一個Vue應用，看起來這跟渲染一個字串模板非常類似，但是Vue在背後做了大量工作。現在資料和DOM已經被建立了關聯，所有的東西都是響應式的。要怎麼確認呢，開啟瀏覽器的JavaScript控制檯，並修改app.message的值，我們將看到上例相應的更新。
2. 指令系統之 v-bind
作用：用來繫結元素特性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app-2"> <span v-bind:title="message"> 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊! </span> </div> <script src="vue.js"></script> <script> new Vue({ el:"#app-2", data() { return { message:"頁面加載於" + new Date().toLocaleString() } }, }) </script> </body> </html>v-bind 繫結元素特性
結果：