Vue基础知识——数据绑定、数据代理

目录

什么是Vue？

初识Vue

模板语法

 数据绑定

el和data的两种写法

MVVM模型

数据代理

事件处理 

---

什么是Vue？

Vue是一套用于构建用户界面的渐进式JavaScript框架
Vue可以自底向上逐层的应用

•         简单应用：只需一个轻量小巧的核心库
•         复杂应用：可以映入各式各样的Vue框架

Vue的特点

遵循MVVM模式，编码简洁，体积小，运行效率高，适合移动/PC端开发

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

---

初识Vue

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 

• root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
• root容器里的代码被称为【Vue模板】
• Vue实例和容器是一一对应的，正式开发中只有一个Vue实例，并且会配合着组件一起使用

---

模板语法

html 中包含了一些 JS 语法代码，语法分为两种，分别为

1. 插值语法（双大括号表达式）
2. 指令（以 v-开头） 

插值语法

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

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

指令语法

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

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

•  Vue中有很多的指令，且形式都是： v-???，此处我们只是拿v-bind举个例子 

---

 数据绑定

Vue的数据绑定分为两种绑定方式：单项数据绑定 和 双向数据绑定

1. 单项数据绑定

1. 语法：v-bind:href ="xxx" 或简写为 :href
2. 特点：数据只能从 data 流向页面

2. 双向数据绑定

1. 语法：v-mode:value="xxx" 或简写为 v-model="xxx"
2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

 

---

el和data的两种写法

在创建Vue的实例对象时，有两个属性是我们必须使用到的，el  和 data属性

1. el的两种写法

1. new Vue的时候配置el属性

 new Vue({
            el: '#root',
            data: {
                name: '张三'
            }
        })

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

   new Vue({
 
            data: {
                name: '张三'
            }
        }).$mount('#root')

2. data的两种写法

1. 对象式

 new Vue({
            el: '#root',
            data: {
                name: '张三'
            }
        })

2. 函数式

     new Vue({
            data() {
                return {
                    name: '张三'
                }
            }
        }).$mount('#root')

• 目前那种写法都可以，但是使用组件时，data必须使用函数式，否则会报错 

---

MVVM模型

• M：模型（Model）：对应的data中的数据
• V：视图（View）：模板
• VM：视图模型（ViewModel）：Vue实例对象

    

---

数据代理

1. Object.defineProperty

• enumerable:true,       //控制属性是否可以枚举，默认值是false
• writable：ture，        //控制属性是否可以被修改，默认值是false
• configurable：true    //控制属性是否可以被删除，默认值是false

2. 数据代理的理解

通过一个对象对另一个对象中的属性的操作（读、写）

3. Vue中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）

好处：更加方便地操作data中的数据

基本原理：

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

---

事件处理 

事件的基本使用

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

 <div id="root">
        <h1>欢迎来到{{name}}h1>
        <button v-on:click="showInfo1">时间的基本使用1button>
        <button @click="showInfo2($event,12)">时间的基本使用2button>
    div>

 Vue中的事件修饰符

 Vue中的键盘事件的按键别名

vue中常见的按键别名

1. vue未提供别名的按键，可以使用按键原始的key值去绑定，但是注意要转为kebab-case（短横线命名）
2. 也可以使用keyCode取指定具体的按键(不推荐)
3. 可以去定制按键别名： Vue.config.keyCodes.自定义键名 = 键码

系统修饰键（用法特殊）

ctrl，alt，shift，meta

• 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
• 配合keydown使用： 正常触发

---

 💐Per aspera ad astra  循此苦旅，以觅繁星 💐