vue的全局api
什么是全局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上面的键。
