2. 程式人生 > >vue Render函式

vue Render函式

阿新 • • 發佈：2019-02-02

絕大多數情況下使用template來構建html,Render函式用來滿足特點情況下完全使用JavaScript來程式設計

在遇到寫類似的元件的時候需要寫很多很長的程式碼，出於簡潔（懶惰使人進步）的角度來說，我們應該找到更合適的方法來實現該效果。

  1. <body>
  2.         <divid="app">
  3.             <mycomment:level="2">
  4.                 這是h2元素  
  5.             </mycomment>
  6.         </div>
  7.     </body>
  8.     <scripttype="text/x-template"id="is">
  9.   <div>
  10.     <h1v-if="level === 1">
  11.       <slot></slot>
  12.     </h1>
  13.     <h2v-if="level === 2">
  14.         <slot></slot>
  15.     </h2>
  16.     <h3v-if="level === 3">
  17.       <slot></slot>
  18.     </h3>
  19.     <h4v-if="level === 4">
  20.       <slot></slot>
  21.     </h4>
  22.     <h5v-if="level === 5">
  23.       <slot></slot>
  24.     </h5>
  25.     <h6v-if="level === 6">
  26.       <slot></slot>
  27.     </h6>
  28.   </div>
  29. </script>
  30.     <script>
  31.         Vue.component('mycomment',{  
  32.             template:'#is',  
  33.             props:{  
  34.                 level:{  
  35.                     type:Number,  
  36.                     required:true,  
  37.                 }  
  38.             }  
  39.         })  
  40.         var app =new Vue({  
  41.             el:'#app',  
  42.         })  
  43.     </script>
