Render函式在Vue多頁面應用中的應用

.醬發表於2018-11-14
函式Vue

標籤

Vue、apiCloud、HTML

寫在前面

背景介紹

因一些歷史遺留問題，需要維護一款藉助apiCloud開發的專案，需要實現公共元件抽離

通過此分享你將
  1. 瞭解apiCloud多頁面專案中引入Vue開發
  2. 如何在瀏覽器中除錯apiCloud專案
  3. 藉助render函式實現元件的封裝和引用
  4. render函式中值得注意的點

在apiCloud多頁面專案中引入Vue開發

新建一個標準的apiCloud模板
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
  </head>
  <body>

  </body>
  <script type="text/javascript">
      apiready = function(){

      };
  </script>
  </html>
複製程式碼
引入vue，初始化
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
  </head>
  <body>
  ******************************************
    <section id="app">
      {{message}}
    </section>
	***************************************
  </body>
  <script src="./../script/vue.2.5.1.min.js"></script>
  <script type="text/javascript">
     ******************************************
      function create () {
        var app = new Vue({
          el: '#app',
          data () {
            return {
              message: 'this'
            }
          }
        })
      }
      apiready = function(){
        create();
      };
***********************************************
  </script>
  </html>
複製程式碼

此時已初始化完成，***區域為修改區域，為了節省空間，接下來只展示主要程式碼

如何在瀏覽器中除錯apiCloud專案

// js
function create () {
    var app = new Vue({
        el: '#app',
        data () {
            return {
                message: 'this'
            }
        }
    })
}
********************************
window.onload = function(){
    create();
};
**************************
複製程式碼

將apiready改為window.onload即可在瀏覽器中除錯

藉助render函式實現元件的封裝和引用

普通方式封裝元件
html:
********************************
<section id="app">
    <child :message="message"></child>
</section>

<template id="child">
    <div>
        {{message}}
    </div>
</template>
********************************

js:
function create () {
    var app = new Vue({
        el: '#app',
        ***********************
        components: {
            child: {
                template: '#child',
                props: ['message']
            }
        },
        ********************************
        data () {
            return {
                message: 'this'
            }
        }
    })
}
window.onload = function(){
    create();
};
複製程式碼

可以看到，這種形式封裝的元件，因為需要template模板的緣故幾乎無法抽離

render形式封裝
html:
***************
<section id="app">
    <child :message="message"></child>
</section>
****************

js:
function create () {
    var app = new Vue({
        el: '#app',
        ********************************
        components: {
            child: {
                render: function (g) {
                    return g('div', {
                        domProps: {
                            innerHTML: this.message
                        }
                    })
                },
                props: ['message']
            }
        },
         *******************************
        data () {
            return {
                message: 'this'
            }
        }
    })
}
window.onload = function(){
    create();
};
複製程式碼

可以看到，這種形式的封裝，可以將child對應的值抽離出一個物件，從而從外部引入

元件抽離與引入

新建index.js，抽離元件

var child = {
  render: function (h) {
    return h('div', {
      domProps: {
        innerHTML: this.message
      }
    })
  },
  props: ['message']
}
複製程式碼

引入元件

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
  </head>
  <body>
    <section id="app">
      <child :message="message"></child>
    </section>

  </body>
  <script src="./../script/vue.2.5.1.min.js"></script>
  **********************
  <script src="./index.js"></script>
  **********************
  <script type="text/javascript">
      function create () {
        var app = new Vue({
          el: '#app',
          components: {
          ************************
            child: child
            ***********************
          },
          data () {
            return {
              message: 'this'
            }
          }
        })
      }
      window.onload = function(){
        create();
      };
  </script>
  </html>

複製程式碼

此時已經實現了Vue元件在多頁面應用中的抽離，接下來我們來研究一下render函式

render函式中值得注意的點

createElement

createElement接收三個引數，我們經常以h來作為它的別名

  • [x] 第一個引數是你要渲染的標籤名 {String | Object | Function}
  • [x] 第二個引數是你當前標籤上的屬性和方法 {Object}
  • [x] 第三個引數是當前標籤下的子標籤，接收createElement例項作為陣列中的每一項 {Array}

接下來對第二個引數進行說明

{
  // 和`v-bind:class`一樣的 API
  // 接收一個字串、物件或字串和物件組成的陣列
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一樣的 API
  // 接收一個字串、物件或物件組成的陣列
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 元件 props
  props: {
    myProp: 'bar'
  },
  // DOM 屬性
  domProps: {
    innerHTML: 'baz' // innerHTML必須寫對
  },
  // 事件監聽器基於 `on`
  // 所以不再支援如 `v-on:keyup.enter` 修飾器
  // 需要手動匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅用於元件，用於監聽原生事件，而不是元件內部使用
  // `vm.$emit` 觸發的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
  // 賦值，因為 Vue 已經自動為你進行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽格式
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果元件是其他元件的子元件，需為插槽指定名稱
  slot: 'name-of-slot',
  // 其他特殊頂層屬性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函式中向多個元素都應用了相同的 ref 名，
  // 那麼 `$refs.myRef` 會變成一個陣列。
  refInFor: true
}
複製程式碼

這裡官網有詳細的說明，請自行參考

cn.vuejs.org/v2/guide/re…

v-show在render函式中的實現
var child = {
  render: function (h) {
    return h('div', {
    *****************
      style: {
        display: this.visible ? undefined : 'none'
      },
      ***************
      domProps: {
        innerHTML: this.message
      }
    })
  },
  **************
  props: ['message', 'visible']
  ***************
}

複製程式碼
v-for在render函式中的實現
html:
<ul>
  <li v-for="item in items">{{ item.name }}</li>
</ul>

js:
var child = {
  render: function (h) {
  *********************
    return h('ul', this.items.map(function (item) {
      return h('li', item.name)
    }))
    *******************
  },
  *****************
  props: ['items']
  *****************
}
複製程式碼
v-model在render函式中的實現
html:
<input type="text" v-model="value">

js:
var child = {
  render: function (h) {
    var self = this;
    return h('input', {
      on: {
        input: function (even) {
          self.value = even.target.value
        }
      }
    })
  },
  data () {
    return {
      value: ''
    }
  },
  props: ['items']
}
複製程式碼

相關文章