我們接著上篇學習完render函式，下面我們來看下vue中的函式式元件
這也是vue高階中乙個重要的知識點，下面我們一起來學習下吧(我也不是很熟?，有錯誤就請指正)
我們先封裝乙個簡單的元件，叫做list
**如下:
li裡面的內容我們先不管！
我們再新建乙個叫做render的元件
我們把剛剛的list元件引入到render元件裡
list元件裡完善下li標籤裡面的內容
}
render元件裡傳遞進來的list資料給list元件使用並且渲染出了名字，這裡我們用span標籤包裹了，那麼如果我們想更多的讓使用者個性化，比如使用者想用什麼標籤包裹就用什麼標籤包裹，怎麼做呢？
那麼這裡我們就可以使用render函式，然後讓使用者通過render函式自己去定義，來看下怎麼寫
這裡我們回到render元件，把render函式通過v-bind傳遞到list裡去
render元件的**：
list中他是通過v-for迴圈的，
那麼我們想知道當前迴圈的這個值是多少，那麼這裡我們就要用到乙個元件叫做：函式式元件
那麼接著上面，我們先建立乙個render-dom.js
**如下
export
default
, render:
(h, ctx)
=>
}
一般而言，我們只給它傳入一些資料，它不做任何響應式的操作，不監聽傳遞給他的狀態，它也沒有生命週期，它只是乙個接收引數的函式，當設定functional為true時，它是乙個沒有狀態的元件，但是當你把他引入到其他vue元件中去用的時候，vue會把它做相關處理，上面我們寫了乙個render函式，vue會用render函式裡的邏輯，把裡面返回的節點做渲染！
接著我們回到list元件，在props裡接收父元件(render元件)傳遞過來的render函式
props處新增**：
render:
}
把剛剛render方法裡的邏輯完善下就是
render: (h, ctx) =>render其實就是使用者傳進來的那個render
ctx他其實就指代當前的上下文，那麼我們就可以用ctx獲取到屬性裡的renderfunc
接下來繼續到list元件裡使用renderdom函式式元件
模板中新增:}
script引入:
import renderdom from '../component/render-dom'
components: ,
接下來我們回到render元件裡把剛剛的render函式完善下：
renderfunc(h,name)
},name)
}
那麼這樣我們就完成了可以讓使用者自己定義這個文字該怎麼樣展現！render配合函式式元件就是這麼靈活!
那麼大家應該也發現了，render加函式式元件其實非常繁瑣！那麼有沒有什麼東西可以簡化呢？
其實是有的，那就是jsx！
jsx是react最先提出的，那麼後來vue也做了相關支援！他的本質其實就是在js中寫html標籤和一些特定的語法，最終呢他會把jsx轉換成render函式去渲染。
接下來我們回到render元件裡把剛剛的render函式修改下：
之前template是這樣的:
"list"
:render=
"renderfunc"
>
<
/list>
之前js是這樣的:
renderfunc
(h,name)
},name)
}修改之後的template：
"list"
:render=
"renderfunc"
:style=
"">
<
/list>
修改之後的js:
renderfunc
(h,name)
}>
<
/i>
)}
這樣就完成了和剛剛render函式一樣的功能！
如果我們想給i標籤繫結乙個事件，我們應該怎麼繫結?
methods:)},
handleclick(event)
}
on-開頭
那麼普通的渲染標籤我們會了，那麼如果渲染乙個元件呢？
那麼這裡假設我們這裡有乙個元件countto(看過上上篇文章的小夥伴應該知道)元件
我們把他引入到render元件(看過上篇文章的小夥伴應該知道這個元件)中.再寫一遍！
我們這裡需要修改之前的一些**：
本篇文章我們一起學習了render+函式式元件，最終我們完成了之前的需求，但過程還是比較繁瑣的，結尾我們也提到了jsx的解決方案， 感興趣的小夥伴可以關注我，大家一起學習vue中比較難理解的知識點哦！各位大佬，如果發現文中的錯誤，請指正，我會及時修改！
後端學前端之css
注意 css的注釋，只能使用 css cascading style sheets 層疊樣式表,是一種用來表現html 標準通用標記語言的乙個應用 或xml 標準通用標記語言的乙個子集 等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化 層疊 ...
重學前端之 關於閉包
剛開始學習前端的時候，學習閉包暈頭轉向，都不知道什麼是什麼，在接觸變成一段時間後發現因為自己基本功不紮實的原因導致基本概念不理解所以對閉包根本無法掌握，這篇文章以我自己的理解記錄一下學習對於閉包的學習歷程。區域性變數 可以簡單理解成函式內部申明的變數 全域性變數 可以簡單理解成最外層被申明的變數 複...
重新開始學前端之浮動
1.浮動 1.1 什麼是浮動 float是乙個css定位屬性,要了解他的目的和起源,我們可以看看印刷設計,在列印布局中,可以將影象設定到頁面中,使得文字根據需要環繞他們。而在頁面中浮動是這樣工作的 浮動元素會脫離正常的文件布局流,並吸附在其父容器的左邊 右邊 float left right 在正常...