VUE.js

漸進式 JavaScript 框架

https://cn.vuejs.org/

Vue.js 集結了 Angular 和 React 的優點，而且速度更快。如果有用過 jQuery 就能體會在資料取得資料時動態綁定 UI 是件痛苦的事情且沒有效率。

基本元件屬性

  • el : 綁定的 DOM ID
  • data : 資料模型
  • props : 接收父元件資料參數
  • template : 樣版
  • computed : 定義資料的 getter 和 setter
  • components : 子元件
  • methods : 方法集
  • propsData : 預設參數值
  • replace : 是否使用 template 取代 el, 預設 true
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>


new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

資料綁定

{{}}


<span>Message : {{ msg }}</span>

單次綁定

{{* msg}}

HTML Render

{{{ raw_html }}}

HTML 屬性

<div id="item-{{ id }}"></div>

Directives

  • v-text
  • v-html
  • v-if
  • v-show
  • v-else
  • v-for
  • v-on
  • v-bind : 屬性綁定
  • v-model : 表單綁定
  • v-ref
  • v-el
  • v-pre
  • v-cloak