VUE第二天

今天是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按钮只触发一次