Vue快速入門-2-Vue框架高階操作
阿新 • • 發佈：2018-12-12
小生部落格：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:'<h3>我是標題!!</h3>'
}
}
});
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>- Vue的ajax
詳情檢視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 -- 操作異常時執行的動作