web框架:Vue.js詳解

簡介

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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章