溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小生博客：http://xsboke.blog.51cto.com
-------謝謝您的參考，如有疑問，歡迎交流目錄:
1. 自定義組件 2. 全局注冊的自定義組件 3. 局部注冊自定義組件 4. 組件的嵌套 5. 組件的動態切換 6. Vue的ajax
就相當于自定義標簽,其實底層還是html標簽,只不過是套了個名字
自定義組件分為全局注冊和局部注冊
共同點:
為什么data必須以函數方式返回數據？
因為在函數中,變量屬于內部變量,這樣當自定義組件被多次引用時變量不會互相影響.
只能在Vue對象中使用自定義組件
不同點:
全局注冊的自定義組件：創建組件之后,只要是Vue對象就可以使用
局部注冊的自定義組件：在Vue實例中使用components選項來定義你的局部組件全局注冊的自定義組件
2.1 組件的結構
Vue.component('component-name',{ /* ...... */})
-- 'component-name' 組件名稱
-- { /* ...... */} 組件的內容(執行的函數)2.2 簡單組件的實現
<div id="app">
<button-counter></button-counter>
</div>
<div id="app1">
<button-counter></button-counter>
</div>
<script type="text/javascript">
// 自定義組件也是一個Vue對象,因此之前的data,methods,鉤子函數都是可用的
Vue.component('button-counter',{
data:function(){ -- 因為返回的是函數,所以兩個應用了組件的標簽中的count值是互不影響的
return { -- 如果需要所有應用的當前組件的count值都一樣,可以定義一個全局變量再引入這里
count:0
}
},
// 自定義組件最后返回的結果
template:'<button v-on:click="count++"><b>{{count}}</b></button>' -- 當點擊按鈕時,count的值就+1,template定義的是真正生成的html
})
new Vue({el:'#app'}) -- 可以看到只要是Vue對象就可以應用全局自定義組件
new Vue({el:'#app1'})
</script>2.3 當你需要多個組件之間的data返回值相同時可以這樣解決.
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script type="text/javascript">
var mydata= {count:0} -- 在外部定義變量
// 自定義組件也是一個Vue對象,因此之前的data,methods,鉤子函數都是可用的
Vue.component('button-counter',{
data:function(){
return mydata; -- 在組件中應用
},
// 自定義組件最后返回的結果
template:'<button v-on:click="count++"><b>{{count}}</b></button>'
})
new Vue({el:'#app'})
</script>2.4 解決你template里面的內容比較龐大時的操作
```
<head>
<script type="text/template" id="temp"> -- 首先在head中定義一個類型(type)為"text/template"的script標簽,然后增加一個唯一的屬性如下id="temp"
<div>
{{message}}
<ul>
<li>第一部分：Vue基本語法</li>
<li>第二部分：自定義組件</li>
</ul>
</div>
</script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<div id="app2">
<my-header></my-header>
</div>
<script type="text/javascript">
Vue.component('my-header',{
template:'#temp' -- 然后在template中指定這個id名即可
});
new Vue({el:'#app'});
new Vue({el:'#app2'});
</script>
</body>
``` 局部注冊自定義標簽就是在Vue實例里面通過components選項創建自定義標簽
<head>
<script type="text/template" id="temp">
<div>
{{message}}
<ul>
<li>第一部分：Vue基本語法</li>
<li>第二部分：自定義組件</li>
</ul>
</div>
</script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script type="text/javascript">
// 局部組件就是Vue對象內部定義的組件,僅僅自身可以使用
var vue = new Vue({
el:'#app',
components:{
'my-header':{ -- 創建一個名為'my-header'的自定義標簽
template:'#temp', -- 關聯模板
data:function(){
return{
message:'hello vue'
}
}
}
}
})
</script>
</body> 知識點:使用slot的name屬性,用來關聯標簽或者組件,實現定義嵌套標簽或者組件的位置
<div id="app">
<my-header>
<my-title>組件與組件之間嵌套</my-title>
</my-header>
</div>
<div id="app2">
<my-header>
<button slot="vleft">左</button> -- 這里的slot值必須和Vue實例中components選項的name值一樣
<button slot="vright">右</button>
</my-header>
</div>
<script>
var vue = new Vue({
el:'#app',
// 組件局部注冊
components:{
'my-header':{
// 系統給定的slot來實現標簽的嵌套操作
template:'<div>我是頭部內容<slot /></div>' -- 當只需要嵌套一個標簽或組件時,直接使用slot,不需要定義name
},
'my-title':{
template:'<h4>我是標題!!</h4>'
}
}
});
var vue = new Vue({
el:'#app2',
// 組件局部注冊
components:{
'my-header':{
// 系統給定的slot來實現標簽的嵌套操作
template:'<div><slot name="vleft" />我是頭部內容<slot name="vright" /></div>'
}
}
})
</script> 類似JQuery的tab
<!--
1: component標簽的is屬性來完成組件動態綁定
2: 按鈕的@click來修改data屬性從而切換組件
3: keep-alive 標簽來保留組件的狀態值
-->
<div id="app">
<button @click="changeComp(1)">第一項</button>
<button @click="changeComp(2)">第二項</button> -- 點擊按鈕時執行changeComp函數,并且傳入實參"2".
<button @click="changeComp(3)">第三項</button>
<keep-alive> -- 使用keep-alive標簽可以保留當前組件的狀態值,防止組件之間切換時,值丟失
<component v-bind:is="nowHeader"></component>
</keep-alive>
</div>
<script>
var vue = new Vue({
el:'#app',
data:{
nowHeader:'header-1'
},
components:{
'header-1':{template:'<div>組件1:<input /></div>'},
'header-2':{template:'<div>組件2:<input /></div>'},
'header-3':{template:'<div>組件3:<input /></div>'},
},
methods:{
changeComp:function(index){
this.nowHeader = 'header-' + index -- 當changeComp函數被觸發時,Vue實例data中的變量"nowHeader",將根據實參的值而發生變化
}
}
})
</script>詳情查看axios中文手冊
中文手冊:https://www.kancloud.cn/yunye/axios/234845
自2.0之后Vue使用axios實現ajax功能
-- 注意使用axios需要引入axios的js文件
<table id="app" border="1" width="300px">
<!-- item就是循環的每個對象 -->
<tr v-for="item in result">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<script>
var vue = new Vue({
el:'#app',
data:{
result:[]
},
created:function(){ -- 在創建VUE實例后執行這個函數
// 通過axios訪問遠程數據
axios.get("data.json").then(function(result){ -- then是操作成功后執行的函數
this.result = eval(result.data); -- axios獲取的數據默認是string(這將導致您不能循環列表,字典等),可以使用eval將string的格式轉換成對象
}.bind(this)); -- bind(this)的意思是將Vue實例中的this和axios中的this綁定到一塊,
} -- 因為axios和Vue實例的數據是不互通的
})
</script>
then -- 操作成功后執行的動作
catch -- 操作異常時執行的動作免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
