Vue中的的坑（二） 元件的包裹 div

2021-09-29 20:05:48 字數 953 閱讀 4202

廢話不多說，直接先上**

<


!doctype html>


"en"


>


"utf-8"


>


元件模板分離<


/title>


<


/head>


"box"


>


}<


/h3>


使用分離後的元件


<


/cpn>


<


/div>


"text/x-template" id=


"com_01"


>


**閱讀網<


/h1>


這裡是**的內容<


/p>


<


/div>


<


/script>


"vue.js"


>


<


/script>


//註冊元件


vue.


component


('cpn',)


newvue(,


})<


/script>


<


/body>


<


/html>
這裡要說的是一點小坑。在分離模板的時候我自己擅自將

"text/x-template" id=


"com_01"


>


**閱讀網<


/h1>


這裡是**的內容<


/p>


<


/div>


<


/script>
這段**中的div給去掉了，學習的過程中沒強化div對元件的包裹，因此在瀏覽器中顯示的是h1的內容，下面p標籤和hr標籤都沒有顯示，和預料的結果不太一樣，後來看教程中是用div包裹，新增之後就完整了。被template 的div給坑了一次。

Vue 002 元件的使用

定義乙個全域性的元件的方法 vue.component submission component const submissioncomponent new vue 單行建立元件 const submissioncomponent 多行建立元件 const submissioncomponent 1...

react（二） 元件的通訊

對於元件來說，通訊無非兩種，父子元件通訊，和非父子元件通訊 一 父子父子元件通訊 1 父元件給子元件傳值 對於父元件來說，props是他們之間的媒介 class parent extends component componentdidmount 1000 render class child 1 ...

Vue元件基礎 一 元件的建立

這裡簡單介紹一下元件建立的三種方法 方式1 extend建立的元件 用乙個變數接收extend建立的元件 var com vue.extend 然後把建立好的元件放入到vue中 vue.component first component com 第二種 註冊全域性元件 注意元件必須在vue控制的元素...