学习Vue第二天-MVVM模型

1、MVVM模型

Vue的作用就是让我们更方便的处理Model和View之间的关系。

2.数据代理

    var number=18;//定义一个变量
var person={
    name:'张三',
    gender:'男'
    // age:18
}

Object.defineProperty(person,'age',{
    // value:18
     // 当age值被调用的时候,get()执行,返回的age的值
    get(){
       console.log("age值被调用了！");
        return number;
    },
    //d
    set(value){
console.log("age的值被修改了,且值为"+value)
number=value;
    }
})

使用Object.defineProperty（对象，值，{属性}）的时候，我们可以为之前写的Person添加一个名为age的变量属性，

并且书写了get(),set()方法的话，我们对象里面的age值也会跟随number变化而变化

3、Vue中的数据代理

MVVM图中的data数据是由data提供给Vue实例，当我们要处理数据时，也不是直接从data中获取数据，而是从Vue实例中获取

我们可以输出Vue实例可以看到我们data数据中的值还有他们相应的get()set()方法。

_data中存放的就是从data中获取的数据。

4、事件处理

 <div id='demo'>
        <h1>欢迎学习{{name}}</h1>
        <button v-on:click="showinfo">点击我显示更多</button>
    </div>
 
    <script type="text/javascript">
        Vue.config.productionTip = false;
        // 创建一个Vue实例,用于解析容器，实例于容器是一一对应的关系
       var vm=new Vue({
            // el指定那个容器
            el: '#demo',
            // data为el选择实例提供数据
            data: {
                name: 'world'
            },
            methods:{
                showinfo(event){
                    alert("你好同学")
                }
            }
        })
        console.log(vm);
    </script>

v-on:xxx也可以写作@XXX绑定事件，xxx是事件名

showinfo()括号里面也可以传参数，但这样的话要传时间的话需要写成showinfo（$event）的样式

method中配置的函数不能写箭头函数，不然的话函数里面的this就不再是Vue实例而是Windows

@click=“demo”与@click="demo($event)"效果相同，但后者可以传参。