天天看點
傳回

Vue.js指令下+method+computed+watch

1、指令下

  • v-bind（單向資料綁定）

    用途：屬性和資料進行綁定（綁定一個資料在某一個屬性身上）

    為什麼要綁定？

    答：通過操作資料就可以改變V中DOM的樣式，相當于操作了DOM。

    一下示範的代碼都是基于此執行個體。

    new Vue({
    el: '#app', //  挂載
    data: {
      imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
      msg: 'hello  Vue.js',
      size: 'size',
      bg: 'bg',
      flag: true,
      color: 'color',
      w: '100px',
      h: '100px',
      backg: 'blue',
      styleObj: {
        width: '100px',
        height: '100px'
      },
      styleColor: {
        background: 'yellow'
      }
    }
  })
    • 綁定類名
      • 數組的寫法(推薦寫法) 
        <h4> 類名綁定 - 數組寫法 </h4>
<p :class = "['size','bg']"></p> //數組中的類名與data中的資料無關
<p :class = "[size,bg]"></p> //數組中的類名是從data中擷取的
      • 對象的寫法 
        <h4> 類名綁定 - 對象寫法 </h4>
<p :class = "{size: true,bg: true}"></p> //對象中的類名與data中的資料無關
<p :class = "{[size]: true,[bg]: true}"></p> //對象中的類名從data中擷取
    • 綁定樣式
      • 數組的寫法(推薦寫法) 
        <h4> 樣式綁定 - 數組寫法 </h4>
<p :style = "[{width: '100px',height: '100px'},{background: 'pink'}]"></p>
<p :style = "[ styleObj,styleColor ]"></p>
      • 對象的寫法 
        <h4> 樣式綁定 - 對象  </h4>
<p :style = "{width: '100px',height: '100px',background: 'blue'}"></p>
<p :style = "{width: w,height: h,background: backg}"></p>
    • 引申
      • 綁定input的value值 
        <input type="text" v-bind:value = "msg">
<!-- 簡寫 -->
<input type="text" :value = "msg">
      • 綁定圖檔的src屬性 
        <h4> v-bind 可以綁定任意一個dom身上的屬性 </h4>
<img :src="imgUrl" alt="">
      • v-bind綁定類名不會與原來已經存在的類名産生互相覆寫
      • 綁定類名時候的靈活運用 
        <p :class = "{ [size]: flag,[bg]: flag}" ></p>
<p :class = "[ size, flag?bg:color ]"></p>
<p :class = "[ size, flag && bg || color ]"></p>

  • v-model(雙向資料綁定)

    單向：資料改變，試圖改變

    雙向：資料改變，視圖改變，反之，視圖改變，資料改變。

    new Vue({
    el: '#app', //  挂載
    data: {
      msg: 'haha'
    }
  })
    • v-model預設綁定表單元素的value值

      • 什麼叫做表單元素？

        from叫做表單标簽，form裡面的input textarea…叫做表單元素。

        <h3> v-model 雙向資料綁定 </h3>
<input type="text" v-model = "msg">
//對比單向綁定可以看出，此處少了value，因為v-model預設綁定表單的value值。

  • 小例子單向資料綁定實作雙向資料綁定效果

    執行個體：

    new Vue({
    el: '#app', //  挂載
    data: {
      msg: 'haha'
    },
    methods: {
      //事件處理程式
      change: function ( e ) {
        this.msg = e.target.value
      }
    }
  })
    V的實作： 
    <input type="text" :value = "msg" v-on:input = "change">
<-- 簡寫 -->
<input type="text" :value = "msg" @input = "change">
  • v-on 事件

    • 基礎事件綁定

      Vue中寫事件，要先寫邏輯，再進行事件的綁定。

    • 事件傳參

      業務：點選button按鈕，彈出input的value

      執行個體：

      new Vue({
    el: '#app',
    data: {
      val: ''
    },
    methods: {
      fn(val) {
        alert(val)
      }
    }
  })
      V的實作： 
      <input type="text" v-model="val">
<button @click="fn( val )"> 點選 </button>

    • 事件對象

      業務：如果我們的fn函數接收2個參數，其中一個參數是事件對象，這個時候我們看一下效果

      問題：事件對象e丢失了（輸出undefined）

      解決方案：在調用方法時，傳入一個實際參數： $event。

      執行個體：

      new Vue({
    el: '#app',
    data: {
      val: ''
    },
    methods: {
      fn(e, val) {
        console.log(val)
        console.log(e)
      }
    }
  })
      V的實作： 
      <input type="text" v-model="val">
