一、模板语法

1. 插值语法

• 功能：解析标签体内容。
• {{XXX}} 被称为插值语法，当中的 XXX 要写 Js 表达式，且 XXX 可以自动读取到 data 中的所有属性。

<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<script>
    new Vue({
        el: '#root',
        data: {
            name: 'World!'
        }
    })
</script>

2. 指令语法

• 功能：解析标签（包括：标签属性，标签体内容，绑定事件…）。
• v-bind 是 Vue 里面的一个指令，可以给标签里的任何一个标签属性动态的绑定值。它可以简写成 :
• 在 href 前加 v-bind: 就会把 url 转换成 JS 表达式执行。

<a v-bind:href="url">百度</a>
<a :href="url">百度</a>

二、数据绑定

• v-bind 是单向绑定，数据只能从 data 流向页面。
• v-model 是双向绑定，数据不仅能从 data 流向页面，还可以从页面流向 data。
• 双向绑定只能应用在表单类元素（输入类元素）上。
• v-model:value 可以简写成 v-model，因为默认找的就是 value。

单项数据绑定：<input type="text" v-bind:value="name">
简写：<input type="text" :value="name">
<hr> 
双项数据绑定：<input type="text" v-model:value="name">
简写：<input type="text" v-model="name">

三、el 和 data 的两种写法

1. el 的两种写法

• 第一种

new Vue({
    el: "#root",
    data: {
        name: 'andy'
    }
})

• 第二种，先创建实例，在指定 el 值。更灵活，可以配合定时器

const v = new Vue({
    data: {
        name: 'andy'
    }
})
v.$mount('#root')

2. data 的两种写法

• 第一种：对象式

new Vue({
    el: "#root",
    data: {
        name: 'andy'
    }
})

• 第二种：函数式。data 的 this 指向 Vue 实例对象。

new Vue({
    el: "#root",
    data() {
        console.log(this);
        return {
            name: 'andy'
        }
    },
})

由 Vue 管理的函数，一定不要写箭头函数。

四、MVVM 模型

1. M：模型（Model），一般 JS 对象，对应 data 中的数据；
2. V：试图（View），模板；
3. VM：视图模型（ViewModel），Vue 实例对象。
   
   

• 因此使用 vm 这个变量名表示 Vue 实例。
• data 中所有的属性，最后都出现在了 vm 身上。
• vm 身上所有的属性及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用。
  

五、数据代理

1. Object.defineProperty()

• Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
• 由该方法定义的属性不可枚举，不可修改，不可删除

Object.defineProperty(Person, 'age', {
    value: 18,
    enumerable: true,  // 可枚举，默认 false
    writable: true,  // 可修改，默认 false
    configurable: true  // 可删除，默认 false
    
})

• 当有人读取 Person 的 age 属性时，get 函数就会被调用，且返回值就是 age 的值。

let number = 19;
Object.defineProperty(Person, 'age', {
    get() {
        return number;
    }
})

• 当有人修改 Person 的 age 属性时，set 函数就会被调用，且会收到修改的具体值。

let number = 19;
Object.defineProperty(Person, 'age', {
    set(value) {
        number = value;
        return value;
    }
})

• 在 Vue 中，数据劫持、数据代理、计算属性都用到了 Object.defineProperty 方法。

2. 何为数据代理

通过一个对象代理对另一个对象中的属性进行操作，就是数据代理。

let obj = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2, 'x',{
    get(){
        return obj.x
    },
    set(value){
        obj.x = value
    }
})

3. Vue中的数据代理

1. Vue 中的数据代理是通过 vm 对象来代理 data 对象中属性的操作（读/写）。
2. Vue 中数据代理的好处是更加方便的操作 data 中的数据。

基本原理：

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

六、事件处理

1. 事件的基本使用

1. 使用 v-on:xxx 或 @xxx 绑定事件，xxx 是事件名。

<button v-on:click="showInfo1">点我</button>
<button @click="showInfo2">点我</button>

2. 事件的回调需要配置在 methods 对象中，最终会在 vm 上。
3. methods 中配置的函数，都是被 Vue 所管理的函数，this 指向 vm 或组件实例对象，函数不要用箭头函数！
4. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参。

new Vue({
    el: '#root',
    data: {
        name: 'World!',
    },
    methods: {
        showInfo1(event) {
            console.log(event.target);
            console.log(this);
        },
        showInfo2() {
            alert("hello");
        }
    },
})

2. 事件修饰符

修饰符可以链式编程。

1. prevent：阻止默认事件（常用）；

<a href="http://www.baidu.com" @click.prevent="showInfo">百度</a>

2. stop：阻止事件冒泡（常用）；

<div @click="showInfo">
    <button @click.stop="showInfo">点我冒泡</button>
</div>

3. once：事件只触发一次（常用）；

<button @click.once="showInfo">我只触发一次</button>

4. capture：使用事件的捕获模式；

<div @click.captrue="showInfo">
    div1
    <div @click="showInfo">
        div2
    </div>
</div>

5. self：只有 event.target 是当前操作的元素时才触发事件；也能实现停止冒泡效果；

<div @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
</div>

6. passive：事件的默认行为立刻执行，无需等待事件回调执行完毕。

3. 键盘事件

• Vue 中常用的按键别名：

1. 回车 enter
2. 删除、退格 delete
3. 退出 esc
4. 空格 space
5. 换行 tab（特殊，必须配合 keydown）
6. 上 up
7. 下 down
8. 左 left
9. 右 right

<input type="text" @keyup.enter="showInfo">

• Vue 未提供别命的按键，可以使用按键原始的 key 值去绑定，但注意要转为 kebab-case（短横线命名）；

<input type="text" @keyup.caps-lock="showInfo">

• 系统修饰键（用法特殊）：ctrl、alt、shift、meta (徽标键)

1. 配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
2. 可以配合组合键一起使用
3. 配合 keydown 使用：正常触发事件。

<input type="text" @keyup.ctrl.y="showInfo">

• 也可以使用 KeyCodes 去指定具体的按键（不推荐）
• Vue.config.keyCodes = {} 可以自己制定按键别名。

Vue.config.keyCodes = {
    huiche: 13,
}