- 数据代理 7.1 Object.definedProperty definedProperty 方法作用是给一个对象添加属性
7.1.1 definedProperty 方法中的配置项
Document 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 7.1.2 definedProperty 方法中的getter/setter 注意：当definedProperty 方法的配置项中使用getter/setter方法时，不能出现value/writable 属性。 Document 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 427.2 何为数据代理
何为数据代理 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 7.3 Vue中的数据代理 vue中的数据代理{{ name }}
{{ address }}
在控制台中输入vm并回车可看到下图所示，1，3号框为添加到vue实例中的属性，
当鼠标放到2，4号框时会显示调用属性getter，这表明，name和address中的值
是从别的地方获取到的
vue实例中添加的name和address属性有相应的getter和setter为其服务，具体见图2
通过vm读取data中的属性，是使用对应的getter方法，修改data中的属性，也是使用
对应的setter方法，此为数据代理
第二层理解：
vue中传入的data属性并不能在实例中直接看到，其中的数据以_data属性存储，即vm._data === data
但是如果直接按照以前的方式写是不能访问到的，因此将里面的数据存入到一个对象中，将此对象传给data
如下这种方式：
<script>
let data = {
name:"zhangsan",
address:"beijing"
}
const vm = new Vue({
el:"#root",
data:data
})
</script>
new vue时传入的配置对象可称为options，因此vm._data === optinos.data === data
-->
<script>
let data = {
name: "zhangsan",
address: "beijing"
}
const vm = new Vue({
el: "#root",
data: data
})
</script>
当编写完vue代码之后 (如下图左上角)，会生成一个vue实例 (如下图左下角)，在vue实例中会将原始代码中的数据完整的复制到_data属性中，截至到这里并没有数据代理的影子，随后使用Object.defineProerty方法向vm实例中添加属性，属性的来源为_data中的属性以及值，当读取或者修改vm对象中的name或address时，实际上是通过数据代理修改vm内部中_data中的name和address，因此下图中右下角紫色和橘色的线才是数据代理，这种数据代理的实现方式目的是为了让编码更方便，否则在页面中就要使用{{ _data.name }} 来展示数据，有了数据代理之后就可以使用 {{ name }} ，本质是读取_data中的name值
- 事件处理 8.1事件的基本使用
{{name}}
点击提示信息 点击提示信息2<script>
new Vue({
el: "#root",
data: {
name: "zhangsan"
},
methods: {
showInfo1() {
alert("hello")
},
showInfo2(num) {
console.log(event.target.innerText) // 函数中默认会传输event对象
alert(num)
}
}
})
</script>
<script>
new Vue({
el:"#root",
methods:{
showInfo(){
event.preventDefault() // 阻止默认事件发生
alert("hello")
}
}
})
</script>
<script>
new Vue({
el:"#root",
methods:{
showInfo(){
alert("hello")
}
}
})
</script>
<!--
外层div 和 内部的button均绑定了点击事件，当点击了内部的button时
，冒泡行为会使得div也指定showInfo方法
-->
<div class="demo1" @click = "showInfo">
<button @click = "showInfo">点我提示信息</button>
</div>
</div>
<script>
new Vue({
el:"#root",
methods:{
showInfo(){
// 传统方式使用 event.stopPropagation();阻止事件向外冒
event.stopPropagation();
alert("hello")
}
}
})
</script>
<!--
外层div 和 内部的button均绑定了点击事件，当点击了内部的button时
，冒泡行为会使得div也指定showInfo方法
-->
<div class="demo1" @click = "showInfo">
<!-- Vue中使用@click.stop阻止事件向外冒 -->
<button @click.stop = "showInfo">点我提示信息</button>
</div>
</div>
<script>
new Vue({
el:"#root",
methods:{
showInfo(){
alert("hello")
}
}
})
</script>
点我提示信息
<script>
new Vue({
el: "#root",
methods: {
showInfo() {
alert("hello")
}
}
})
</script>
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
-->
<div id="root">
<!-- v-on:keyup 这种情况下只要有键盘按下再抬起，就会执行showInfo方法 -->
<!-- <input type="text" placeholder="按下回车提示输入" v-on:keyup = "showInfo"> -->
<!-- 如果想要按下回车再执行showInfo方法，可用 v-on:keyup.enter -->
<input type="text" placeholder="按下回车提示输入" v-on:keyup.enter="showInfo">
</div>
<script>
new Vue({
el: "#root",
methods: {
showInfo() {
console.log(event.target.value)
}
}
})
</script>
姓：
名:
全名：{{firstname}} - {{lastname}}
名:
全名：{{firstname}} - {{lastname}}
<script>
new Vue({
el:"#root",
data:{
firstname:"zhang",
lastname:"san"
}
})
</script>
姓：
名:
全名：{{ fullname() }}
名:
全名：{{ fullname() }}
<script>
new Vue({
el:"#root",
data:{
firstname:"zhang",
lastname:"san"
},
methods:{
fullname() {
// 在函数中要使用this访问vue实例中的属性，否则直接访问就会报错
return this.firstname + "-" + this.lastname
}
}
})
</script>
姓：
名:
全名：{{ fullname }}
名:
全名：{{ fullname }}
<script>
new Vue({
el: "#root",
data: {
firstname: "zhang",
lastname: "san"
},
/*
对于Vue中的data和mothods来说，其内部的属性就是属性，内部的方法就是方法，
而对于computed来说，将其内部的fullname属性放到vm上时，是调用set方法得到的返回值作为vm.fullname的值
*/
computed: {
fullname: {
/*
get有什么作用？当有人读取fullname时，get就会被调用，且返回值就作为fullname的值
get什么时候调用？
1. 初次读取fullname时
2. 所依赖的数据发生变换时
*/
get() {
// console.log(this) // 此处的this时vm
return this.firstname + "-" + this.lastname
},
// 当修改fullname的值时，就需要使用set方法
set(value) {
const arr = value.split("-")
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
})
</script>
姓：
名:
全名：{{ fullname }}
名:
全名：{{ fullname }}
<script>
new Vue({
el: "#root",
data: {
firstname: "zhang",
lastname: "san"
},
computed: {
// 计算属性的完整写法
// fullname: {
// get() {
// return this.firstname + "-" + this.lastname
// },
// set(value) {
// const arr = value.split("-")
// this.firstname = arr[0]
// this.lastname = arr[1]
// }
// }
// 第一种简写方式：
/*
一般来说计算属性只会用来展示，不会进行修改，因此可用对
上述完整写法进行简写，function函数当成get函数
*/
// fullname:function() {
// return this.firstname + "-" + this.lastname
// }
// }
// 第二种简写方式：
// 上述写法可进一步简写为
www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E6%B2%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%… www.iimedia.cn/tag/%E8%A5%…
fullname() {
return this.firstname + "-" + this.lastname
}
}
}
})
</script>
今天天气很{{info}}
切换天气<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
})
</script>
