簡介
Vue.js 只聚焦視圖層,是一個構建數據驅動的 Web 界面的庫。
特性:
- 輕量
- 數據綁定
- 指令
- 插件化
與其他框架的區別
React
Angular 1
Angular 2
Knockout
Polymer
Riot
// .vue是Vue.js特有的文件格式,表示一個Vue組件,稱爲單頁式組件
// 視圖
<template>
</template>
// 組件樣式表
<style>
</style>
<script>
</script>
數據綁定
數據綁定將數據與視圖相關聯,當數據發生變化時,可以自動更新視圖。
// 插值,使用雙大括號
<span>{{text}}</span>
// 有時只需要渲染一次數據,後續數據變化不再關心,可以通過“*”實現
<span>{{*text}}</span>
// 雙大括號會把裏面的值全部當作字符串來處理,如果值是 HTML 片段,則可以使用三個大括號來綁定
// 雙大括號還可以放在HTML標籤內
<li data-id='{{id}}'></li>
// 表達式
{{ true ? 1 : 0 }}
// Vue.js 允許在表達式後面添加過濾符
指令是帶有 v- 前綴的特殊特性,其值限定爲綁定表達式。
指令
指令的職責就是當其表達式的值改變時把某些特殊的行爲應用到DOM上。
v-if
v-show
v-for
計算屬性
表單與 v-model
class 與 style綁定
Render 函數
組件詳解
webpack
發展歷程
- Vue.js