2021-09-16

1.引入

引入方式常用两种，

第一种为传统引入方式，直接使用script标签引入。这种方式为我们初学时使用。

第二种可以通过vue-cli下载引入。以后常用的方式。

2.使用步骤

1.创建vue实例对象

let vm = new Vue();

2.添加配置项
vue实例对象在创建时，需要提供一些配置项。

//在构造函数中添加一个对象，该对象中的属性就是配置项
let vm = new Vue({
    el:"#app" //el的值为css选择器，告诉vue你要管理哪一块区域。
});

3.创建vue实例控制的区域

<div id="app">
    写vue的代码。
</div>

3.插值与表达式

双大括号{{}}是插值语法，它里面的内容如果是表达式（算数运算，三元运算），直接计算出结果显示到页面上，如果是变量，则显示变量的值。前提是这个变量必须在data属性中存在。

<div id="app">
    {{result}}
</div>

let vm = new Vue({
    el:"#app", //element
    data:{
        result:"222"
    }
});

4.数据绑定

MVVM模式：
​ M：Model 【模型】 指的是后端传递的数据。
​ V：view 【视图】 指的是所看到的的页面。
​ VM：View Model 【视图模型】MVVM模式的核心，在vue中可以理解为vue的解析器。

4.1 单向绑定

把Model绑定到View中，当我们的数据更新后，view就会自动更新。因此，我们不需要进行额外的DOM操作。
提示】在vm实例对象data属性中填写的数据，我们可以通过实体对象来直接调用。

4.2 双向绑定

把model绑定到view上的同时，view也会绑定到model上。如果model的值更新了，会影响到view的显示。如果view上的值更新了，也会影响到model。

4.3 数据双向绑定原理

添加defineProperty（）属性

let p = document.getElementById("book");
var book = {};
var name = "初始值";

Object.defineProperty(book,"name",{
    //当该属性的值更新时，会调用该方法
    set(value){
        console.log("set方法被调用了",value);
        name = value;
        p.innerHTML = book.name;
    },
    //当该属性的值被访问时，会调用该方法
    get(){
        console.log("get方法被调用了");
        return name;
    }
})