Vue快速入門-2-Vue框架高級操作
阿新 • • 發佈：2018-12-12
定義變量 交流 全局變量 ava width 所有應用 ssa 發表 change 小生博客：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 -- 操作異常時執行的動作Vue快速入門-2-Vue框架高級操作