今天是2022年6月19日,是我学习vue的第二天
数据绑定
v-bind：单向数据绑定 数据只能从data流向页面 v-model：双向数据绑定 但只适用于表单类元素（如input select） v-model:value可简写为v-model v.$mount('')与el:''都能关联容器 data的两种写法：对象式：data:{name:''} 函数式：data:function(){return{name:''}} 由Vue管理的函数不能写箭头函数，一旦写了箭头函数，this就不是Vue实例了 //例如data的函数式
关于箭头函数，可以看 箭头函数与普通函数的区别
MVVM模型
1 M 模型：对于data中的数据 2 V 视图 模板 3 VM 视图模型 Vue实例对象
数据代理
let obj={x:100} let obj2={y:200} Object.defineProperty(obj2,'x',{ get(){ return obj.x }, set(value){ obj.x=value } }) 在控制台用vm.name=''通过setter改变name后会引起data的变化，同时，页面中的内容也会改变 vm._data===data 1.通过一个对象代理对另一个对象中属性的操作(读/写) 2.通过vm对象来代理data对象中所有属性的操作 3.好处: 更方便的操作data中的数据 4.基本实现流程 1). 通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符 2). 所有添加的属性都包含getter/setter 3). 在getter/setter内部去操作data中对应的属性数据
事件处理
<button v-on:click="showInfo1">点我提示信息</button> <button @click="showInfo2(66,$event)">点我提示信息</button> <script> Vue.config.productionTip = false; const vm = new Vue({ el: '#root', data: { name: 'panziang' }, methods: { showInfo1(event) { // alert('你好1！') console.log(event); // console.log(this); }, showInfo2(num, event) { // alert('你好2！') console.log(num, event); // console.log(this); } }, }) </script> v-on:可简写为@
事件的基本使用
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:事件的默认行为立即执行，无需等待事件回调执行完毕; 例：<button v-on:click.once="showInfo1">点我提示信息</button> 这里的button按钮只触发一次
