一、初始Vue

① 创建一个Vue实例（vue2)：

    <div id="app">
        <!-- 在页面中，通过插值表达式可以直接使用Vue管理的数据。注意：
    Vue管理的数据是响应式的，所谓响应式，指的是，当前数据发生改变是，会重新渲染页面。 -->
        <h2>{{msg}}</h2>
        <p>{{name}}</p>
        <p>{{age}}</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>
        // 不允许 vue-devtools 检查代码
        Vue.config.devtools = false
        // vue 在启动时不显示生产提示
        Vue.config.productionTip = false
        // 初始化一个Vue实例，在创建Vue实例时，需要给Vue传递一个配置选项，该配置选项是一个对象,可以定义一个变量去接也可以不用
        let vm = new Vue({
            // el选项，指定当前Vue实例，操作的容器,此选项也可以不写，通过$mount('选择器')挂载指定的容器
            // el: "#app",
            // data选项，用于存储当前Vue实例管理的数据
            // data选项里面管理的数据，其实会被Vue实例身上的_data进行代理；
            //并将代理过后的数据再添加到Vue实例身上，方便直接调用。
            data: {
                msg: "开始学习Vue",
                name: "张三",
                age: 23
            }
        }).$mount("#app")
    </script>

② Vue的响应式原理

1. 代理对象的基本理解：

        let data = {
            name: '张三',
            age: 18
          }
        // 因为对象是引用类型，在传递时，传的是地址
        let _data = data;
        // 操作_data，真正改变的是data，此时就可以将_data当做是data的代理对象。
        data.name = '李四'
        data.age = 30
        console.log(data);//{name: '李四', age: 30}

2.如何给对象添加成员

        let obj = {}
        // 方式1：对象名.属性的方式，给对象添加成员
        obj.name = '王五'
        // 方式2：对象名['属性名']的方式，给对象添加成员
        obj['age'] = 30
        // 方式3：通过Object对象的defineProperty方法，给指定的对象添加指定的属性
        // 这种方式，给对象添加成员，尽管繁琐，但是可以配置更多的功能。
        // 默认添加的属性是不允许删除的，如果要允许删除，就需要添加configurable配置。
        // 默认添加的属性是不允许枚举的，所谓枚举指的就是遍历。
        Object.defineProperty(obj, 'sex', {
            // 属性值
            value: '男',
            // 属性允许被删除
            configurable: true,
            // 属性允许被枚举
            enumerable: true
        })
        // 遍历出对象的所有属性名称
        for (let key in obj) {
            console.log(key); //name age sex
        }

        // delete关键字，用于删除对象身上的指定成员
        delete obj.name
        delete obj.sex
        console.log(obj);  //{age: 30}

3.那么Vue的响应式原理，就用到了Object.defineProperty,给代理对象添加属性。 

①我们先定义一份原始数据，也就是被代理对象

        let data = {
            name: '张三',
            age: 18
        }

②再定义一个空的代理对象

       let _data = {}

③使用Object.defineProperty给代理对象添加属性

        Object.defineProperty(_data, 'name', {
        //get方法，用于返回属性的值，当使用到_data对象里面的name属性获取值时，就会执行get方法
            get() {
                return data.name
            },
       //set方法，用于设置属性的值，当使用到_data对象里面的name属性并给它赋值时，就会调用set方法
            set(val) {
                data.name = val
                // 当监听到数据发生变化时，重新渲染DOM
                readerDOM()
            }
        })
        Object.defineProperty(_data, 'age', {
            get() {
                return data.age
            },
            set(val) {
                data.age = val
                readerDOM()
            }
        })

④.渲染DOM更新的方法

        function readerDOM() {
            document.getElementById("name").innerHTML = data.name
            document.getElementById("age").innerHTML = data.age
        }
        readerDOM()

③ Vue的常用指令

1.v-bind =>让html元素的属性绑定Vue实例管理的数据. 简写：例如：v-bind:value='name'

2.v-on =>让html元素的事件绑定Vue实例管理的方法 简写@   例如：v-on:input="setName"

3.v-model =>用于实现对数据的双向绑定，即数据发生变化重新渲染页面，页面数据发生变化更新回数据。例如：v-model="sex"

4.v-html=>更新元素的html  

5.v-text=>更新元素的文本内容

下面是条件渲染和列表渲染会用的指令

6.v-if=>根据表达式的值的真实性来有条件地渲染元素

7.v-else-if=>表示 v-if 的“else if 块”。可以链式调用。

8.v-else=>为 v-if 或者 v-else-if 添加“else 块”。

9.v-show=>根据表达式之真假值，切换元素的 display的CSS属性。

