Vue 學習筆記_ZenDei技術網路在線

vue對比jquery vue：mvvm 數據驅動影響視圖適用於複雜數據jquery：mvc 視圖塞入數據適用於複雜視圖動效（其實都是js 的封裝，以及對html 的擴展）相關指令 v-text 等同大鬍子效果但是會轉換為字元串 v-html 綁定html屬性 v-if三兄弟只會渲染判斷 ...

vue對比jquery

vue：mvvm 數據驅動影響視圖適用於複雜數據
jquery：mvc 視圖塞入數據適用於複雜視圖動效

（其實都是js 的封裝，以及對html 的擴展）

生命周期

以下都是鉤子函數

beforeCreate（創建前）
created（創建後）
beforeMount (載入前)
mounted（載入後）
beforeUpdate（更新前）
updated（更新後）
beforeDestroy（銷毀前）
destroyed（銷毀後）

（在不同的時間點，可以進行不同的操作。）

計算屬性

computed：計算屬性

區別與methods：
性能相比methods要高因為有緩存只有在相關值發生改變時才會觸發在第一次渲染頁面也會主動觸發

計算屬性的數據源未發生變化則不會觸發響應的計算屬性
屬性區分於方法

 <div id="app">
    <p>原始字元串: {{ message }}</p>
    <p>計算後反轉字元串: {{ reversedMessage }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      computed: {
        // 以下的函數將提供給計算屬性的 getter   計算屬性預設只有getter
        reversedMessage: function() {
          // `this` 指向 vm 實例
          return this.message.split('').reverse().join('')
        }
      }
    })
  </script>

計算屬性中預設存在getter方法我們可以手動添加setter方法:

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

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: 'Google',
        url: 'http://www.google.com'
      },
      computed: {
        site: {
          // getter
          get: function() {
            return this.name + ' ' + this.url
          },
          // setter
          set: function(newValue) {
            var names = newValue.split(' ')
            this.name = names[0]
            this.url = names[names.length - 1]
          }
        }
      }
    })
    // 調用 setter， vm.name 和 vm.url 也會被對應更新
    vm.site = '菜鳥教程 http://www.runoob.com';  //觸發set方法
    document.write('name: ' + vm.name); //動態更新dom樹
    document.write('<br>');
    document.write('url: ' + vm.url);
  </script>

過濾器

vue中可以自定義過濾器被用作常見地文本格式化

<div id="app">
    <!-- 過濾器的用法 -->
    {{ message | capitalize }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'runoob'
      },
      filters: {
        capitalize: function(value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1) //對字元串的第一個字母進行大寫
        }
      }
    })
  </script>

監聽屬性

watch：響應數據變化

<div id="computed_props">
    <!-- 分別綁定kilometers和meters -->
    千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters">
  </div>
  <p id="info"></p>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#computed_props',
      data: {
        kilometers: 0,
        meters: 0
      },
      methods: {},
      computed: {},
      watch: {
        kilometers: function(val) {  //dom中的相關綁定會觸發對應的觀察屬性
          this.kilometers = val;
          this.meters = val * 1000;
        },
        meters: function(val) {
          this.kilometers = val / 1000;
          this.meters = val;
        }
      }
    });
    // $watch 是一個實例方法 $作用與vue自帶的屬性區別u與自定義的屬性
    vm.$watch('kilometers', function(newValue, oldValue) {
      // 這個回調將在 vm.kilometers 改變後調用
      document.getElementById("info").innerHTML = "修改前值為: " + oldValue + "，修改後值為: " + newValue;
    })
  </script>

樣式綁定

單樣式綁定：

<style>
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

<body>
  <div id="app">
    <!-- 主要是v-bind的使用 -->
    <div v-bind:class="{ active: isActive }"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true
      }
    })
  </script>

多樣式綁定：

<style>
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }

  .text-danger {
    background: red;
  }
</style>

<body>
  <div id="app">
    <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
        hasError: false
      }
    })
  </script>

組件

組件是整個vue知識體系中最重要的一個模塊
組件的作用是：復用
前端路由相對於傳統路由請求少節省資源
mode:history //不使用html5 實現前進和後退預設設置
關於組件的引用除了直接引用自定義標簽 is標簽也可以引用組件到指定的位置,動態綁定組件

全局組件

