仅供本人学习使用,侵删
Object.defineProperty方法 双向绑定的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TryVue</title>
<!--引入Vue-->
<script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示
let number=18
let person={
name:'rua',
sex:'male',
}
Object.defineProperty(person,'age',{
//value:18,
//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get(){
return number //这样 number的值改变时 age也会改变
},
//当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value){
number=value
},
enumerable:true, //控制属性是否可以枚举,默认值是false
writable:true, //控制属性是否可以更改,默认值是false
configurable:true, //控制属性是否可以删除,默认值是false
}) //三个参数 对象 添加的属性名 配置项
//使用此方法添加的属性 默认不可枚举 即不参与遍历 默认不可更改 默认 不可删除
console.log(person)
console.log(Object.keys(person)) //返回所有属性名
</script>
</html>
其中let 命令,用于声明局部变量
使用 let 语句声明一个变量,该变量的范围限于声明它的块中。 可以在声明变量时为变量赋值,也可以稍后在脚本中给变量赋值。
使用 let 声明的变量,在声明前无法使用,否则将会导致错误。
如果未在 let 语句中初始化您的变量,则将自动为其分配 JavaScript 值 undefined
什么是数据代理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>何为数据代理</title>
</head>
<body>
<!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)-->
<script type="text/javascript" >
let obj = {x:100}
let obj2 = {y:200} //obj2为obj的代理
Object.defineProperty(obj2,'x',{
get(){
return obj.x //这样当有人访问obj2的x时 就能看到obj的x值
},
set(value){
obj.x = value //这样当有人修改obj2的x时,就能修改obj的x值
}
})
</script>
</body>
</html>
vue的数据代理
1.Vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写) 2.Vue中数据代理的好处: 更加方便的操作data中的数据 3.基本原理: vm上本来有data但又 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性,都指定一个getter/setter。 在getter/setter内部去操作(读/写)data中对应的属性。 4.可以在控制台 使用 vm. data来查看 vm中的data属性
vue事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TryVue</title>
<!--引入Vue-->
<script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>来打{{name}}吧!!!</h2>
<button v-on:click="showInfo">查看秘密</button>
<button @click="showInfo1(3800,$event)">查看秘密</button> <!--简写方式为 @ -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data() {
return {
name:'秘密'
}
},
methods: {
showInfo(){
alert('Dota2')
},
showInfo1(number,event){
alert('Dota2'+number)
alert(event)
}
},
})
</script>
</html>
事件的基本使用: 1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名; 2.事件的回调需要配置在methods对象中,最终会在vm上; 3.methods中配置的函数,不要用箭头函数!否则this就不是vm了; 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象; 5.@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参;
事件修饰符
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式; 在捕获阶段就开始处理
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
注意事件修饰符可以连着写
如想先阻止冒泡再阻止默认事件 可以写:
@click.stop.prevent="XXXXX"