Vue基础_Vue2

最新推荐文章于 2024-08-23 13:45:37 发布

是发财不是旺财

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量289

点赞数

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

本文链接：https://blog.csdn.net/qq_45578388/article/details/126068916

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、Vue是什么？

一套构建用户界面的渐进式JavaScript框架

渐进式：我们可以由浅入深，由简单到复杂方式去使用的Js框架

当我们只需要做一个简单应用时：只需要引入一个轻量小巧的核心库
当我们需要做一个复杂应用时：可以映入各式各样的Vue插件

二、Vue的特点

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

三、Vue的安装

1.在Vue官网下载Vue.js文件安装

该方法在官网中已经打不开了
在这里插入图片描述

2.CDN

通过< script >引入Vue进行安装

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>

3.NPM方法（推荐）

我这里使用Vite去创建
具体可以参考vite官网

pnpm create vite

在这里插入图片描述

四、初识Vue

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body>

<!--准备一个容器-->
<div id="root">
    <h1>Hello,{{name}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //禁止Vue在启动时产生生产提升
    new Vue({
        el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {//data中用于存储数据，数据供el所指定的容器去使用
            name: '发财'
        }
    })
</script>
</body>

五、Vue模板语法

Vue模板语法有两大类

插值语法
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
指令语法：
功能：用于解析标签（包括：属性标签、标签体内容，绑定事件…）
举例：v-bind:href=‘xxx’ 或简写为 :href=‘xxx’,xxx同样要写js表达式，且可以直接读取到data中所有的属性

六、Vue的数据绑定

Vue中有两种数据绑定方式

单向数据绑定（v-bind）：数据只能从data流向页面
双向绑定（v-bind）：数据不仅能从data流向页面，也可以从页面流向data

双向绑定, 只能绑定文本框,单选按钮,复选框,文本域,下拉列表等
文本框/单选按钮/textarea, 绑定的数据是字符串类型
单个复选框, 绑定的是boolean类型
多个复选框, 绑定的是数组
select单选对应字符串，多选对应也是数组

在这里插入图片描述

七、data和el的两种写法

el的两种写法

new Vue时配置el属性
先创建vue实例，在通过vm.$mount(’#root‘)指定el的值

data的两种写法

对象式
2. 函数式
该方法通常用于组件封装

注意：函数式写法支持多种函数写法，但要注意的是箭头函数会改变this的指向，使this指向windows

八、MVVM

Vue在设计出来时，在一定程度上参考了MVVM模型
在这里插入图片描述
M：模型（Model）：对应data中的数据
V：视图（view）：模板
VM：视图模型（ViewModel）:Vue实例对象

经过观察发现，在Vue中：

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

MVVM优点：

双向绑定技术，当Model变化时，View-Model会自动更新，View也会自动变化，很好做到数据的一致性。不用担心在模块的这一块数据是这个值，在另一块就是另一个值了。
view的功能进一步得到强化，具有控制的部分功能，若想无线增强它的功能，甚至控制器的功能几乎都可以迁移到各个view上（不推荐，这样的话view就干了不属于它职责范围的事情了）。view可以像控制器一样具有自己的View-Model
由于控制器的功能大都移动到View上处理，大大的对控制器进行了瘦身。不用再为看到庞大的控制器逻辑而发愁了。
可以对View或ViewController的数据处理部分抽象出来一个函数处理model。这样它们专职页面布局和页面跳转，它们必然更一步的简化。

MVVM缺点：

数据绑定使得 Bug 很难被调试。你看到界面异常了，有可能是你 View 的代码有 Bug，也可能是 Model 的代码有问题。数据绑定使得一个位置的 Bug 被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。
一个大的模块中model也会很大，虽然使用方便了也很容易保证了数据的一致性，当时长期持有，不释放内存就造成了花费更多的内存。
数据双向绑定不利于代码重用。客户端开发最常用的重用是View，但是数据双向绑定技术，让你在一个View都绑定了一个model，不同模块的model都不同。那就不能简单重用View了。

该优缺点部分是我在其他地方摘抄的，只是用于学习，如果侵权了就删了

九、数据代理

描述：通过一个对象代理另一个对象中属性的操作（读/写）

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

基本原理：

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

Object.defineProperty()

描述：Object.defineProperty（）方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法：Object.defineProperty(obj, prop, descriptor)

参数：obj：要定义的属性；
prop：要定义或修改的属性的名称或Symbol；
descriptor：要定义或修改的属性描述符

在这里插入图片描述

默认情况下，该方法定义的属性不能直接进行遍历或者删除修改等操作，但允许修改默认的额外选项或配置

简单的数据代理

通过操作obj2去对obj进行操作
在这里插入图片描述

十、事件处理

事件的基本使用：

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

<body>

<!--准备一个容器-->
<div id="root">
    <h1>{{name}}</h1>
    <button @click="btn">提示</button>
    <button @click="btn2($event,88)">提示2</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            name:'发财'
        },
        methods:{
            btn(event){
                alert('发财')
            },
            btn2(event,number){
                alert('发财'+number)
            }
        }
    })
</script>

在这里插入图片描述

事件修饰符

Vue中的事件修饰符

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

    <style>
        *{
            margin-top:20px;
        }
        .demo{
            background-color: aqua;
        }
        .demo2{
            padding: 10px;
            background-color: aquamarine;
        }
        .demo3{
            background-color: bisque;
        }
    </style>
</head>
<body>
<!--准备一个容器-->
<div id="root">
    <h1>{{name}}</h1>
    <button @click="btn">提示</button>
    <!--    prevent阻止默认事件-->
    <button @click.prevent="btn">提示2</button>
    <!--    stop阻止事件冒泡-->
    <div class="demo" @click="btn">
        <button @click.stop="btn">提示3</button>
    </div>
    <!--    once事件只触发一次-->
    <button @click.once="btn">提示4</button>
    <!--    capture使用事件的捕获模式  使事件在捕获阶段就执行-->
    <div class="demo2" @click.capture="btn2($event,5)">提示5
        <div class="demo3" @click="btn2($event,6)">提示6</div>
    </div>
    <!--    capture使用事件的捕获模式-->
    <div class="demo2" @click.self="btn2($event,7)">提示7
        <div class="demo3" @click="btn2($event,8)">提示8</div>
    </div>
    <!--    passive-->
    <div class="demo2" @click.self="btn2($event,7)">提示7
        <div class="demo3" @click="btn2($event,8)">提示8</div>
    </div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            name: '发财'
        },
        methods: {
            btn(event) {
                alert('发财')
            },
            btn2(event,number){
                alert(number)
            }
        }
    })
</script>

键盘事件

是发财不是旺财

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础_Vue2

一、Vue是什么？一套构建用户界面的渐进式JavaScript框架渐进式：我们可以由浅入深，由简单到复杂方式去使用的Js框架> 当我们只需要做一个`简单应用`时：只需要引入一个轻量小巧的核心库> 当我们需要做一个`复杂应用`时：可以映入各式各样的Vue插件二、Vue的特点1. 采用`组件化`模式，提高代码重复率，且让代码的更好维护2. `声明式`编码，让编码人员无需直接操作DOM，提高开发效率3. 使用`虚拟DOM`+优秀的`Diff算法`，尽量复用DOM节点
复制链接

扫一扫