Vue.config.productionTip = false //阻止vue在启动时生成提示
Vue实例和容器是一一对应的

2.1 hello world 小案例

<!-- 创建容器 -->
    <div id="root">
        <h1>hello {{name}}</h1>
    </div>

    <!-- 先引入 -->
    <script src="./js/vue2.7.14.js"></script>

    <script>
        Vue.config.productionTip = false //阻止vue在启动时生成提示

        // 创建实例，只传一个参数，是对象，配置对象
        new Vue({
            el: '#root',  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data: {   //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                name: 'zz'
            }
        })
    </script>

• 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
• demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
• demo容器里的代码被称为【Vue模板】
• Vue实例和容器是一一对应的
• 真实开发中只有一个Vue实例，并且会配合着组件一起使用
• {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性
• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)

2.2 模板语法

Vue模板语法有2大类:

（1）插值语法：

功能：用于解析标签体内容

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

（2）指令语法:

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性

<div id="root">
        <h1>增值语法</h1>
        <h3>hello {{name}}</h3>
        <hr>

        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase()" x="hello">点我到{{school.name}}网页1</a>
        <a :href="school.url">点我到{{school.name}}网页2</a> <!-- 可以简写 -->

    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                name: 'jack',
                school: {
                    name: '百度',
                    url: 'http://www.baidu.com'
                }

            }
        })
    </script>

2.3 数据绑定

Vue中有2种数据绑定的方式：

• 单向绑定 ( v-bind ) ：数据只能从data流向页面
• 双向绑定 ( v-model ) ：数据不仅能从data流向页面，还可以从页面流向data

1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

<div id="root">
        <!-- 普通写法 -->
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name"><br>

        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br>
        双向数据绑定：<input type="text" v-model="name"><br>
    </div>

    <script>
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                name: 'zz'
            }
        })
    </script>

2.4 el与data的两种写法

一个是new的时候就要想好为哪个容器所使用

一个是后面再调用

（1）el的两种写法

const v = new Vue({
            // el: '#root',    //注释掉就没办法解析了
            data: {
                name: 'zz'
            }
        })
console.log(v)
v.$mount('#root')

（2）data的两种写法

 // data的两种写法
        new Vue({
            el: '#root',

            // 对象式
            data: {
                name: 'zz'
            }

            // 函数式
            data: function () {
                return {
                    name: 'zz'
                }
            }
        })

2.5 数据代理

（1）Object.defineProperty

Object.defineProperty(obj, prop, descriptor)：

obj：要定义属性的对象。
prop：要定义或修改的属性的名称
descriptor：要定义或修改的属性描述符

<script src="./js/vue2.7.14.js"></script>
    <script>
        let num = 18
        let person = {
            name: '张三',
            sex: '男'
        }
        // 传3个参数：对象，添加的属性名，配置项
        Object.defineProperty(person, 'age', {
            // value: 18,
            // enumerable:true,  //控制属性是否可以枚举（遍历），默认值false
            // writable:true,  //控制属性是否可以被修改，默认值false
            // configurable:true  //控制属性是否可以被删除，默认值false

            // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
            get() {
                console.log('有人读取age属性了')
                return num
            },
            // 当有人修改person的age属性时，set函数（setter）就会被调用,且会收到修改的具体值
            set(value) {
                console.log('有人修改了age属性，且值是', value)
                num = value
            }
        })
        // console.log(person)
    </script>

get读取，set修改

访问器属性：本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性。

由 “getter” 和 “setter” 方法表示。在对象字面量中，它们用get和set表示：

（2）数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<script src="./js/vue2.7.14.js"></script>
    <script>
        let obj1 = { x: 100 }
        let obj2 = { y: 200 }
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj1.x
            },
            set(value) {
                obj1.x = value
            }
        })
    </script>

（3）vue中的数据代理

• Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
• Vue中数据代理的好处：更加方便的操作data中的数据
• 基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

<!-- 准备好一个容器-->
<div id="root">
	<h2>学校名称：{{name}}</h2>
	<h2>学校地址：{{address}}</h2>
</div>

<script>
	const vm = new Vue({
        el: '#root',
        data: {
            name: 'zz',
            address: '天津'
        }
    })
</script>

我们在控制台打印 new 出来的 vm

可以看到，写在配置项中的 data 数据被 绑定到了 vm 对象上，是 Vue 将 _data 中的 name，address 数据 代理到 vm 本身上。