vue2 part2

发表于 2026-2-3 05:41:58

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

数据署理

通过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>
<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@click="showInfo1">点我提示信息1（不传参）</button>
<button@click="showInfo2($event,66)">点我提示信息2（传参）</button>
</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>
<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>
<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>
全名：<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>
<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>
全名：<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
}

复制代码

vue2 part2

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

一给