注意：v-if的表达式返回true，会重新渲染对应的元素。v-show的表达式返回true，元素正常渲

染，只是通过display样式去控制显示和隐藏。所以，如果元素需要反复切换显示和隐藏使用

v-show；如果只是页面加载是判断是否显示使用v-if。 

10.v-for=>用于循环列表。必须使用特定语法 item in arr/obj/number/...，必须要一个key属性来提供一个排序提示并且key属性值必须要唯一。

注意：v-for不能与v-if在同一个html标签同时使用

      <div id="app">
        <h2>{{name}}</h2>
        <!-- 注意：这里在调用方法时，不能加上()，此时它才会将事件对象作为方法的第一个参数，传给该方法。 -->
        <input type="text" v-bind:value="name" v-on:input="setName">
        <hr>
        <h2>{{address}}</h2>
        <!-- 注意：如果方法的逻辑处理比较简单，可以直接将代码写在行内；这里的$event返回的就是事件对象。 -->
        <input type="text" :value="address" @input="address=$event.target.value">
        <hr>
        <h2>{{hobby}}</h2>
        <input type="text" v-model="hobby">
        <!-- 下面的页面显示为：你好啊! -->
        <div v-html='desc'></div>
        <!-- 下面的页面显示为：<p>你好啊!</P>-->
        <div v-text='desc'></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>
        // 实例化一个Vue对象
        let vm = new Vue({
            el: "#app",
            // data选项，可以是一个对象，也可以是一个方法，由方法返回一对象。
            data: {
                name: "张三",
                age: 25,
                hobby: "打游戏",
                address: "西安",
                desc: '<p>你好啊!</P>'
            },
            methods: {
                // 该方法更新name属性值
                // 注意：在调用方式时，如果没有传递参数，那么事件方法会默认传一个事件对象参数。
                setName(e) {
                    this.name = e.target.value
                }
            }
        })
    </script>

    <div id="app">
        <!-- 按钮注册点击事件，因为处理的逻辑比较简单，直接将代码写在行内 -->
        <button @click="isShow=!isShow">显示/隐藏</button>
        <!-- v-if指令用于条件渲染，表达式返回true，显示元素；否则不显示元素。 -->
        <h2 v-if="isShow">Hello,world1</h2> 
        <h2 v-if="2==2">Hello,world2</h2>
        <!-- v-show指令也是用于条件渲染，表达式返回true，显示元素；否则不显示元素。 -->
        <h2 v-show="isShow">Hello,world3</h2>
        <!-- v-if，v-else-if，v-else可以组成多重判断结构。注意：中间不能有断层。 -->
        <h2 v-if="score>=90">优秀</h2>
        <h2 v-else-if="score>=80">良好</h2>
        <h2 v-else-if="score>=70">中等</h2>
        <h2 v-else-if="score>=60">合格</h2>
        <h2 v-else>差</h2>
        <input type="text" v-model="score">
        <!-- 通常情况下，我们会在列表外层在包一层元素，控制显示和隐藏，这样做的问题会导致我们最外层的元素冗余，
        这时可以设置一个内置组件template,该组件在渲染时不显示。 -->
        <template v-if="isShow">
            <ul>
                <!-- v-for指令，用于循环列表。语法：v-for="(每一项,索引) in 数组"，渲染列表时，为了提高渲染性能，
            通常都要绑定一个key。key一定要是唯一值。-->
                <li v-for="(item,index) in goodses" v-bind:key="index">
                    {{item.id}}---{{item.name}}---{{item.price}}
                    <button @click="delGoods(index)">删除</button>
                </li>
            </ul>
        </template>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>
        Vue.config.devtools = false
        Vue.config.productionTip = false
        new Vue({
            el: "#app",
            data: {
                // 该属性，用于表示是否显示
                isShow: true,
                // 定义一个成绩
                score: 88,
                // 定义一个数组
                goodses: [
                    {
                        id: 1001,
                        name: '乐事薯片',
                        price: '8元'
                    },
                    {
                        id: 1002,
                        name: '百事可乐',
                        price: '3元'
                    },
                    {
                        id: 1003,
                        name: '元祖月饼',
                        price: '10元'
                    },
                    {
                        id: 1004,
                        name: '德芙巧克力',
                        price: '29元'
                    }
                ]
            },
            methods: {
                // 删除商品的方法，将商品的下标通过方法传进来
                delGoods(index) {
                    if (confirm('是否确定删除')) {
                        // 再根据数组的下标删除对应的数据
                        this.goodses.splice(index, 1)
                    }
                }
            },

        })
    </script>