Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的
更新時(shí)間：2020年06月05日 10:35:12 作者：Vam的金豆之路
這篇文章主要介紹了Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
我們在使用Vue做項(xiàng)目時(shí)，都會(huì)用到腳手架，相應(yīng)的我們會(huì)在template寫標(biāo)簽內(nèi)容。那么你知道為什么會(huì)在template寫標(biāo)簽嗎？這當(dāng)中經(jīng)過了怎樣的處理呢？
<template> <div id="app"> <div id="nav"> </div> <router-view/> </div> </template> <style lang="less"> </style>
其實(shí)Vue在處理template時(shí)，是經(jīng)過這樣處理的，它是通過內(nèi)置的render方法處理我們輸入的標(biāo)簽，生成VNodes。下面我注釋了template內(nèi)的代碼，你可以先看下效果，然后注釋掉render方法內(nèi)的內(nèi)容，取消注釋template?？聪虑昂笮Ч欠褚粯?。
<!DOCTYPE html>
<html>
<head>
<title>render</title>
</head>
<style type="text/css">
#text{
font-weight: bold;
font-size: 26px;
}
</style>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data: {
text: 'hello world',
style1: {
width: '200px',
height: '200px',
border: '1px solid red'
},
style2: {
textAlign: 'center'
},
colorText: {
color:'blue'
}
},
// template:`<div :style='style1'>
// <p :style='style2'>
// <span :style='colorText' @click='cli()' id='text'>{{text}}</span>
// </p>
// </div>`,
// methods:{
// cli(){
// alert(1)
// }
// },
render(createElement) {
return createElement('div', {
style: this.style1
}, [
createElement('p', {
style: this.style2
}, [createElement('span', {
style: this.colorText,
attrs:{
id:'text'
},
on:{
click:()=>{
alert(1)
}
}
}, this.text)])
])
}
})
</script>
</html>
到此這篇關(guān)于Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的的文章就介紹到這了,更多相關(guān)Vue渲染template內(nèi)容內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue使用虛擬鍵盤及中英文切換的相關(guān)資料,有時(shí)候在大型觸屏設(shè)備(如雙屏設(shè)備)中往往就沒有鍵盤去操作,所以就需要去建立一個(gè)虛擬鍵盤去操作,需要的朋友可以參考下2023-06-06
vue中關(guān)于this.refs為空出現(xiàn)原因及分析
這篇文章主要介紹了vue中關(guān)于this.refs為空出現(xiàn)原因及分析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue2與Vue3兄弟組件通訊bus的區(qū)別及用法，有需要的朋友可以借鑒參考下，希望可以有所幫助，祝大家多多進(jìn)步早日升職加薪2021-09-09
Vant 中的Toast設(shè)置全局的延遲時(shí)間操作
這篇文章主要介紹了Vant 中的Toast設(shè)置全局的延遲時(shí)間操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue.js更改調(diào)試地址端口號(hào)的實(shí)例
今天小編就為大家分享一篇Vue.js更改調(diào)試地址端口號(hào)的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳細(xì)講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫
當(dāng)我們自己開發(fā)了一個(gè) _UI Component_, 需要在多個(gè)項(xiàng)目中使用的時(shí)候呢? 我們首先想到的可能是直接復(fù)制一份過去對嗎?我們?yōu)槭裁床话l(fā)布一個(gè) UI 組件庫給自己用呢?下面小編和大家來一起學(xué)習(xí)下吧2019-05-05
vue中v-for數(shù)據(jù)狀態(tài)值變了,但是視圖沒改變的解決方案
這篇文章主要介紹了vue中v-for數(shù)據(jù)狀態(tài)值變了，但是視圖沒改變的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue 之 .sync 修飾符的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-04-04
Vue調(diào)用PC攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了Vue調(diào)用PC攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
解決打包后出現(xiàn)錯(cuò)誤y.a.addRoute is not a function的
這篇文章主要介紹了解決打包后出現(xiàn)y.a.addRoute is not a function的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10