数据代理
通过defineProperty里面传入obj2和x,然后get和set下读取接收下然后再接收set中给对象x用value接收下,这样就能两个数据读取和接收了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>何为数据代理</title>
</head>
<body>
<!--数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)-->
<script type="text/javascript">
let obj = { x: 100 }
let obj2 = { y: 200 }
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})
</script>
</body>
</html>
类似指针
控制台输出vm,你的name和address是get和set代理的
new的vue是一个全局对象,无法在控制台变化,error:data.name失败
vm的data实际存在_data中,但是要额外定义data,导入到new vue中,控制台判断是否===,true
_data相当于另一个新对象,然后里面的值和原始的data数据一样。
控制台vm._data.name='atguigu'
vm.name原来是尚硅谷
vm.name显示"atguigu"
控制台的_data是address,name等是数据劫持
事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
tle>事件的基本使用</title>
<!--引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
事件的基本使用:
1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或组件实例对象
5.@click="demo”和 @click="demo($event)”效果一致,但后者可以传参;
-->
<!--准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<!-- <button v-on:click="showInfo">点我提示信息</button> -->
<button@click="showInfo1">点我提示信息1(不传参)</button>
<button@click="showInfo2($event,66)">点我提示信息2(传参)</button><!--传参加小括号,同时showInfo失去了event -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
name: '尚硅谷',
showInfo2(event, number) {
console.log(event, number)
// console.log(event.target.innerText)
// console.log(this)//此处的this是vm
alert('同学你好!!')
}
},
methods: {
showInfo1(event) {
// console.log(event.target.innerText)
// console.log(this)//此处的this是vm
alert('欢迎来到尚硅谷学习!')
},
showInfo2(event, number) {
console.log(event, number)
// console.log(event.target.innerText)
// console.log(this)//此处的this是vm
alert('同学你好!!')
}
}
})
</script>
</htm1>
太多东西,自己看p14吧
事件修饰符
所以执行顺序是:触发行为->回调->默认行为?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
tle>事件的基本使用</title>
<!--引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
* {
margin-top: 20px;
}
.demo1 {
color: red;
height: 50px;
}
.box1 {
padding: 50px;
background-color: skyblue;
}
.box2 {
padding: 20px;
background-color: pink;
}
</style>
</head>
<body>
<!--
vue的事件修饰符
1. .prevent 阻止默认事件
2. .stop 阻止事件冒泡
3. .once 只触发一次
4. .capture 使用事件的捕获模式
5. .self 只有event.target是当前操作元素自身时触发事件
6. .passive 事件的默认行为立即执行,不会等待事件回调函数执行完毕。
-->
<!--准备好一个容器-->
<div id="root">
<!-- 阻止默认事件 -->
<h2>欢迎来到{{name}}学习</h2>
<a href="https://www.atguigu.com" @click="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡 -->
<div class="demo1" @click.stop="showInfo">
<button @click.stop="showInfo">点我</button>
<!-- 事件冒泡:即多个组件嵌套,触发内层组件时,会一一触发外层事件 -->
</div>
<!-- 事件只触发一次 -->
<button @click.once="showInfo">点我</button>
<!-- 使用事件的捕获模式: 捕获是由外往内,冒泡相反-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click.capture="showMsg(2)">
div2
</div>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
new Vue({
el: '#root',
data: {
name: '尚硅谷'
},
methods: {
showInfo(e) {//这里写showInfo(e) e.preventDefault()阻止默认事件,可以防止页面跳转
alert('同学你好')
comsole.log(e.target)
},
showMsg(num) {
console.log('div' + num + '被点击了')
}
}
})
</script>
</htm1>
键盘事件
016_尚硅谷Vue技术_键盘事件_哔哩哔哩_bilibili
总结
修饰符可以连续写,正常逻辑,先写的先运行
@keyup.ctrl.y就可以ctrl+y
姓名案例-差值语法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_插值语法实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
姓:<input type="text" v-model="firstName"> <br /><br />
名:<input type="text" v-model="lastName"><br /><br />
全名:<span>{{firstName.slice(0,3)}} - {{lastName}}</span><!-- firstname只要3位 -->
全名:<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
methods: {
fullName() {
return this.firstName.slice(0, 3) + '-' + this.lastName //这里的this是vue实例,所以可以直接调用data里面的属性和方法。
}//数据发生变化,模板重新解析
},
})
</script>
</html>
计算属性
计算属性定义:拿着已经写好的属性,用这些属性计算出来一个属性,称为计算属性,data里面放的是属性 ,而计算属性需要放到一个单独的集合体中
019_尚硅谷Vue技术_计算属性_哔哩哔哩_bilibili很好的视频,清清楚楚明明白白
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_插值语法实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
姓:<input type="text" v-model="firstName"> <br /><br />
名:<input type="text" v-model="lastName"><br /><br />
全名:<span>{{firstName.slice(0,3)}} - {{lastName}}</span><!-- firstname只要3位 -->
全名:<span>???</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示。
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
x: 'hello'
},
//相当于computed中的每个对象默认提供getter和setter,我们只是重写了getter
computed: {
fullName: {
//get有什么作用?当有人读取fullname,get就会被调用,返回值是fullname的值
//get什么时候被调用?1.当fullname的值被读取时,get就会被调用2.依赖的数据发生变化时,get也会被调用
get() {//get的this指向vm
console.log('get调用了')
return this.firstname + '-' + this.lastName
},//在控制台查找vm._data的firstname,lastname都能找到,但是fullname是underfined,compute已经给了vm
set(value) {
console.log('set', value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
},
})
</script>
</html>
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生
计算属性-简写
get() {//get的this指向vm
console.log('get调用了')
return this.firstname + '-' + this.lastName
},//在控制台查找vm._data的firstname,lastname都能找到,但是fullname是underfined,compute已经给了vm
fullName:function(){
console.log('get调用')
return this.firstName+'-'+this.lastname
}