六角Vue筆記_Vue 常用 API

9 min readMar 10, 2019

使用 Extend 避免重複造輪子/ Filter 自訂畫面資料呈現格式/ 用 set 搞定無法寫入的資料/ Mixin 混合其它的元件內容/ 使用 Directive 開發自己的互動 UI

以下筆記出自六角學院課程，詳情請參➤ 六角學院-Vue 出一個電商網站

▶︎ 使用 Extend 避免重複造輪子

假設數個元件差異非常小只有小部分的不同，將會重複的內容抓取出來作為元件共用的基底。

//第1個元件的template
<script type=”text/x-template” id=”row-component”>
  <tr>
    <td>{{ item.name }}</td>
    <td>{{ item.cash }}</td>
    <td>{{ item.icash }}</td>
  </tr>
</script>//第2個元件的template，多了bg-primary text-whit的樣式
<script type=”text/x-template” id=”row-component-two”>
  <tr class=”bg-primary text-white”>
    <td>{{ item.name }}</td>
    <td>{{ item.cash }}</td>
    <td>{{ item.icash }}</td>
  </tr>
</script>

<script>// extend
var newExtends = Vue.extend({
  data: function () {
    return {
      data: {},
      extendData: ‘這段文字是 extend 得到’}}})//元件1
var childOne = {
  props: [‘item’],
  template: ‘#row-component’,
  extends:newExtends} //插入要共用的基底//元件2
var childTwo = {
  props: [‘item’],
  template: ‘#row-component-two’,
  extends: newExtends,
  data:function(){
    return{
      childTwo:’元件2', //可以加新的內容，且不會取代掉extend的內容
      extendData: ‘這段文字是 元件 得到’} //名稱一樣的話則會覆寫掉 },}

▶︎ Filter 自訂畫面資料呈現格式

類似局部的格式化，filter可重複使用，一個值可以套用多個filter

//全域中加入filter
{{ data[1].cash | currency | dollar}}＊dollar處理的是currency處理過後的值//元件模版內的filter
<script type=”text/x-template” id=”row-component”>
  <tr>
    <td>{{ item.name }}</td>
    <td>{{ item.cash | currency | dollar }}</td>
    <td>{{ item.icash | currencydollar | dollar }}</td>
  </tr>
</script>//建立全域filter，大家都可以使用（元件也可以用）
<script>
Vue.filter(‘currency’, function (n) { //名稱, 函式
  return n.toFixed(2).replace(/./g, function (c, i, a) {
    return i && c !== ‘.’ && ((a.length — i) % 3 === 0) ? ‘,’ + c : c})})Vue.filter(‘dollar’, function (n) {
  return `$ ${n}`})//建立區域filter，只有該元件可以使用
var child = {
  props: [‘item’],
  template: ‘#row-component’,
  data: function () {
    return { data: {} }},  filters: {
    dollar: function (n) {//此處的n是經過currency處理過的參數
      return `$ ${n}`},    currency: function (n) {
      return n.toFixed(2).replace(/./g, function (c, i, a) {
        return i && c !== ‘.’ && ((a.length — i) % 3 === 0) ? ‘,’ + c : c})}}
}

▶︎ 無法寫入的資料，用 set 搞定它（使用set將未能預先定義的資料加入到資料結構中）

有帶到set的內容

使用console.log(‘Vue init:’, this) 確認Vue的內容，其中data是資料內容，若寫入資料時沒有get與set時，代表資料結構並未進入Vue的綁定中。

也就是說，Vue在綁定資料時，若在寫入資料時並未預先定義資料結構的話就會出錯，這時就不會出現get和set，也不會即時反映在畫面上。

檢視元件的內容，item中的資料項目也有get＆set

在元件新增按鈕並啟動method，console.log的結果為確實有將資料加入item.name='小明'，但沒有get&set，也不會顯示於畫面上<script type="text/x-template" id="row-component">
  <tr>
    <td>{{ item.name }}</td>
    <td>{{ item.cash }}</td>
    <td>{{ item.icash }}</td>
  <td>
  <span v-if="data.item">{{ data.item.name }}</span>
    <button class="btn btn-sm btn-primary" @click="addData()">寫入資料</button>
  </td>
  </tr>
</script>methods: {
  addData: function() {
    this.data.item = {
      name: this.item.name}

改用this.set寫入則出現get和set，資料也順利呈現於畫面上
methods: {
  addData: function() {
  this.$set(this.data,'item', {name: this.item.name})}}

▶︎ Mixin 混合其它的元件內容

mixin與extend有一點點相像，但extend是由單一元件進行延伸，而mixin則可以混合多個元件的行為。

自己的感覺extend像是模版的基底，而mixin像是插件。

var mixinFilter = { //宣告一物件，裡面放置要mixin的內容
  template: ‘#row-component’,
  filters: {
    dollarSign: function (n) {
      return `$ ${n}`},
    currency: function (n) {
      return n.toFixed(2).replace(/./g, function (c, i, a) {
        return i && c !== “.” && ((a.length — i) % 3 === 0) ? ‘,’ + c : c;});}},}var mixinMounted = {
  mounted() {
    console.log(‘這段是 Mixin 產生’)}}Vue.component(‘row-component’, {
  props: [‘item’],
  data: function() {
    return { data: {}, }},
  mixins:[mixinFilter, mixinMounted],//使用陣列，可以載入多個mixin});

▶︎ 使用 Directive 開發自己的互動 UI

官方文件

<div id="app">
  <input type="email" v-model="email" v-focus v-validation>
</div>//建立初始的強調輸入框
Vue.directive(‘focus’, {
  inserted: function (el) { //inserted是hook（鉤子函數），directive有自己的生命週期
el.focus()}})//email格式確認
Vue.directive(‘validation’,{
  update:function(el, binding, vnode){
    var value=el.value;
    var re = /^(([^<>()\[\]\.,;:\s@\”]+(\.[^<>()\[\]\.,;:\s@\”]+)*)|(\”.+\”))@(([^<>()[\]\.,;:\s@\”]+\.)+[^<>()[\]\.,;:\s@\”]{2,})$/i;
    if(!re.test(value)){
      el.className=”form-control is-invalid”
      }else{ el.className = “form-control is-valid”}},//送出輸入內容時會觸發
  bind:function(el, binding, vnode){ el.className=”form-control” }})＊
el:指令所绑定的元素，可以用来直接操作 = DOM
   即為 document.querySelector(‘input’)
binding: directive所自帶的一些屬性
vnode: Vue的虛擬節點

六角Vue筆記_Vue 常用 API

Written by Huang Pei

No responses yet