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

最新推荐文章于 2023-04-23 19:00:00 发布

芋泥丶

最新推荐文章于 2023-04-23 19:00:00 发布

阅读量413

点赞数

分类专栏： Vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_53619602/article/details/126595739

版权

前端同时被 2 个专栏收录

40 篇文章 3 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

什么是Vue？

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

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

Vue的特点

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

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

初识Vue

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

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

模板语法

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

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

插值语法

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

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

指令语法

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

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

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

数据绑定

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

1. 单项数据绑定

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

2. 双向数据绑定

语法：v-mode:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 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

  <script>
        let number = 18;
        var person = {
            name: '张三',
            sex: '男',

        }

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

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


        console.log(person);
    </script>

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中对应的属性

事件处理

事件的基本使用

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

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

<script>
        Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示。
        new Vue({
            el: '#root',
            data: {
                name: '尚硅谷'
            },
            methods: {
                showInfo1() {
                    alert('同学你好！');
                },
                showInfo2(event, a) {
                    // alert('你好同学！！')
                    console.log(event.target.innerHTML);
                    console.log(a);
                }
            }
        })
    </script>

Vue中的事件修饰符

事件修饰符	说明
prevent	阻止默认事件（常用）
stop	阻止事件冒泡（常用）
once	事件只触发一次（常用）
capture	使用事件的捕获模式
self	只有event-target是当前操作的元素时才触发事件
passive	时间的默认行为为立即执行，无需等待事件回调执行完毕

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

vue中常见的按键别名

键盘按键名称	按键别名
回车	enter
删除	delete（捕获“删除‘和”退格“键）
退出	esc
空格	space
换行	tab（特殊，必须配合keydown取使用）
上	up
下	down
左	left
右	right