什么是全局API
- 全局API並不在構造器里，而是先聲明全局變量或者直接在Vue上定義一些新功能，Vue內置了一些全局API，說的簡單些就是，在構造器外部用Vue提供給我們的API函數來定義新的功能。當然對應得也有局部的，只在當前的實例中可以用，比如局部過濾器。
Vue.directive自定義指令
- 我們前一個部分學習了vue中內部指令，其實我們也根據具體需求用Vue.directive來自定義指令
- 我們一般掌握自定義指令的簡寫形式就可以了，自定義中的鈎子函數的如bind，inserted可以了解一下，自定義指令鈎子函數
- 簡寫形式：
Vue.directive('bg', function (el, binding) {
el.style.backgroundColor = binding.value
})
自定義指令傳遞的參數解讀
- el:指令所綁定的元素，可以用來直接操作DOM
- binding:一個對象，包含很多信息，比如binding.value指的是指定綁定的值
用法
- 自定義指令可以像vue中的內部指令一樣直接在html中使用
- 接着上面的背景的自定義指令，例如：
<div v-bg='bgcolor'></div>
- 如果你在vue實例的data里定義了
bgcolor='red',那么上面那個div的背景顏色就是紅色了
過濾器filter
- 作用:文本數據格式化
- 過濾器用在的兩個地方{{}}和v-bind表達式
- 兩種過濾器:全局過濾器與局部過濾器
全局過濾器
- 說明：通過全局方式創建的過濾器，在任何一個vue實例中都可以使用
- 注意：使用全局過濾器的時候，需要先創建全局過濾器，再創建Vue實例
- 顯示的內容由過濾器的返回值決定
Vue.filter('filterName', function (value) {
// value 表示要過濾的內容
})
- 例如結合moment.js插件制作的一個全局時間格式化過濾器:
<div>{{ date | datefmt ('YYYY-MM-DD hh:mm:ss') }}</div>
<script>
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
return moment(input).format(fmtstring);
})
</script>
局部過濾器
- 說明：局部過濾器是在某一個vue實例的內容創建的，只在當前實例中起作用
{
data: {},
filters: {
filterName: function(value, format) {}
}
}
- 通過 filters 屬性創建局部過濾器, 注意：此處為 filters
Vue.extend構造器的延伸
- 說明:Vue.extend 返回的是一個“擴展實例構造器”,也就是預設了部分選項的Vue實例構造器。經常服務於Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組件名稱作為標簽的自定義元素時，會自動調用“擴展實例構造器”來生產組件實例，並掛載到自定義元素上。
- Vue-extend
- 注意:需要注意的是Vue-extend中的data必須是函數，並且return出來
自定義無參數標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>vue.extend-擴展實例構造器</title>
</head>
<body>
<h1>vue.extend-擴展實例構造器</h1>
<hr>
<author></author>
<script type="text/javascript">
var authorExtend = Vue.extend({
template:"<p>{{authorName}}</p>",
data:function(){
return{
authorName:'不止於學'
}
}
});
new authorExtend().$mount('author');
</script>
</body>
</html>
- 最后
標簽渲染后的結果就是不止於學
掛載到普通標簽上
- 還可以通過HTML標簽上的id或者class來生成擴展實例構造器，Vue.extend里的代碼是一樣的，只是在掛載的時候，我們用類似jquery的選擇器的方法，來進行掛載就可以了。比如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>vue.extend-擴展實例構造器</title>
</head>
<body>
<h1>vue.extend-擴展實例構造器</h1>
<hr>
<div id='author'></div>
<script type="text/javascript">
var authorExtend = Vue.extend({
template:"<p>{{authorName}}</p>",
data:function(){
return{
authorName:'不止於學'
}
}
});
new authorExtend().$mount('#author');
</script>
</body>
</html>
- 最終id名為author的div就渲染成不止於學
Vue.set(target,key,value)
- 用法：設置對象的屬性。如果對象是響應式的，確保屬性被創建后也是響應式的，同時觸發視圖更新。這個方法主要用於避開 Vue 不能檢測屬性被添加的限制。
- 示例：
<h1>Vue.set 全局操作</h1>
<hr>
<div id="app">
<ul>
<li v-for=" aa in arr">{{aa}}</li>
</ul>
</div>
<button onclick="add()">外部添加</button>
<script type="text/javascript">
function add(){
console.log("我已經執行了");
app.arr[1]='ddd';
//Vue.set(app.arr,1,'ddd');
}
var outData={
arr:['aaa','bbb','ccc']
};
var app=new Vue({
el:'#app',
data:outData
})
</script>
- 說明:這時我們的界面是不會自動跟新數組的，我們需要用Vue.set(app.arr,1,’ddd’)來設置改變，vue才會給我們自動更新，這就是Vue.set存在的意義。
動態添加數據的注意點
- 注意：只有data中的數據才是響應式的，動態添加進來的數據默認為非響應式
- 可以通過以下方式實現動態添加數據的響應式
- Vue.set(object, key, value) - 適用於添加單個屬性
- Object.assign() - 適用於添加多個屬性
var vm = new Vue({
data: {
stu: {
name: 'jack',
age: 19
}
}
})
/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')
/* Object.assign 將參數中的所有對象屬性和值 合並到第一個參數 並返回合並后的對象*/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })
template制作模板
一、直接寫在選項里的模板
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:`
<h1 style="color:red">我是選項模板</h1>
`
})
注意:這里需要注意的是模板的標識不是單引號和雙引號，而是，就是Tab上面的鍵。