Vue.js筆記

Vue.js（讀音 /vjuː/, 相似於 view） 是一套構建用戶界面的漸進式框架。

Vue 只關注視圖層， 採用自底向上增量開發的設計。

Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。

本教程基於 Vue 2.1.8 版本測試。

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

Webpack 入門教程：http://www.runoob.com/w3cnote/webpack-tutorial.html

官方文檔：http://vuejs.org/v2/guide/syntax.html

中文文檔: https://cn.vuejs.org/v2/guide/syntax.html

插值

文本

數據綁定最多見的形式就是使用 {{...}}（雙大括號）的文本插值，使用 v-html 指令用於輸出 html 代碼：

<div id="app">
    <div v-html="message"></div>
    <div >{{message2}}</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鳥教程2</h1>',
    message2: '<h1>菜鳥教程2</h1>'
  }
})
</script>

結果：

菜鳥教程2

<h1>菜鳥教程2</h1>

屬性

HTML 屬性中的值應使用 v-bind 指令。

<style>
.class1{
background: #444;
color: #eee;
}
</style>

<div id="app">
  <label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    directiva v-bind:class
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      class1: false
  }
});
</script>

v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。

<div id="app"> <pre><a v-bind:href="url">菜鳥教程</a></pre> </div>

在這裏 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。

 v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">