<button @click="fn( $event,val )"> 點選 </button>

    • 事件修飾符和按鍵修飾符

      為什麼會有修飾符？

      如果有三個尺寸不同的嵌套的盒子，需要給每個盒子加點選事件，這是需要考慮事件冒泡問題，如果要阻止冒泡，需要給每個盒子的事件添加ev.stopProgation，代碼就會變得繁瑣，Vue提供修飾符解決這個問題。

      • 事件修飾符(.stop;.prevent;.capture;.self;.once;.passive) 
        <div class="large" @click.stop = "largeHandler">
      <div class="middle" @click.stop = "middleHandler">
          <div class="small" @click.stop = "smallHandler">
           </div>
      </div>
</div>
      • 按鍵修飾符(按鍵碼;按鍵碼的别名;系統新增修飾符) 
        <input type="text" @keyup.13="fn( val )" v-model='val'>
<hr>
<input type="text" @keyup.enter="fn( val )" v-model='val'>
<hr>
<input type="text" @keyup.p="fn( val )" v-model='val'>
  • 模闆文法mustache （雙大括号{{}}）

    • 所有的資料類型都是支援的，但是console.log，alert這些輸出文法是不支援的。

      執行個體：

      new Vue({
    el: '#app',
    data: {
      num: 10,
      str: 'hello Vue.js',
      bool: true,
      nul: null,
      und: undefined,
      arr: [1,2,3],
      obj: {
        name: 'zhangsan'
      }
    }
  })
      V的實作： 
      <p> number: {{ num }} </p> 	
<p> string: {{ str }} </p>
<p> boolean: {{ bool && 1 || 2 }}</p>
<p> null: {{ nul && 3 || 4 }}</p>
<p> undefined: {{ und && 5 || 6 }}  </p>
<p> array: {{ arr[1] }}</p>
<p> object: {{ obj.name }}</p>
<!-- <p> function: {{ ( function() { console.log('fn')} )() }}</p> --> //報錯

2、method（用來存儲事件處理程式）

3、computed計算屬性

  • 計算屬性産生的原因

    執行個體：

    new Vue({
    el: '#app',
    data: {
      msg: 'I Love eat 葡萄 '
    },
    computed: {
      //計算屬性中存放的都是方法
      newMsg () {
        return this.msg.split('').reverse().join('')
      }
    }
  })
    V的實作： 
    //V應該是用于資料展示，但是我們這麼處理，發現V做了一部分邏輯判斷，違背了MVVM。
 {{ msg.split('').reverse().join('') }}
 <hr>
 //這時就用到了計算屬性，把邏輯放到VM中實作。    
 <p> {{ newMsg }} </p>

    總結：1、計算屬性是一個選項，選項值是一個對象，對象中存放的是方法。

    ​ 2、方法必須要有傳回值。

    ​ 3、直接将方法名當做全局變量一樣直接使用。

  • 計算屬性的使用

    執行個體：

    new Vue({
    el: '#app',
    data: {
      firstName: '',
      lastName: ''
    },
    computed: {
      fullName: {
        get () { //getter
          return this.firstName + this.lastName
        },
        set ( val ) { //setter
            //val就是目前綁定元素的value值
          this.firstName = val.slice( 0,1 )
          this.lastName = val.slice( 1 )
        }
      }
    }
  })
    V的實作： 
    <div>
   姓： <input type="text" v-model = "firstName">
</div>
<hr>
<div>
   名： <input type="text" v-model = "lastName">
</div>
<hr>
<div>
   全名： <input type="text" v-model = "fullName">
</div>

    總結：1、什麼時候使用計算屬性？

    ​ 必須有邏輯處理，還有傳回值。

    ​ 我們使用的結果，要當做全局變量一樣使用。

    ​ 2、計算屬性一旦确定就不可修改了。

4、watch偵聽屬性

  • watch的使用

    執行個體：

    watch是一個選項，選項值是一個對象。

    ​ 對象中可以存放的類型：

    ​ {[key:string]:string|Function|Object|Array}

    ​ 常用的是方法和對象。

    new Vue({
    el: '#app',
    data: {
      firstName: '',
      lastName: '',
      fullName: ''
    },
    watch: { // 偵聽   誰 -> 指的是data中的資料
      // watch中可以存放方法 
      firstName(val) {
        this.fullName = val + this.lastName
      },
      lastName(val) {
        this.fullName = this.firstName + val
      },
      // fullName ( val ) {
      //   this.firstName = val.slice( 0,1 )
      //   this.lastName = val.slice( 1 )
      // }
      fullName: {
        deep: true, //深度監聽
        handler(val) { // 處理程式
          this.firstName = val.slice(0, 1)
          this.lastName = val.slice(1)
        }
      }
    }
  })
    V的實作： 
    <div>
   姓： <input type="text" v-model="firstName">
</div>
<hr>
<div>
   名： <input type="text" v-model="lastName">
 </div>
 <hr>
 <div>
    全名： <input type="text" v-model="fullName">
 </div>
    總結：由一個資料改變，引起的新的資料請求。
vue.js 指令 Method watch computed
上一篇: uni-app小知識點記錄
下一篇: 【uni-app】uni-app基礎知識

繼續閱讀