<div id="app">
    <runoob></runoob>
  </div>

  <script>
    // 註冊  此中註冊方式為全局組件 所有的外部組件中都可以引用
    Vue.component('runoob', {
      template: '<h1>自定義組件!</h1>'
    })
    // 創建根實例
    new Vue({
      el: '#app'
    })
  </script>

局部組件

區分於全局組件

<div id="app">
    <runoob></runoob>
</div>

<script>
var Child = {
  template: '<h1>自定義組件!</h1>'
}

// 創建根實例
new Vue({
  el: '#app',
  components: {
    // <runoob> 將只在父模板可用
    'runoob': Child
  }
})
</script>

template

template 模版用來承載dom樹常在組件中使用

props

自定義組件屬性：通過props申明屬性可以通過v-bind動態綁定自定義屬性

  <div id="app">
    <child message="hello!"></child>
  </div>

  <script>
    // 註冊
    Vue.component('child', {
      // 聲明 props
      props: ['message'],
      // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
      template: '<span>{{ message }}</span>' //可以這樣理解：此處message既是屬性也是變數
    })
    // 創建根實例
    new Vue({
      el: '#app'
    })
  </script>

動態props

通過v-bind實現

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <!-- 通過v-bind綁定父組件中的parentMsg 實現動態綁定-->
      <child v-bind:message="parentMsg"></child>
    </div>
  </div>

  <script>
    // 註冊
    Vue.component('child', {
      // 聲明 props
      props: ['message'],
      // 同樣也可以在 vm 實例中像 “this.message” 這樣使用
      template: '<span>{{ message }}</span>'
    })
    // 創建根實例
    new Vue({
      el: '#app',
      data: {
        parentMsg: '父組件內容'
      }
    })
  </script>

組件間交互

父組件往子組件傳入數據使用props 反過來則用emit

父傳子：
子組件props定義屬性子組件標簽引用v-bind將父組件參數與子組件屬性綁定

   <div id="counter-event-example">
      <button-todo v-bind:todo="item"></button-todo>
    </div>

    <script>
      Vue.component('button-todo', {
        props: ['todo'],
        template: '<button >{{ todo }}</button>'
      })
      new Vue({
        el: '#counter-event-example',
        data: {
          item: '我是item'
        }
      })
    </script>

子傳父：
父組件定義method：fv_fuc 接受參數arg
子組件 this.$.emit(<fuc>,<arg>)
子組件標簽引用 v-on：<fuc>="fv_fuc"
流程：子組件的emit觸發標簽引用的fuc繼而觸發父組件的fv_fuc

  <div id="app">
      <div id="counter-event-example">
        <p>{{ counter }}</p>
        <button-counter v-on:increment="setCounter"></button-counter>
      </div>
    </div>

    <script>
      Vue.component('button-counter', {
        template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
        data: function() {
          return {
            counter: 0
          }
        },
        methods: {
          incrementHandler: function() {
            this.counter += 1
            this.$emit('increment', this.counter)
          }
        },
      })
      new Vue({
        el: '#counter-event-example',
        data: {
          counter: 0
        },
        methods: {
          setCounter: function(somedata) {
            this.counter = somedata //接收子組件的數據
          }
        }
      })
    </script>

自定義指令

directive 定義指令名稱
inserted 當綁定元素插入到dom中會觸發

<div id="app">
    <p>頁面載入時，input 元素自動獲取焦點：</p>
    <input v-focus>
  </div>

  <script>
    // 註冊一個全局自定義指令 v-focus
    Vue.directive('focus', {
      // 當綁定元素插入到 DOM 中。
      inserted: function(el) {
        // 聚焦元素
        el.focus()
      }
    })
    // 創建根實例
    new Vue({
      el: '#app'
    })
  </script>

vue.directive定義全局指令 directives: {}的方式定義局部指令這點和component(組件)相似

  <div id="app">
    <p>頁面載入時，input 元素自動獲取焦點：</p>
    <input v-focus>
  </div>

  <script>
    // 創建根實例
    new Vue({
      el: '#app',
      directives: {
        // 註冊一個局部的自定義指令 v-focus 和components的使用相似
        focus: {
          // 指令的定義
          inserted: function(el) {
            // 聚焦元素
            el.focus()
          }
        }
      }
    })
  </script>

directive可以和鉤子函數配合使用不需要鉤子函數也可以簡寫第二個參數是function，預設的第一個參數是el

 <script>
  Vue.directive('runoob', {
      // 綁定bind的鉤子函數
      bind: function(el, binding, vnode) {
        var s = JSON.