vue學習（三） vue元件
元件
一個大的物件；
定義程式碼：
<div id="box">
<bc></bc>
</div>
<hr>
<script>
var aaa = Vue.extend({
template: 'This is a vue 全域性元件。'
})
Vue.component('bc',aaa);
new Vue({
el: '#box',
data: {
},
methods: {
}
})
效果：
全域性元件
全域性下定義的元件
通過Vue.extend({})來定義元件的模板，再通過vue.component(‘name’，module)來繫結，在html中就可以直接使用
可以直接通過vue.component('name',obj)的方式來宣告 方式二的宣告方式
ps: **component不能使用例項的data ，但是可以在component 使用data 宣告變數，data的使用只能使用函式形式資料的翻譯形式只能是json的格式**
<div id="box">
<qj1 正確理解全域性的意思。 只有在掛載了vue的地方，去使用元件，都是ok的。
區域性元件
區域性元件，宣告方式和全域性類似，只是定義在了一個vue例項物件裡面
<div id="jb1">
<jb1></jb1><br><hr>
<jb2></jb2><br><hr>
<jb3></jb3>
</div>
<script>
var jb1 = Vue.extend({
template: 'This is 區域性元件. <strong>{{msg}}</strong>',
data: function (){
return {
msg: '區域性元件，資料資訊1。'
}
}
})
var jb2 = Vue.extend({
template: 'This is 區域性元件. <strong>{{msg}}</strong>',
data: function (){
return {
msg: '區域性元件，資料資訊2。'
}
}
})
new Vue({
el: '#jb1',
components: {
'jb1': jb1,
'jb2': jb2,
'jb3': {
template: '區域性元件3.{{msg}}',
data: function (){
return {
msg: '資料資訊3'
}
}
}
}
})
</script>配合模板使用
如果template裡面的內容過多的話，可以使用模板來進行呼叫。為template設定一個id值繫結到模板
模板的建立方式有兩種：
1：通過 script+id+type <script type="x-template" id="zjmb1">xxx</script>
2：通過 template標籤+id <template id='aaa'>xxx</template>
<div id="zjmb">
<zjmb1></zjmb1>
<br><br><hr>
<zjmb2></zjmb2>
</div>
<script type="x-template" id="zjmb1">
<h1>元件配合模板使用</h1>
<p>{{msg}}</p>
<button @click="show()">clickMe</button>
</script>
<template id="zjmb2">
<h1>元件配合模板使用2</h1>
<p>{{msg}}</p>
<button @click="show()">clickMe</button>
</template>
<script>
new Vue({
el: '#zjmb',
components: {
zjmb1: {
template: '#zjmb1',
data(){
return {
msg: '資料是元件模板的資料。'
}
},
methods: {
show(){
alert('元件配合模板使用。')
}
}
},
zjmb2: {
template: '#zjmb2',
data(){
return {
msg: '元件配合模板使用2。另外一種方式建立'
}
},
methods: {
show(){
alert('元件配合模板使用2。另外一種方式建立')
}
}
}
}
})
</script>動態元件
格式: <component :is="元件名稱"></component>
通過點選button來改變aaa，進而根據aaa的不同，實現元件更換
<div id="dtzj">
<input type="button" value="dtzj1" @click="aaa='dtzj1'" />
<input type="button" value="dtzj2" @click="aaa='dtzj2'" />
<componemt :is='aaa'></componemt>
</div>
<template id='dtzj1'>
<h1>動態元件1</h1>
<p>{{msg}}</p>
</template>
<script>
new Vue({
el:'#dtzj',
data:{
aaa:'dtzj1'
},
components:{
'dtzj1':{
template:'#dtzj1',
data(){
return {
msg: '動態元件資料',
}
},
methods:{
show(){
alert('動態元件方法')
}
}
},
'dtzj2':{
template:'<h1>動態元件2</h1>',
}
}
})
</script>父子元件
即元件裡面套元件
<div id="fzzj">
<fzzj1></fzzj1>
</div>
<template id='fzzj1'>
<h1>父子元件1</h1>
<p>This is 父子元件。</p>
<hr>
<fzzjchild></fzzjchild>
</template>
<script>
//父子元件
new Vue({
el: '#fzzj',
data: {
},
components: {
'fzzj1': {
template:'#fzzj1',
components: {
'fzzjchild': {
template: '<h2>父子元件的子元件</h2>'
}
}
}
}
})
</script>效果：
子元件無法獲取父元件資料，需要經過處理才能獲取到
<!--這裡子元件是不能獲取到父元件的資料的-->
<div id="fzzj">
<fzzj1></fzzj1>
</div>
<template id='fzzj1'>
<h1>父子元件1</h1>
<p>This is 父子元件。</p>
<p>{{msgF}}</p>
<hr>
<fzzjchild></fzzjchild>
</template>
<script>
//父子元件
new Vue({
el: '#fzzj',
data: {
},
components: {
'fzzj1': {
template:'#fzzj1',
data(){
return {
msgF: "這是父元件的資料。"
}
},
components: {
'fzzjchild': {
template: '<h2>父子元件的子元件</h2><p>{{msgZ}}</p><p>父元件資料：{{msgF}}</p>',
data(){
return {
msgZ: "這是子元件的資料。"
}
},
}
}
}
}
})
</script>
處理：
在呼叫子元件： <bbb :m="資料"></bbb>
子元件之內:
props:['m','myMsg'] // 多個數據，用逗號隔開就好
props:{ // 如果以物件的形式，這種表示 ‘資料’：資料型別
'm':String,
'myMsg':Number
}
<div id="fzzj">
<fzzj1></fzzj1>
</div>
<template id='fzzj1'>
<h1>父子元件1</h1>
<p>This is 父子元件。</p>
<p>{{msgF}}</p>
<hr>
<fzzjchild :msg='msgF' :msg2='msgF2' :my-msg='msgF3'></fzzjchild>
</template>
<script>
//父子元件
new Vue({
el: '#fzzj',
data: {
},
components: {
'fzzj1': {
template:'#fzzj1',
data(){
return {
msgF: "這是父元件的資料。",
msgF2: '父元件資料2.',
msgF3: 333
}
},
components: {
'fzzjchild': {
// props: ['msg','msg2'], // 有多條資料的或，用逗號隔開。
// 如果是以物件的實行，則後面的表示資料型別
props: {
'msg': String,
'msg2': String,
'myMsg': Number,
},
template: '<h2>父子元件的子元件</h2><p>{{msgZ}}</p><p>父元件資料：{{msg}}</p><p>父元件資料2：{{msg2}}</p><p>父元件資料3：{{myMsg}}</p>',
data(){
return {
msgZ: "這是子元件的資料。"
}
},
}
}
}
}
})
</script>
父元件也是無法獲取到子元件的資料的，同樣需要做處理。
*子元件把自己的資料，傳送到父級
vm.$emit(事件名,資料);
v-on: @
上面的案例，繼續更改，得到父元件可以獲取到子元件的資料
<div id="fzzj">
<fzzj1></fzzj1>
</div>
<template id='fzzj1'>
<h1>父子元件1</h1>
<p>This is 父子元件。</p>
<p>{{msgF}}</p>
<p>子元件的資料： {{msgZ1}}</p>
<hr>
<fzzjchild :msg='msgF' :msg2='msgF2' :msg3='msgF3' @msg-z="get"></fzzjchild>
</template>
<script>
//父子元件
new Vue({
el: '#fzzj',
data: {
},
components: {
'fzzj1': {
template:'#fzzj1',
data(){
return {
msgF: "這是父元件的資料。",
msgF2: '父元件資料2.',
msgF3: 333,
msgZ1: 111,
}
},
methods: {
get(msg) {
this.msgZ1 = msg;
}
},
components: {
'fzzjchild': {
// props: ['msg','msg2'], // 有多條資料的或，用逗號隔開。
// 如果是以物件的實行，則後面的表示資料型別
props: {
'msg': String,
'msg2': String,
'msg3': Number,
},
template: '<h2>父子元件的子元件</h2><p>{{msgZ}}</p><p>父元件資料：{{msg}}</p><p>父元件資料2：{{msg2}}</p><p>父元件資料3：{{msg3}}</p><button @click="send()">send</button>',
data(){
return {
msgZ: "這是子元件的資料。"
}
},
methods: {
send(){
this.$emit('msg-z',this.msgZ);
}
}
}
}
}
}
})
</script>vm.$dispatch(事件名,資料) 子級向父級傳送資料
vm.$broadcast(事件名,資料) 父級向子級廣播資料
配合: event:{}
在vue2.0裡面已經，報廢了
slot
作用: 佔個位置
類似ng裡面 transclude （指令）
程式碼解釋：
<div id="box">
<aaa>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h1>xxxx</h1>'
}
}
});
</script>當在使用元件的時候，元件內有其他內容填充，我們可以使用slot來佔位，避免元件內的內容缺失不顯示，因此我們可以在定義元件的時候，放上一些slot佔位
<div id="box">
<aaa>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</aaa>
<hr>
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>xxxx</h1>
<slot>這是預設的情況</slot>
<p>welcome vue</p>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
</script>效果：
又有情況會出現，如果元件裡的內容過多，怎麼確定slot的對應問題呢？
ps： 在元件中，為每一個slot增加一個name，在使用元件的時候，給對應填充的地方的根標籤上加上slot=name 就ok
<div id="box">
<aaa>
<ul slot="ul-slot">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ol slot="ol-slot">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</aaa>
<hr>
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>xxxx</h1>
<slot name="ol-slot">這是預設的情況</slot>
<p>welcome vue</p>
<slot name="ul-slot">這是預設的情況2</slot>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
</script>效果：
相關推薦
vue學習（三） vue元件
元件 一個大的物件； 定義程式碼： <div id="box"> <bc></bc> </div> <hr> <script>
vue學習（三）：父元件向子元件傳參
既然是元件化開發，當然少不了資料傳遞，我們先看看官網上寫的。 使用props傳遞引數，試一下，還是用我們之前的專案結構 一、靜態傳遞 1.main_header.vue <template> <div>{{msg}}</div> &
Vue學習（六）——父子元件之間的傳值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>子元件和父元件通訊(釋出訂閱模式)</title> <script sr
Vue學習（三）——屬性繫結和雙向資料繫結
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>屬性繫結和雙向資料繫結</title> <script src="./v
Vue學習（三）：數據綁定語法
ESS com tle pre ext 分享圖片 info sage 文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
vue學習（三）完善模板頁(bootstrap+AdminLTE)
<template> <header class="main-header"> <!-- Logo --> <a href="index2.html" class="logo"> <!--
vue學習（二）：元件化開發
首先看看vuedemo的入口函式main.js// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.
springboot+springcloud+vue學習（三）
thymeleaf模板 ：（前端了解不多，主要使用vue，後期再做介紹） springboot 對jsp不是很友好，官方推薦使用thymeleaf模板 Thymeleaf最大的特點是能夠直接在瀏覽器中開啟並正確顯示模板頁面，而不需要啟動整個Web應用。 需要特別注意的是Thymeleaf對於URL的處理
vue學習（三）資料驅動案例
前一篇：node學習（四）初始化前端vue專案 入門程式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<
從零開始學 Web 之 Vue.js（三）Vue實例的生命周期
報錯 web 前端 cnblogs 前端 eth code vue 公眾 des 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
Vue學習（1）vue模板-vuex簡介
好在之前接觸過 flux，對於理解 vuex 還是很有幫助的。react 學到一半，後來因為太忙，就放棄了，現在也差不多都忘記了。不過感覺 vuex 還是跟 flux 還是有點區別的。 對於很多新手來說，只是閱讀文件是不好消化，我的建議是看看 vuex 的例項，通過研究例項來學習vuex。這樣就會好理
vue學習（二）—vue.js2.0全域性API學習
Vue.directive自定義指令 <!DOCTYPE html> <html> <head> <meta charset
vue學習（二） vue生命週期 vue自定義指令和過濾器
生命週期鉤子函式 vue的生命週期圖示 vue的幾個鉤子函式 直接程式碼展示： <div id="box"> {{msg}} </div> <script>
vue.js學習筆記（三）--父子元件通訊總結
部落格地址：https://fisher-zh.github.io 在使用Vue的過程中，如果需要進行父子元件間的通訊，通過查閱官方文件 我們可以瞭解到只需要在子元件要顯式地用 props選項宣告它期待獲得的資料，同時在其使用過程中傳入相應的資料即可，例如： Vu
vue移動音樂app開發學習（三）：輪播圖組件的開發
hub out webapp width eth reat slot utc -1 本系列文章是為了記錄學習中的知識點，便於後期自己觀看。如果有需要的同學請登錄慕課網，找到Vue 2.0 高級實戰-開發移動端音樂WebApp進行觀看,傳送門。 完成後的頁面狀態以及項目結構如
vue餓了麼（三）--goods元件 & shopcart元件
1.goods.vue滾動實現："better-scroll" 1.package.json中引入"better-scroll"。cnpm install --------》 npm run dev "dependencies": { "axios
vue響應式原理學習（三）— Watcher的實現
普及知識點 為什麼我們改變了資料，Vue能夠自動幫我們重新整理DOM。就是因為有 Watcher。當然，Watcher 只是派發資料更新，真正的修改DOM，還需要借用VNode，我們這裡先不討論VNode。 computed 計算屬性，內部實現也是基於 Watcher watc
Vue.js的元件（三）父元件與子元件的資料聯絡 之 子傳父 之 自定義事件
父傳子是單向的，子會因父的改變而改變，但父並不會因子的改變而改變。這是由於Vue.js怕父的資料會被使用者在不知情的情況下改變。 但是，子還是可以繞一個圈，把自己的資料傳給父。 途徑：自定義事件。 在解釋子資料傳給父之前，必須先要對事件有一個瞭解。 所謂
vue學習（四）：子元件向父元件傳參
子元件向父元件傳參主要依靠 v-on 和 $.emit 這個是vue官網上給的方法呼叫，我們看看頁面上怎麼使用。 子元件 main_Header.vue <template> <div> <div>{{count}}</
vue學習（五）元件
1.簡單案例 <div id="components-demo"> <button-counter></button-counter> </div>