Vue第二天
一, 自定义指令
使用场景: 当需要对普通的DOM元素进行底层的操作时可以考虑使用自定义指令实现. 自定义指令分两种:
1.全局自定义指令 在不同的vue实例的有效范围内都能使用
语法: Vue.directive(指令名,对象);
使用指令名时,名字前面加 v- 指令名如果有大写字母,在使用该指令时,需要在每个大写字母的前面加 - ,也可以把大写字母替换成小写字母,同样要在其前面加 - .
当自定义指令里只有bind和update两个函数,不再有其他函数时,可以对自定义指令的代码进行精简.
//body
<div id="app">
<h2 v-changebgc="bgc">这是app的h2标签</h2>
<p v-changebgc="bgc1">这是app的p标签</p>
</
//script
Vue.directive('changebgc',function (el,binding) {
el.onmouseenter=function () {
this.style.backgroundColor=binding.value.e;
};
el.onmouseleave=function () {
this.style.backgroundColor=binding.value.l
};
});
let app = new Vue({
el:'#app',
data:{
enterBgc:'blue',
bgc:{
e:'pink',
l:'yellow'
},
bgc1:{
e:'blue',
l:'red'
}
},
});2.局部自定义指令 只在其声明自定义指令的vue实例内起作用
let app = new Vue({
el:'#app',
directives:{
unif:{
bind(el, binding){
console.log('unif的bind函数触发',el, binding);
},
});二, 自定义过滤器
自定义过滤器: 对数据进行过滤 vue2.0版本不再提供系统的过滤器,如果想要使用过滤器,只有自定义 过滤器分两种: 1.全局过滤器 语法: Vue.filter('过滤器名字',回调函数); 函数的参数: 第一个参数: 过滤器 | 前面的值 第二个参数往后: 过滤需要的参数
<div id="app">
<h2>{{100.23434 | currency('$', 2)}}</h2>
</div>
Vue.filter('currency', function (value, flag, count) {
console.log(value, flag, count);
return flag+value.toFixed(count);
});2.局部过滤器
<div id="app">
<h2>{{'hello' | capital}}</h2>
</div>
let app = new Vue({
el:'#app',
filters:{
capital:function (value) {
return value[0].toUpperCase()+value.substr(1);
}
}
});三, 计算属性
计算属性是vue的特性, 计算属性与普通的函数调用的区别: 1.如果把解决问题的代码写进methods函数里并且在并且里直接调用,功能可以实现;但是因为直接把函数的调用代码写到的标签里,导致vue因为Model的变化刷新View时,标签里写的所有函数调用都会触发一次,不管当前的操作是否与该函数有关,有可能导致函数结果计算错误,也会让效率降低. 2.计算属性是基于对应数据的依赖进行缓存的. 写到计算属性里的代码只会在其关联的数据发生改变时才会触发. 计算属性写成对象: 1.可以选择性的对外暴露get或者set方法,保证数据的安全 2.可以在外界请求之后,对数据里的敏感项做过滤,保证外界拿到的数据没有威胁
<div id="app">
<p @click="name='琳'">{{name}}</p>
</div>
let app = new Vue({
el:'#app',
computed:{
//name是属性
name:{
//获取 name计算属性的值
get(){
return this.personName;
},
//设置 name计算属性的值
set(newName){
this.personName=newName;
},
}
}
});si
四, 值监测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>值监测</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="v">
</div>
<script type="text/javascript">
let app = new Vue({
el:'#app',
data:{
v:'',
},
methods:{},
watch:{
v:function (newVal, oldVal) {
console.log(newVal, oldVal);
}
//watch都能检测那些数据类型的数据?
}
});
</script>
</body>
</html>五, 组件创建
Vue里的组件分两种: 1.全局组件
语法: Vue.component('组件名',对象);
//第一种创建全局组件的方式:
<div id="app">
<my-header></my-header>
</div>
Vue.component("my-header",{
//指定组件的模板结构
template: `
<div>
<h2>这是my-header组件的标题</h2>
<div>
<a href="#">选项一</a>
<a href="#">选项二</a>
<a href="#">选项三</a>
</div>
</div>
`
});//第二种创建全局组件的方式:
<div id="app">
<my-content></my-content>
</div>
<template id="myContent">
<div>
<h2>这是myContent组件的标题</h2>
<section>这是myContent组件的内容区域</section>
</div>
</template>
Vue.component("my-content",{
template: '#myContent'
});2.局部组件
//body
<div id="app">
<my-news></my-news>
<my-music></my-music>
</div
<template id="myMusic">
<div>
<span>请输入留言:</span>
<textarea></textarea>
</div>
</template>
//script
let app =new Vue({
el:'#app',
components:{
//第一种创建局部组件的方式:
"my-news":{
template:`
<ul>
<li>热点</li>
<li>娱乐</li>
<li>音乐</li>
<li>政治</li>
<li>历史</li>
</ul>
`
},
//第二种创建局部组件的方式:
"my-music":{
template:'#myMusic'
}
}
});注意:--组件名的命名规则: 1.不要与系统的标签名重名 2.推荐使w3c的命名规则: 小写单词-小写单词 my-header 3.支持驼峰命名,但是使用的时候还是单词首字母小写,中间加 -
六, 组件详解
* 自定义组件的data必须是一个函数
组件的data数据源要求写成函数,并且返回的是一个对象,这么写考虑到组件的复用,当复用时,各个复用组件都用各自的data对象,数据之间不发生干扰.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件详解</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child1></child1>
</div>
<template id="child1">
<div>
<h2>这是child1组件</h2>
<p>{{msg}}</p>
<button @click="btnClick">点击事件</button>
<p>{{message}}</p>
</div>
</template>
<script type="text/javascript">
let child1 = {
template:'#child1',
//组件的data数据源要求写成函数,并且返回的是一个对象,这么写考虑到组件的复用,当复用时,各个复用组件都用各自的data对象,数据之间不发生干扰.
data(){
return {msg:'就算这样,也要笑着去努力啊.'}
},
methods:{
btnClick(){
alert('child1');
}
},
computed:{
message:{
get(){
return "Hello! "+this.msg;
}
}
}
};
let app = new Vue({
el:'#app',
components:{
"child1":child1
}
});
</script>
</body>
</html>用到的小知识 :
- 如果需要获取绑定指令元素的父元素,需要使用inserted函数
inserted(el, binding){
console.log(el, el.parentElement,binding);
}2. toUpperCase() 方法用于把字符串转换为大写。 3. substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
4. toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
5. watch都能检测那些数据类型的数据?
watch是什么? -- watch是一个json，每一个json的键名就是监测的data中的数据，键值是一个function，第一个参数是新数据，第二个参数是旧数据。
vue内部不同变量类型的watch
1.普通变量(number, string..)
watch:{
//注意不用箭头函数，理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例
data:function(){
console.log("改变");
}
},2. 数组
数组改变时建议用原生操作数据的方式进行改变，比如push之类。
deep -- 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
return array=[1,2,3];
array2:{ handler(newValue, oldValue) { console.log(newValue) }, deep: true },3. 对象
return obj1 = {
label:1,
value:2
}
obj1.label=2;
watch:{
obj1:{
handler(newValue, oldValue) {
console.log(newValue)
},
deep:true //深拷贝
}
}
//如果要检测某一个特定属性的改变，可以用computed
computed: {
value() {
return this.obj1.value
}
},
watch:{
value(newValue, oldValue) {
console.log(newValue,oldValue)
},详情见: vue中watch的详细用法