vue学习一

aneyal

已于 2022-04-15 13:28:43 修改

阅读量2.9k

点赞数 2

分类专栏：前端学习文章标签： javascript 学习前端 vue

于 2022-04-14 23:13:33 首次发布

本文链接：https://blog.csdn.net/aneyal/article/details/124084562

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

Vue简介

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

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

Vue案例一：hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script src="./js/vue.js">
    </script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id='main'>
        <!-- 使用差值语法 -->
        <h1>hello,{{name}}</h1>
        <h1>age:{{age}}</h1>
    </div>
    <script>
        //  阻止Vue在启动时生成生产提示 
        Vue.config.productionTip=false
        // 创建Vue对象
        // Vue()参数为一个配置对象
        new Vue({
            // el就是element，用于指定当前Vue实例为哪个容器服务
            // 值为CSS选择器字符
            el:'#main',
            // 可以以对象形式存储数据
            // 数据归el所指定的容器使用
            data:{
                name:'lili',
                age:15
            }
        })
    </script>
    
</body>
</html>

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

Vue模版语法

插值语法

将所需要的值放在所需要的地方

使用{{数据名}}，这里的数据名是Vue配置对象中data里面的数据名字

指令语法

v-band

不能使用插值语法动态指定标签里面的属性值，所以可以使用v-band

//url是Vue中data里面的数据名
<a v-band:href="url"></a>

语法：v-band:属性名=''data里面的数据名"

v-band可以简写为:

v-model

语法：v-model:value=''data里面的数据名"

v-model只能用在表单类元素（输入类型元素）的value属性上，不能用于普通的div、h1-h6等

是双向绑定，数据不仅能从data流向页面，还可以从页面流向data

v-model:value可以简写为v-module

插值语法和指令语法的区别

插值语法主要负责标签体里面的内容，指令语法主要负责解析标签，包括标签属性、标签体内容、绑定事件

数据绑定

将Vue模版中的标签内容或者标签属性等与Vue实例中的data里面的数据绑定

单向绑定：数据只能从data流向页面，如v-band

双向绑定：数据不仅能从data流向页面，还可以从页面流向data

v-model只能用在表单类元素上，即有value值。

el和data的两种写法

el

方法一：el:'CSS选择器字符'，如el:'div'

方法二：Vue实例名字.$mount('CSS选择器字符').

例如：

        const v=new Vue({});
        v.$mount('div')

data

对象式：data:{数据名：数据值}，以对象形式表示data

函数式：将data写为一个函数，返回值为对象。

            data(){
                return{
                    name:'lili',
                    age:17,
                }
            }

使用组件时，必须使用函数式

data函数中的this是vue对象，注意，这里不能使用箭头函数

MVVM模型

Vue的设计受到了MVVM模型的启发

M：模型，对应data中的数据

V：视图，对应模版

VM：视图模型，对应Vue实例对象

所以实际开发中，对于Vue实例，变量名一般设置为vm

数据代理

Object.defineProperty

给对象添加属性

比起直接使用对象名[属性名]=属性值，这种方法更高级，可以对属性进行更多的限制。可以控制设定的属性能不能被枚举，即遍历。并且也可以控制属性能不能被修改，也可以控制属性能不能被删除

    <script>
        let a={
            name:'lili',
        }
        // 使用Object.defineProperty新增属性
        Object.defineProperty(a,'age',{
            value:17,
            // 控制属性能不能被枚举，默认为false，不能被枚举
            enumerable:true,
            // 控制属性能不能被修改，默认为false，不能
            writable:true,
            // 也可以控制属性能不能被删除，默认为false
            configurable:true
        })
        console.log(a.age)
    </script>

通过这个方法，还能设置更多高级的控制

数据代理定义

通过一个对象代理对另一个对象中属性的操作

    <script>
        // 通过对b的操作来操作a中的属性x
        let a={x:1};
        let b={y:2};
        Object.defineProperty(b,'x',{
            // 读取z属性时，触发get函数
            // get函数的返回值就是读取结果
            get(){
                return a.x
            },
            // 设置z属性时，触发set函数
            set(value){
                a.x=value
            },

        })
    </script>

Vue中的数据代理

使用get()、set()方法，通过vm对象来代理data对象中属性的操作(读/写)

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

在这里插入图片描述

实例化vue对象时，会在其中设置一个_data对象，这个_data对象和实例化vue对象时配置里面的data对象一致，并且会通过Object.defineProperty（）把data(_data)对象中所有属性添加到vue对象上，并且为每一个添加到vue对象上的属性都指定一个getter,/setter。在getter/setter内部去操作(读/写)data中对应的属性

注意，vue中data发生变化时，整个vue会重新解析一次

事件处理

事件的基本使用

<body>
    <div id='root'>
        <h2>欢迎</h2>
        <!-- v-on绑定事件,show是绑定的函数名，在vue实例中定义 -->
        <button v-on:click='show'>点击提示信息</button>
        <!-- $event表示事件对象，不需要时可以不写 -->
        <button v-on:click='showN(66,$event)'>点击提示信息!</button>
        <!-- 简写形式 -->
        <!-- <button @click='show'>点击提示信息</button> -->
    </div>
    <script>
        Vue.config.productionTip=false
        new Vue({
            el:'div',
            // methods定义事件的回调函数
            methods:{
                show(){
                    // 函数中的this指向vm
                    alert('你好');
                },
                // a接受事件对象
                showN(num,a){
                    alert(num);
                }
            }
        })
    </script>
    
</body>

事件的基本使用：

使用v-on:事件名或@事件名绑定事件，事件名后加上括号和参数可以传递参数，参数里面加上$event，可以传递事件对象

事件的回调函数需要在methods对象中配置，最终也会配置到vm上

methods中的回调函数不能使用箭头函数，并且都是被vue所管理的函数，this的指向是vm或组件实例对象