1. Vue基础

1. Vue是一套用于构建用户界面的渐进式JavaScript框架

2. Vue的作者是尤玉溪

3. Vue的特点

   • 1. 采用组件化模式，提高代码复用率，且让代码更好维护
   • 2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
   • 3. 使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点

4. 学习Vue之前，要掌握的JavaScript基础知识

   • 1. ES6语法规范
   • 2. ES6模块化
   • 3. 包管理器
   • 4. 原型，原型链
   • 5. 数组常用方法
   • 6. axios
   • 7. promise

2. 初识Vue

• 1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
• 2. root容器里面的代码，依然符合html规范，只不过混入了一些Vue的语法
• 3. root容器里面的代码，被称为【Vue模板】
• 4. Vue实例和容器是一一对应的
• 5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用
• 6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
• 7. 一旦data中的数据发生改变，那么页面中用到该数据的部分，也会自动更新

2. 模板语法

Vue模板语法有两大类

• 1. 插值语法：
     功能：用于解析标签体内容
     写法：{{xxx}}
• 2. 指令语法
     功能：用于解析标签(包括标签属性，标签体内容，绑定事件...)
     举例：v-bind:href="url" 或者 :href="url"

3. 数据绑定

Vue中有两种数据绑定的方式

• 1. 单向绑定(v-bind): 数据只能从data流向页面
• 2. 双向绑定(v-model): 数据不仅能从data流向页面，也能从页面流向data

备注：

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

4. el和data的两种写法

1. el的两种写法

 const vm = new Vue({
     el: '#root',
     data: {
         name: ''
     }
 })

• new Vue的时候配置el属性

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

• 先创建Vue实例，再通过vm.$mount('#root')指定el的值

2. data的两种写法

• 对象式

 const vm = new Vue({
     el: '#root',
     data: {
         name: ''
     }
 })

• 函数式

const vm = new Vue({
     el: '#root',
     data: function() {
            return {
                name: ''
            } 
    }
 })

3. 一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是Vue实例了

5. MVVM模型

MVVM模型

• 1. M：模型(model),data中的数据
• 2. V：视图(View),模板代码
• 3. VM：视图模型(ViewModel),Vue实例

观察发现

1. data中的所有属性，最后都出现在了vm身上
2. vm身上所有的属性，以及vue原型上所有属性，在Vue模板中都可以使用

6. 数据代理

• 1. Object.defineProperty

<script type="text/javascript">
    let number = 18

    let person = {
        name: '张三',
        sex: '男'
    }

    Object.defineProperty(person,'age', {
        // value: 18,
        // enumerable: true, // 控制属性是否可以枚举，默认false
        // writable: true, // 控制属性是否可以被修改，默认false
        // configurable: true // 控制属性是否可以被删除，默认false

        // 当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
        get: function () {
            return number
        },

        // 当有人修改person的age属性时，set函数就会被调用，且会收到修改的具体值
        set(value) {
            number = value
        }
    })

    console.log(person)
</script>

• 2. 何为数据代理

<!--
数据代理： 通过一个对象代理对另一个对象中属性的操作(读/写)
-->
<script type="text/javascript">
let obj1 = {x: 100}
let obj2 = {y: 200}

Object.defineProperty(obj2,'x', {
    get() {
    return obj1.x
    },

    set(v) {
    obj1.x = v
    }
})
</script>

• 3. Vue中的数据代理

<!--
    1. Vue中的数据代理
      通过vm对象来代理data对象中属性的操作(读/写)
    2. Vue中数据代理的好处
      更加方便的操作data中的数据
    3.基本原理
      通过Object.defineProperty()把data对象中所有属性添加到vm上
      为每一个添加到vm上的属性，都指定一个getter和setter。
      在getter和setter内部去操作(读/写)data中对应的属性
-->

14. 事件处理

事件的基本使用:

• 1. 使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件名
• 2. 事件的回调需要配置在methods对象中，最终会在vm上
• 3. methods中配置的函数，不要用箭头函数，否则this就不是vm啦
• 4. methods中配置的函数，都是被Vue所管理的函数，this指向的是vm 或 组件实例对象
• 5. @click="demo" 和 @click="demo($event)"效果一致，但后者可以传参

<button v-on:click="showInfo1">点我提示信息1(不传参)</button>
<button @click="showInfo2($event,66)">点我提示信息2(传参)</button>

methods: {
    showInfo1(event) {
        console.log(event)
        alert('同学你好')
    },
    showInfo2(event, value) {
        console.log(event, value)
    }
}

15. 事件修饰符

Vue中的事件修饰符

• 1. prevent：阻止默认事件(常用)
• 2. stop：阻止事件冒泡(常用)
• 3. once：事件只触发一次(常用)
• 4. capture: 使用事件的捕获模式
• 5. self: 只有event.target是当前操作的元素才触发事件
• 6. passive: 事件的默认行为立即执行，无需等待事件回调执行完毕

<!--  阻止默认事件(常用)   -->
<a href="https://www.baidu.com" v-on:click.prevent="showInfo">点我提示信息</a>

<!--  阻止事件冒泡(常用)  -->
<div class="demo1" v-on:click="showInfo">
    <button v-on:click.stop="showInfo">点我提示信息</button>
    <a href="https://www.baidu.com" v-on:click.stop.prevent="showInfo">点我提示信息</a>
</div>

<!--  事件只触发一次  -->
<button v-on:click.once="showInfo">点我提示信息</button>

<!--  使用事件的捕获模式  -->
<div class="box1" v-on:click.capture="showMsg(1)">
    div1
    <div class="box2" v-on:click="showMsg(2)">
        div2
    </div>
</div>

<!--  只有event.target是当前操作的元素时，才触发事件  -->
<div class="demo1" v-on:click.self="showInfo">
    <button v-on:click="showInfo">点我提示信息</button>
</div>

<!--  passive: 事件的默认行为立即执行，无需等待事件回调执行完毕  -->

16. 键盘事件