dom对象
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。我们常用的window对象就是BOM,所有以window-开头的都是bom(即所有window对象都是bom对象)
DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。所有以doucment开头的都是dom,(记得有window.document,所有dom对象本身是dom对象)
具体
在vue里面,可以用$符号来操作dom对象
在vue中操作dom对象
PS:
dom和bom的区别
https://www.cnblogs.com/bs2019/p/12130112.html
所有以window-开头的都是bom(即所有window对象都是bom对象)
所有以doucment开头的都是dom,(记得有window.document,所有dom对象本身是dom对象)
<div id="app">
<div class="dom-test" ref="vuedomtest">操作Dom</div>
<button @click="clickMe">操作Dom</button>
</div>
<script>
var vm= new Vue({
el:"app",
methods:{
clickMe(){
// vue里面,都是使用$来操作dom对象
//使用document对象
document.querySelector(".dom-test").innerHTML("<b>粗一点</b>");
//使用vue操作dom对象,this.refs.vuedomtest与document.querySelector(".dom-test")等价
//其实refs得主要作用是组件间得调用
this.refs.vuedomtest.innerHTML="<b>粗一点</b>";
}
}
})
</script>
备注:directive,computed,watch都可以写在vue对象以内以局部产生作用
自定义指令集 directive
vue除了自有的指令集,例如v-text,v-html等,也允许自己设置自定义指令集
Vue.directive(“指令集名称”,{自定义指令动作});
操作里面会指定在特定时期内会有特定的操作
//全局指令集
//自定义指令 第一个是自定义指令名称 ,第二个是自定义指令动作
Vue.directive("yu", {
//数据插入时触发
//此处dom为当前标签对象(包含下级) 例如此处是div
inserted(dom) {
// console.log(dom);
},
//绑定时触发
//el为当前得标签信息,binding为当前之定义指令得信息
bind(el, binding) {
console.log(el);
console.log(binding);
},
//数据更新时触发
update() {
},
//数据销毁时触发
unbind() {
}
});
简写
//简写
Vue.directive("focus", (el, binding) => {
dom.focus();
})
局部自定义指令
所谓局部,就是在当前vue可以使用。其实就是在当前vue对象中定义directive
var vm = new Vue({
el: "#app",
//局部指令集
directive: {
"yu": {
//数据插入时触发
//此处dom为当前标签对象(包含下级) 例如此处是div
inserted(dom) {
// console.log(dom);
},
//绑定时触发
//el为当前得标签信息,binding为当前之定义指令得信息
bind(el, binding) {
console.log(el);
console.log(binding);
},
//数据更新时触发
update() {
},
//数据销毁时触发
unbind() {
}
}
}
});
计算属性 computed
定义:当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值
其实就是为了在某些值变化后,对应的值需要相应的变更
其实可以简单的将计算属性与方法进行对比:
方法:没有缓存
手动执行
计算属性:有缓存机制(类似于属性+方法)
自动执行:当执行一次方法属性后,会将计算后的值进行缓存,第二次访问将直接返回结果 。若是数据已经变化,则将计算并重新缓存
使用方法:在vue对象中,使用computed属性即可
computed:{
numCom(){
return this.num++;
// return that.num++;
},
numCom2(){
return function(parm){
console.log(parm);
}
}
}
注意:
1.计算属性,一定要return值
2.计算属性建议不使用lambda表达式,因为此时的this已经被重新定向到了window,所以使用split会报错
理就与执行回调函数类似,计算属性在使用委托时,this代表的是window。
当然,也可以在created/beforeMount中将this赋值给that,作为一个解决方法
revmsg:function (){
//将数据倒置
var res=this.msg.split("").reverse().join("");
return res;
},
revmsg2:()=>{
return that.msg.split("").reverse().join(""); },
监听 watch
watch作用:可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态
Vue.js中 watch(深度监听)的最易懂的解释
白话:就是一直看着你,你一变化,我就执行某些动作
比如我定义了某些变量,用于输出数据:
<div id="app">
<p><input type="checkbox" name="" id="" v-model="allChecked">全选</p>
<p v-for="item in list" :key="item.id" >
<input type="checkbox" name="" id=""v-model="item.isChecked">
{{item.name}}
</p>
<input type="text" v-model="user.userName">
</div>
-----------------------------
var vm= new Vue({
el:"#app",
data:{
list:[
{id:1,name:"a",isChecked:false},
{id:2,name:"b",isChecked:true},
{id:3,name:"c",isChecked:false}
],
allChecked:false,
user:{
id:1,
userName:"牛逼"
}
},
}
此时,我需要监听allChecked的属性,一旦被选中,则执行全选效果
则可以:
//监听
watch:{
//监听方法名必须和变量名相同
allChecked(newVal,oldVal){
//通过监听属性实现全选功能
this.list.forEach(element => {
element.isChecked=newVal;
});
},
当然,也可以开启深度监听
//深度监听--会更消耗性能
//需要设置deep属性为true,开启深度监听
//一般需要监听子项目数据,开启才有意义
list:{
// handler:function(newVal,oldVal){
// console.log(newVal);
// console.log(oldVal);
// }
//handler名称固定,可简写成一下
handler(newVal,oldVal){
console.log(newVal);
console.log(oldVal);
},
deep:true
},
其实普通监听编译后也是深度监听这个样子,只是默认属性deep为false;
监听最好是写在vue对象里面,这样页面跳转后,就不会有资源溢出。不然就要手动销毁监听
全代码
directive 自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- <script src="timeTranslate10.js"></script> -->
<script src="glFilter10.js"></script>
<title>自定义指令 directive</title>
</head>
<body>
<div id="app">
<div v-yu>
<div></div>
</div>
<input type="text">
<input type="text" v-focus>
</div>
<script>
//全局指令集
//自定义指令 第一个是自定义指令名称 ,第二个是自定义指令动作
Vue.directive("yu", {
//数据插入时触发
//此处dom为当前标签对象(包含下级) 例如此处是div
inserted(dom) {
// console.log(dom);
},
//绑定时触发
//el为当前得标签信息,binding为当前之定义指令得信息
bind(el, binding) {
console.log(el);
console.log(binding);
},
//数据更新时触发
update() {
},
//数据销毁时触发
unbind() {
}
});
Vue.directive("focus", {
inserted(dom) {
dom.focus();
}
})
//简写
Vue.directive("focus", (el, binding) => {
dom.focus();
})
var vm = new Vue({
el: "#app",
//局部指令集
directive: {
"yu": {
//数据插入时触发
//此处dom为当前标签对象(包含下级) 例如此处是div
inserted(dom) {
// console.log(dom);
},
//绑定时触发
//el为当前得标签信息,binding为当前之定义指令得信息
bind(el, binding) {
console.log(el);
console.log(binding);
},
//数据更新时触发
update() {
},
//数据销毁时触发
unbind() {
}
}
}
});
</script>
</body>
</html>
computed全代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>计算属性 computed</title>
</head>
<body>
<div id="app">
<!-- {{revmsg}}
{{revmsg2}} -->
{{num}}
<button @click="addNum">clickMe</button>
<button @click="numAdd">clickMeComp</button>
{{this.numCom2(1)}}
</div>
<script>
// var that;
// 计算属性, 主要作用是对data中的数据进行处理
var vm = new Vue({
el:"#app",
data:{
msg:"helloworld",
num:1
},
created(){
// that=this;
},
methods:{
addNum(){
console.log(this);
this.num++;
// console.log(res);
},
numAdd(){
that.numCom;
}
},
computed:{
//计算属性,一定要return值
//另外,计算属性建议不使用lambda表达式,因为此时的this已经被重新定向到了window,所以使用split会报错
//原理就与执行回调函数类似,计算属性在使用委托时,this代表的是window。
//当然,也可以在created/beforeMount中将this赋值给that,作为一个解决方法
// revmsg:function (){
// //将数据倒置
// var res=this.msg.split("").reverse().join("");
// return res;
// },
// revmsg2:()=>{return that.msg.split("").reverse().join(""); },
//计算属性与方法不同之处,计算属性有缓存机制:
// 当执行一次方法属性后,会将计算后得值,进行缓存,第二次访问将直接返回结果
// 若是数据已经变化,则将计算并重新缓存
numCom(){
return this.num++;
// return that.num++;
},
//正常来讲,直接看vue对象,numCom是一个属性,但是可以通过其他方法将其转换会function
//但是无意义(鸡肋),因为我们有方法得定义了-_-
numCom2(){
return function(parm){
console.log(parm);
}
}
}
})
</script>
</body>
</html>
watch全代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>监听 watch</title>
</head>
<body>
<div id="app">
<p><input type="checkbox" name="" id="" v-model="allChecked">全选</p>
<p v-for="item in list" :key="item.id" >
<input type="checkbox" name="" id="" v-model="item.isChecked">
{{item.name}}
</p>
<input type="text" v-model="user.userName">
</div>
<script>
var vm= new Vue({
el:"#app",
data:{
list:[
{id:1,name:"a",isChecked:false},
{id:2,name:"b",isChecked:true},
{id:3,name:"c",isChecked:false}
],
allChecked:false,
user:{
id:1,
userName:"牛逼"
}
},
created(){
that=this;
},
methods:{
},
//监听
watch:{
//监听方法名必须和变量名相同
allChecked(newVal,oldVal){
//通过监听属性实现全选功能
this.list.forEach(element => {
element.isChecked=newVal;
});
},
//深度监听--会更消耗性能
//需要设置deep属性为true,开启深度监听
//一般需要监听子项目数据,开启才有意义
list:{
// handler:function(newVal,oldVal){
// console.log(newVal);
// console.log(oldVal);
// }
//handler名称固定,可简写成一下
handler(newVal,oldVal){
console.log(newVal);
console.log(oldVal);
},
deep:true
},
// "user":{
// handler(newVal,oldVal){
// console.log("value is changed");
// },
// deep:true
// },
// //监听子属性
// "user.userName":{
// handler(newVal,oldVal){
// console.log("value is changed");
// }
// }
}
});
</script>
</body>
</html>