這時候Render 函式就很好的解決了這個問題，先來簡單一點額例子，算是有基本的骨架了
  1. <body>
  2.     <divid="app">
  3.         <render-teample:level="4">
  4.             render function  
  5.         </render-teample>
  6.     </div>
  7. </body>
  8. <script>
  9. Vue.component('render-teample',{  
  10.     render:function(createElement){  
  11.         return createElement(  
  12.             'h'+this.level,  
  13.             this.$slots.default  
  14.             )  
  15.     },  
  16.      props: {  
  17.     level: {  
  18.       type: Number,  
  19.       required: true  
  20.     }  
  21. }  
  22.     var app=new Vue({  
  23.         el:"#app",  
  24.     });  
  25. </script>

然後進一步給你的元件加入你想要的樣式需要事件，變得有血有肉
  1. <body>
  2.         <divid="app">
  3.             <render-teample:level="4">
  4.                 <divclass="jah"slot="myslot">render function</div>
  5.             </render-teample>
  6.         </div>
  7.     </body>
  8.     <script>
  9.     Vue.component('render-teample',{  
  10.         render:function(createElement){  
  11.             return createElement(  
  12.                 'h'+this.level,  
  13.                 {  
  14.                     'class':{  
  15.                         show:true,  
  16.                         hide:false,  
  17.                     },  
  18.                     style:{  
  19.                         width:'200px',  
  20.                         height:'400px',  
  21.                         background:'red',  
  22.                     },  
  23.                     attrs:{  
  24.                         name:'h-ex',  
  25.                         id:'h-id'  
  26.                     },  
  27.                     props:{  
  28.                         myprops:true,  
  29.                     },  
  30.                      on: {  
  31.                     click: function(event){  
  32.                         alert(this.num)  
  33.                     }  
  34.                 },  
  35.                     nativeOn:{  
  36.                         click:function(event) {  
  37.                             alert(1111)  
  38.                         }  
  39.                     }  
  40.                 },  
  41.                 [  
  42.                     this.$slots.myslot,  
  43.                     createElement('div',{  
  44.                          domProps:{  
  45.                         innerHTML:'holle render'  
  46.                     }  
  47.                     })  
  48.                 ]  
  49.                 )  
  50.         },  
  51.          props: {  
  52.         level: {  
  53.           type: Number,  
  54.           required: true  
  55.         }  
  56.     }  
  57. });  
  58.         var app=new Vue({  
  59.             el:"#app",  
  60.             data:{  
  61.                 num:110  
  62.             }  
  63.         });  

  64. 相關推薦

    Vue Render函式與Virtual Dom

    1.  什麼是Virtual Dom React與Vue 2 都是使用是Virtual Dom技術，Virtual Dom技術並不是真正的Dom，而是一個輕量級的JavaScript物件，在狀態發生改變的時候，Virtual Dom會進行Diff運算，來更新只需要被替換的Dom，而不是

    vue render函式使用jsx語法 可以使用v-model語法 vuex實現資料持久化

    render函式使用jsx語法： 安裝外掛  transform-vue-jsx   可以使用v-model語法安裝外掛 jsx-v-model .babelrc檔案配置：       vuex實現資料持久化&n

    Vue——render函式在ElementUi中的應用

    vue的render函式在日常開發中被廣泛應用，今天以ElementUI中的table表頭重構為引，實際應用一下藉助render函式實現表頭搜尋，不足之處請多多指教！ 首先引入官方demo <el-table :data="tableData" s

    vue Render函式

    絕大多數情況下使用template來構建html,Render函式用來滿足特點情況下完全使用JavaScript來程式設計 在遇到寫類似的元件的時候需要寫很多很長的程式碼，出於簡潔（懶惰使人進步）的角度來說，我們應該找到更合適的方法來實現該效果。 <bod

    Vue 進階系列（三）之Render函式原理及實現

    Vue進階系列彙總如下，歡迎閱讀，歡迎加高階前端進階群一起學習（文末）。 Vue 進階系列（一）之響應式原理及實現 Vue 進階系列（二）之外掛原理及實現 Render函式原理 根據第一篇文章介紹的響應式原理，如下圖所示。 在初始化階段，本質上發生在auto run函式中，然後通過r

    Vue.js（12）- 霸道的render函式渲染元件

    index.html <div id="app"> <p>這是index.html</p> </div> index.js // 匯入全的vue // import Vue from 'vue/dist/vue.js' //

    Vue提高16 render函式

    在某些場景下你可能需要render渲染函式帶來的完全程式設計能力來解決不太容易解決的問題，特別是要動態選擇生成標籤和元件型別的場景。 動態標籤 根據props來生成標籤的場景 <template> <div> <div v-if="l

    VUE中main.js、App.vue、index.html、render函式

    1. main.js main.js 入口檔案: 初始化vue例項並使用需要的外掛 2.App.vue App.vue 主元件：是我們的主元件所有頁面都是在App.vue下進行切換的 3.index.html 入口檔案：index的body中只有一個id為app的di

    vue---Vue2.x中的Render函式,render核心函式createElement()

    Render函式是Vue2.x版本新增的一個函式；使用虛擬dom來渲染節點提升效能，因為它是基於JavaScript計算。通過使用createElement(h)來建立dom節點。createElement是render的核心方法。其Vue編譯的時候會把temp

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

    標籤 Vue、apiCloud、HTML 寫在前面 背景介紹 因一些歷史遺留問題，需要維護一款藉助apiCloud開發的專案，需要實現公共元件抽離 通過此分享你將 瞭解apiCloud多頁面專案中引入Vue開發 如何在瀏覽器中除錯apiCloud專案

    vue物件render函式的三種實現

    第一種方式（$createElement）： //寫法三: const rootVue = new Vue( { router: vueRouter, render: function () { // return this.$cr

    vue render函數 函數組件化

    func 3.0 ring 一切都 ria 同時 ner class tee 之前創建的錨點標題組件是比較簡單，沒有管理或者監聽任何傳遞給他的狀態，也沒有生命周期方法，它只是一個接受參數的函數 在這個例子中，我們標記組件為functional，這意味它是無狀態(沒有data

    Vue render函數

    class ren reat scrip 使用 require ont eat cti Vue 推薦在絕大多數情況下使用template來創建你的HTML。然而的一些場景中，你真的需要javascript的完全編程能力， 這就是render函數，它比template更接近編

    vue render裏面的nativeOn

    comm function 分享 意思 logs reat es2017 clas src vue render裏面的nativeOn的解釋官方的解釋是:// 僅對於組件，用於監聽原生事件，而不是組件內部使用 `vm.$emit` 觸發的事件。 官方的解釋比較抽象 個

    render()函式進行伺服器端渲染(詳細)

    使用 Express 做服務端框架的時候，如果選擇一種類似於 EJS這種模板引擎渲染前端頁面的時候，經常服務端在響應 http 請求的時候呼叫 res.render({options}) 去向模板中渲染資料, 可以把檢視響應給客戶端. 框架 怎麼來的？ 安裝package.json

    Vue鉤子函式生命週期例項詳解

    vue生命週期簡介 Vue例項有一個完整的生命週期，也就是從開始建立、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、解除安裝等一系列過程，我們稱這是Vue的生命週期。通俗說就是Vue例項從建立到銷燬的過程，就是生命週期。 在Vue的整個生命週期中，它提供了一系列的事件，可以讓我們在事件觸發時註冊js

    Vue 建構函式、生命週期與資料雙向繫結

    Vue2 建構函式、生命週期與資料雙向繫結 Vue是一個響應式的、漸進式的JavaScript框架，它在設計上採用MVVM模式，將檢視與資料兩部分分離。下面就是一個簡單的Vue例項： <!DOCTYPE html> <html lang="en"> <h

    vue 鉤子函式 使用async await

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue 鉤子函式 使用async await</title&g

    vue對映函式mapState mapActions mapMutations mapGetters

    通過擴充套件運算子，將store裡的state/actions/mutations/getters的屬性或者方法直接對映到當前vue物件的this上，使用時直接this。xxx 使用前需要先引入 import {mapState, mapActions, mapMutations, ma

    iview使用之怎樣通過render函式在table元件表頭新增圖示及判斷多個狀態

      在實際專案開發中，我們經常會用到各種各樣的表格，比如在表格中填加下拉選單，按鈕，圖示及可以根據狀態顯示對應文字等等，因為這段時間一直在做後臺管理系統，所以表格用的就比較多，當然UI元件庫我用的是iview,PRD(原型圖)上的表格要求要可以判斷多個狀態及在表頭上新增圖示，在網上搜了一段時間發現比