初識vue系列一

ITzhongzi發表於2017-04-16
Vue

 vue

  • js
  • jquery能做什麼，什麼都能做
  • angular能做什麼，什麼都能做
  • vue什麼都能做!
  • 誰更適合做什麼!

  • jquery適合做特效,或者是面向大眾的網站!

  • angular,vue，適合做頁面資料比較多

  • 適合做管理系統，後臺系統! () 特定人群去用的!
  • 提前準備一個給大家看(管理系統)

1.1. 渲染html字串v-html

1.2. 屬性繫結v-bind

1.3. 條件渲染v-if/v-else

1.4. 表單控制繫結v-model

1.5. 設定樣式:class, :style

1.6. 列表渲染 v-for

1.7. Vue中的事件處理( v-on)

用法v-on:事件名
Vue提供了v-on指令幫助我們進行事件的繫結

示例: 內聯方式。

    <div id="app">
      <!-- 為按鈕繫結點選事件，執行counter += 1的任務。 -->
      <button v-on:click="count += 1">增加 1</button>
      <p>這個按鈕被點選了 {{ count }} 次。</p>

    </div>

    var example1 = new Vue({
      el: '#app',
      data: {
        count: 0
      }
    })

1.8. Vue中繫結事件指令簡寫

vue-on: 可以簡寫 @ 符號, 僅此而已

1.9. 配合method 來進行事件繫結

    <div id="app">
      <!-- 事件繫結 -->
      <!-- undefined -->
      <button v-on:click="getCount()">增加 1</button>

      <!-- '哈哈' -->
      <button v-on:click="getCount('哈哈')">增加 1</button>

      <!-- button -->
      <button v-on:click="getCount">增加 1</button>
      <p>這個按鈕被點選了 {{ count }} 次。</p>
    </div>

    var example1 = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      method:{
        getCount: function (e) {
            this.count +=1
            console.log(e) // button? or undefined or '哈哈'
        }
      }
    })

1.9.1. Vue中的事件修飾符

在事件處理程式中呼叫 event.pr eventDefault() 或 event.stopPropagation() 是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點，但更好的方式是：methods 只有純粹的資料邏輯，而不是去處理 DOM 事件細節。 為了解決這個問題， Vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令字尾來呼叫修飾符。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
      <!-- 阻止單擊事件冒泡 -->
    <a v-on:click.st op="doThis"></a>
    <!-- 提交事件不再過載頁面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修飾符可以串聯  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修飾符 -->
    <form v-on:submit.prevent></form>
    <!-- 新增事件偵聽器時使用事件捕獲模式 -->
    <div v-on:click.capture="doThis">...</div>

    <!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回撥 -->
    <div v-on:click.self="doThat">...</div>

    <!-- 只觸發一次! -->
    <!-- the click event will be triggered at most once -->
    <a v-on:click.once="doThis"></a>

1.9.2. 計算屬性

1.9.3. 過濾器

1.9.4. 總結

v-html: 渲染html字串 v-model: 繫結表單控制元件 v-if v-else v-show - 控制元素的顯示與否

v-class 三種,物件形式 v-style

v-on 繫結事件 @事件名="方法" v-bind 屬性繫結 :屬性名="對應值"

  <p :test="'dsfaf'+'哈哈'+(1+1+2)"></p>

new Vue({
  el 
  data:{
}
})

相關文章