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的函数式

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:可简写为@

vue中的事件修饰符:
 1.prevent:阻止默认事件（常用）;
 2.stop:阻止事件冒泡（常用）;
 3.once:事件只触发一次（常用);
 4.capture:使用事件的捕获模式;
 5.self:只有event.target是当前操作的元素时才触发事件; 
 6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
 例：<button v-on:click.once="showInfo1">点我提示信息</button> 这里的button按钮只触发一次