Vue快速入門

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

vue單文件組件

<template>
  <pagetitle  title="vue入門" :sub-title="a"></pagetitle>
</template>
<script>
export default {
  mixins: [],
  comments: {
    // 引入局部組件
  },
  data() {
    return {
      a: ''
    }
  },
  computed: {
    // 計算屬性 a 變了 newa 才變
     newa() {
        return a * 2;
      }
  },
  created(){
    // 頁面初始化一些處理
    this.fetchData();
  },
  watch: {
    a(newVal, oldVal) {
      // a改變後觸發
    }
  },
  methods: {
    fetchData() {
      //請求數據
    }
  }
}
</script>

模板數據綁定

<!-- 文本插值 -->
<span>Message: {{ msg }}</span>
<!-- 單次插值 -->
<span v-once>這個將不會改變: {{ msg }}</span>

<!-- 原始html -->
<span v-html="rawHtml"></span>

<!-- 特性 -->
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisabled">Button</button>

<!-- 表達式 -->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>


<!-- 過濾器 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

表單輸入綁定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

更多參見：https://cn.vuejs.org/v2/guide...

computed 與 watch

<template>
  <div id="example">
      a={{a}}, b={{c}}, c={{c()}}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        a: 1,
        d: 1
      }
    },
    computed: {
      // 一個計算屬性的 getter
      b: function() {
        // this 指向實例
        return this.a + 1;
      },
      c: function() {
        return Data.now();
      },
      e: function() {
        return this.a + 2;
      }
    },
    watch: {
      a: function() {
        this.d = this.a + 2;
      }
    }
  }
</script>

樣式 class與style綁定

class

<!-- 對象語法 -->
<div class="static"
  v-bind:class="{ 'class-a': isA, 'class-b': isB}"
>
</div>

<!-- 數組語法 -->
<div v-bind:class="[classA, classB]"></div>
<script type="text/javascript">
  data: {
    classA: 'class-a',
    classB: 'class-b'
  }
</script>

style

<!-- 對象語法 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
<script>
   data: {
     styleObject: {
        color: 'red',
        fontSize: '13px'
     }
   }
</script>
<!-- 數組語法 -->
<div v-bind: style="[baseStyles, overridingStyles]"></div>

條件渲染

<!-- if -->
<h1 v-if="ok"> Yes </h1>

<!-- if else-->
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div

<!-- if else v-else-if-->
div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

<!-- template -->
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

<!-- v-show -->
<h1 v-show="ok">Hello!</h1>

列表渲染

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({  
   el: '#example-1',  
   data: {   
      items: [      
         { message: 'Foo' },      
         { message: 'Bar' }    
       ]  
  }})

在 v-for 塊中，咱們擁有對父做用域屬性的徹底訪問權限。v-for 還支持一個可選的第二個參數爲當前項的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

結果：

v-for 經過一個對象的屬性來迭代。

<div v-for="(value, key, index) in object" :key="item.id">  {{ index }}. {{ key }}: {{ value }}</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

建議儘量在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容很是簡單，或者是刻意依賴默認行爲以獲取性能上的提高。
結果：

更改檢測

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 如今是響應式的
vm.b = 2
// `vm.b` 不是響應式的

對於已經建立的實例，Vue 不能動態添加根級別的響應式屬性。可是，能夠使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。例如，對於：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

能夠添加一個新的 age 屬性到嵌套的 userProfile 對象：

Vue.set(vm.userProfile, 'age', 27)

還能夠使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：

vm.$set(vm.userProfile, 'age', 27)

事件綁定

<template>
   <button v-on:click="greet">Greet</button>
   <!-- 簡寫 -->
  <button @click="greet">Greet</button>
  <!-- 內聯 -->
  <button v-on:click="say('hi')" > Say hi </button>
  <!-- 阻止單擊事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件再也不重載頁面 -->
  <from v-on:submit.prevent="onSubmit"></from>
  <!-- 修飾符串聯 -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修飾符 -->
  <from v-on:submit.prevent></from>
  <!-- 添加事件偵聽器時使用捕獲模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只當事件再該元素自己時才觸發（好比不是子元素） 觸發時觸發回調-->
  <div v-on:click.self="doThat">...</div>
  <!-- 只有在keyCode 是 13 時調用 vm.submit() -->
  <input @key.enter="submit">
</template>
<script>
export default {
  data() {
     return {
       name: 'vue.js'
     }
   },
  methods: {
     greet: function(event) {
        alert('greet');
     },
     say: function(msg) {
         alert(message);
     }
  }
}
</script>

Mixins

// 定義一個混合對象
var myMixin = {
   created: function() {
      this.hello()
   },
   methods: {
      hello: function() {
         console.log('hello from mixin!')
      }
   }
}

// 定義一個組件， 使用這個混合對象
var Component = Vue.extend({
   mixins: [myMixin]
})

插件

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }
  // 2. 添加全局資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })
  // 3. 注入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })
  // 4. 添加實例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}

註冊組件

局部註冊組件

<template>
  <my-component></my-component>
</template>
<script>
import MyComponent  from './myComponent';
export default {
  component: {
    // 局部註冊
    MyComponent
  }
}
</script>

全局註冊組件

// a.vue
<template>
   <my-component></my-component>
</template>

// myComponent.vue
<template>
   <div>my-component</div>
</template>

// main.js
import MyComponent from ./myComponent''
// 全局註冊
Vue.component('my-component',  MyComponent);
// 建立根實例
new Vue({
   el: '#example'
})

Props

<child msg="hello!"></child>
// 動態props
<child :msg="hello!"></child>
// 雙向綁定
<child :msg.sync="hello!"></child>
// 單次綁定
<child :msg.once="hello!"></child>
Vue.component('child', {
  // 聲明 props
   props: ['msg'],
  // prop 能夠在模板內
  // 能夠用 `this.msg` 設置
  template: '<span> {{msg}}</span>'
})

slot

<h2>我是子組件的標題</h2>
  <slot>
    只有在沒有要分發的內容時纔會顯示。
  </slot>
</div>
// 父模板
<div>
  <h1>我是父組件的標題</h1>
  <my-component>
    <p>這是一些初始內容</p>
    <p>這是更多的初始內容</p>
  </my-component>
</div>
// 渲染結果
<div>  
  <h1>我是父組件的標題</h1>  
  <div>    
    <h2>我是子組件的標題</h2>    
    <p>這是一些初始內容</p>    
    <p>這是更多的初始內容</p>  
  </div>
</div>

具名插值

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>