数据绑定，defineProperty,v-on,事件处理

本文主要是介绍数据绑定，defineProperty,v-on,事件处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

v-bind单向数据绑定

defineProperty

@是v-on的简写

事件处理

v-bind单向数据绑定

从name绑定到v-bind到value单向数据绑定：

<input type="text"  :value="name">
<input type ="text" v-model="name">

代码错误，因为v-model只能用在表单类输入元素上，就是value值

el有两种写法

data也有两种，但是到组件时候必须用函数写法否则报错

vue管理的函数一定不能写箭头函数

m模型：data中数据

view：模版

vm：视图模型

data bindings把数据摆到屏幕上

这种情况：

let number=18;
let person={name:'xiaofang',
age:number
}

defineProperty

但是后续如果number值改变，person里的不会再随着number值改变而改变

Object.defineProperty(person, 'age', {value: 18,enumerable: true,//默认为falsewritable: true,//控制属性是否能被修改configurable:true//控制属性是否可以被删除})

这个defineProperty里的get和set特别重要：

还是前面的前提下，每次动态访问age都会提示则用get，此时修改number值，age的值会随之改变；每次动态修改age的值，会调用set，此时只会修改表面age的值，因为真实来源是number的值，除非在set里将修改后的值赋值为value

<script type="text/javascript">let person = {name: 'zhangsan',sex: 'nan'}//三个参数值，第一个是你要给哪个对象添加属性，添加属性叫什么名字，配置项Object.defineProperty(person, 'age', {value: 18,enumerable: true,//默认为falsewritable: true,//控制属性是否能被修改configurable: true,//控制属性是否可以被删除get: function () {console.log('hello');return number;},//可以把function()这边这个名字省略直接写成：get(){}set(value) {//当有人修改person的age时候，set调用得到修改值// 但是这里set虽然表面能改变age的值，age真实值不变，他来自number，与number值关联number = value}})// console.log(person);// // console.log(Object.keys())// //传入对象，所有属性的属性名提取出来，作为数组// console.log(Object.keys(person))// //for in 既能便利数组也能遍历对象// for (let index in person) {//     console.log('@', person[index]);// }// // 用三个参数哪个func添加的age不能被枚举//当有人读取person的age属性时
// get和set特别重要！！</script>

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的数据。

数据代理提现在{{name}}与data下的name属性，_data收集了data中数据，创建实例进行数据代理

let obj1={x:1}
let obj2={y:2}Object.defineProperty(obj,'x', {get(){
return obj1.x
},
set(value){
obj1.x=value;
}
})

:是v-bind的简写

@是v-on的简写

@监听事件

<script type="text/javascript">Vue.config.productionTip = falsevar vm = new Vue({el: '#root',data: {name: 'shangguigu',},methods: {showINFO(event) {//如果这里写成箭头函数，就会往外找，找成全局的windowalert('hello')// console.log(this)//此处的this是vm}}// 对象里配置方法，不用function关键词了//复习event target，拿到事件目标,event.target.innerText//所有被vue管理的函数都不能写箭头函数，不然就变成window// 用配置项把事件回调配置进})</script>

现在函数showinfo里面只能传参一个，event，后面的都会变成undefined

<body><div id="root"><h2>欢迎{{name}}</h2><button v-on:click="showINFO">点我提示信息</button><button v-on:click="showINFO1($event,66)">点我提示信息</button></div></body>
<script type="text/javascript">Vue.config.productionTip = falsevar vm = new Vue({el: '#root',data: {name: 'shangguigu',},methods: {showINFO(event) {//如果这里写成箭头函数，就会往外找，找成全局的windowalert('hello')// console.log(this)//此处的this是vm},showINFO1(event, number) {// 这里形参要按照showinfo的来//如果这里写成箭头函数，就会往外找，找成全局的windowalert('hello')console.log(event, number)//此处的this是vm}}// 对象里配置方法，不用function关键词了//复习event target，拿到事件目标,event.target.innerText//所有被vue管理的函数都不能写箭头函数，不然就变成window// 用配置项把事件回调配置进})</script>

showinfo作为函数没有数据代理，因为后续不会更改，做数据代理是之后会改且要显示到界面上

总结：

1使用v-on:？或者@？绑定事件，？为事件名
2事件回调需要配置在methods对象里，最终出现在vm里
3 methods里配置的函数，不用箭头函数，否则this不是vm是windows
4 methods中配置的函数，是被vue管理的函数，this指向是vm或组件实例对象
5@click="demo" @click="demo($event)"效果一样但是后者可以传参数

事件处理

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="js/vue.js"></script><style>* {margin-top: 20px;}.demo1 {height: 50px;background-color: blueviolet;}</style>
</head><body><div id="root"><h2>welcome to {{name}}</h2><a href="www.baidu.com" @click.prevent="showinfo">SHOW INFO</a><div class="demo1" @click="showinfo"><button @click.stop="showinfo">show button info</button><!-- 冒泡逐级向上，想阻止就从你想阻止的层数及往下的click后都加stop，一般冒泡阶段处理事件 --></div></div></body>
<script type="text/javascript">new Vue({el: '#root',data: {name: 'sun'},methods: {showinfo(e) {// e.preventDefault()这句话替代方式是@click那边改的alert('hello')}}})</script>

vue中事件修饰符
1 prevent 阻止默认事件发生
2 stop阻止事件冒泡
3 once事件只触发一次

键盘事件

vue中常见别名：
1 回车：enter
2 删除 delete
3 退出 esc
4空格 space
5 换行 tab
6上up

最好通过key，即该键的键名来绑定，最好别用keyCode绑定

<body><div id="root"><h2>welcome {{name}}</h2><input type="text" placeholder="input" @keyup.enter="showinfo"><!-- 加上.enter代表按下空格键才会调用showinfo函数 --><!-- key代表的是这个键的名字，keyCode才是这个键的编码，比如可写成caps-lock --><!-- 记住，tab键不能keyup只能keydown绑定 --></div></body>
<script type="text/javascript">new Vue({el: '#root',data: {name: 'sun'},methods: {showinfo(e) {// if (e.keyCode !== 13) return// 这句判断可以用键盘事件后续加enterconsole.log(e.key,e.keyCode)alert(e.target.value)// 通过keycode判断ascii大小}}})</script>

Vue.config.keyCodes.huiche=13//定义别名huiche是回车

如果既要不冒泡又要不默认事件：可以如下修饰符连着写

@click.stop.prevent

keyup对于ctrl键需要再配合一个任意键才能触发，如果想确认这个任意键，应该这样写：

@click.keyup.ctrl.y

实现姓和名动态变化输出全名也变化：

v-bind是vue里数据绑定的界面那个属性的，所以变的是实例里的数据，界面属性随之变化

<body><div id="root">姓:<input type="text" v-model="firstName"><br />名:<input type="text" v-model="lastName"><br /><!-- 用v-bind实现绑定效果，简写：能够获得你之前在input里输入的东西，现在要动态绑定，即你再输入要随之变化改用model，简写v-model -->姓名:<span>{{firstName}}-{{lastName}}</span><!-- value是默认值，placeholder你一输入就跳没了 --></div></body>
<script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',// el确定实例操纵哪个元素data: {firstName: 'zhang',lastName: 'san'}})</script>

用method完成：

<body><div id="root">姓:<input type="text" v-model="firstName"><br />名:<input type="text" v-model="lastName"><br /><!-- 用v-bind实现绑定效果，简写：能够获得你之前在input里输入的东西，现在要动态绑定，即你再输入要随之变化改用model，简写v-model -->姓名:<span>{{fullName()}}</span><!-- value是默认值，placeholder你一输入就跳没了 --></div></body>
<script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',// el确定实例操纵哪个元素data: {firstName: 'zhang',lastName: 'san'},// 只要data中的数据发生变化，一定会重新解析模板，遇到插值{{}}方法一定重新调用一遍methods: {fullName() {console.log('@---fullname')return this.firstName + '-' + this.lastName}}})</script>

遇到问题：总是debugger模式暂停运行：