Vue基础篇一（适合后端开发小伙伴学习）

最新推荐文章于 2024-07-02 14:49:53 发布

Ambition0823

最新推荐文章于 2024-07-02 14:49:53 发布

阅读量427

点赞数

分类专栏：前端文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/m0_52781902/article/details/126716189

版权

前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

感兴趣的朋友可以去我的语雀平台进行查看更多的知识。
https://www.yuque.com/books/share/ffbf2b86-52af-4a4f-b144-507a890fb8dc?# 《木子Teng的计算机知识库》

Vue

本篇用于Vue基础入门，相对于后端开发的同学较为友好，如果想较为系统的学习Vue，不建议在此学习。

开发环境：

node.js—16.15.0

npm—8.19.1

1. Vue概述及第一个Vue程序

1.1 什么是MVVM

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得

更容易管理和使用。其作用如下：

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS

1.2 为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不

变，当Model变化的时候View也可以不变。
可复用：可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

MVVM组成部分

View

View是视图层，也就是用户界面。前端主要由HTML和CSS来构建，为了更方便地展现ViewModel或者Model层的数据，已经产生

了各种各样的前后端模板语言，比如FreeMarker，Thymeleaf等等，各大MVVM框架如Vue.js.Angular JS， EJS等也都有自己用来构

建用户界面的内置模板语言。
Model

Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端

约定统一的接口规则
ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做

二次封装，以生成符合View层使用预期的视图数据模型。

需要注意的是ViewModel所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的

比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)

视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， ViewModel

的内容会实时展现在View层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。

MVVM框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现

事件驱动编程。

View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model

层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环

1.3 Vue

Vue(读音/vju/，类似于view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是， Vue被设计

为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vue

x) 或既有项目整合

MVVM模式的实现者

Model：模型层，在这里表示JavaScript对象
View：视图层，在这里表示DOM(HTML操作的元素)
ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

至此，我们可以大致了解， Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

1.4 第一个Vue程序

Vue.js：我们通常使用cdn导入

<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
<!--或-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

创建一个空项目，创建一个文件夹，new一个HTML文件
编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
</head>
<body>

<!--View层-->
<div id="app">
    <!--数据绑定-->
    {{message}}
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        /*Model层*/
        data: {
            message: "Hello,Vue"
        }
    });
</script>

</body>
</html>

说明

el:“#app” -----> 绑定元素的ID
data:{message:“hello,vue —cvzhanshi!”} ----> 数据对象中有一个名为message的属性，并设置了初始值Hello,Vue
{{message}} -----> 实现数据绑定功能

运行效果

测试双向绑定

为了能够更直观的体验Vue带来的数据绑定功能，我们需要在浏览器测试一番，操作流程如下：

在浏览器上运行第一个Vue应用程序，进入开发者工具
在控制台输入vm.message=‘HelloWorld’，然后回车，你会发现浏览器中显示的内容会直接变成HelloWorld，不需要刷新页面

此时就可以在控制台直接输入vm.message来修改值，中间是可以省略data的，在这个操作中，我并没有主动操作DOM，就让页面的内

容发生了变化，这就是借助了Vue的数据绑定功能实现的； MVVM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑

定，以做到数据与视图的快速响应

理解ViewModel：它可以类比成一个观察者，监测到了数据的变化，就立马更新页面与之绑定的值，无需更新页面，也无需操作

DOM对象，相当于一个虚拟DOM对象

2. Vue基础语法

2.1 v-bind

测试代码

<!--View层-->
<div id="app">
    <!--数据绑定-->
    {{message}}
    <br>
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        /*Model层*/
        data: {
            message: "Hello,Vue"
        }
    });
</script>

测试效果

说明：

看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute
它们会在渲染的 DOM 上应用特殊的响应式行为

在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”

如果你再次打开浏览器的 JavaScript 控制台，输入 app.message = '新消息'，就会再一次看到这个绑定了 title attribute 的

HTML 已经进行了更新

2.2 v-if、v-else

测试代码1

<!--View层-->
<div id="app">
    <h1 v-if="type">Yes</h1>
    <h1 v-else>No</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            /*Model 数据*/
            type: true
        }
    });
</script>

测试结果

测试

在浏览器上运行，打开控制台
在控制台输入vue.type=false然后回车，你会发现浏览器中显示的内容会直接变成NO

注：使用v-*属性绑定数据是不需要双花括号包裹的

测试代码二

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            type: "A"
        }
    })
</script>

测试结果

测试

1.在浏览器上运行，打开控制台
2.在控制台输入vue.type="E"然后回车，你会发现浏览器中显示的内容会直接变成D

注：===三个等号在JS中表示绝对等于(就是数据与类型都要相等)

2.3 v-for

测试代码

<div id="app">
    <li v-for="(item, index) in items">
        {{item.message}}---{{index}}
    </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            items: [
                {message: "teng1"},
                {message: "teng2"},
                {message: "teng3"}
            ]
        }
    });
</script>

结果

格式说明

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>
</div>

注：items是数组，item是数组元素迭代的别名，index是迭代的序号

测试

打开控制台，在控制台输入vue.items.push({message：'vue hello'})，尝试追加一条数据，会发现页面也添加了数据

2.4 v-on

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

测试代码

<div id="app">
    <button v-on:click="counter += 1">Add 1</button>
    <p>按钮已经被点击了 {{counter}} 次</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            counter: 0
        }
    })
</script>

当我们点击后

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用

的方法名称

测试代码

<div id="app">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            name: "Vue.js",
        },
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.name + '!');
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    });
</script>

结果

3. Vue表单双绑&组件

3.1 表单数据双向绑定

数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

注意 : 我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model负责监听用户

的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

单行文本

<body>

<div id="app">
    <input placeholder="编辑我" v-model="message">
    <p>Message is : {{message}} </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            message: ''
        }
    });
</script>
</body>

多行文本

<body>

<div id="app">
    <span>文本框内容是：</span>
    <p style="white-space: pre-line;"> {{message}}</p>
    <br>
    <textarea v-model="message" placeholder="编辑我"></textarea>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            message: ' '
        }
    });
</script>
</body>

复选框

单个复选框绑定到布尔值

<body>

<div id="app">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            checked: true
        }
    })
</script>
</body>

多个复选框，绑定到同一个数组

<div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>点击的名字：{{checkedNames}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            checkedNames: []
        }
    })
</script>

单选按钮

<div id="app">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>选中的是：{{picked}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            picked: ''
        }
    });
</script>

选择框

<div id="app">
    下拉框：
    <select v-model="selected">
        <option disabled value="">---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    value:
    <span>{{selected}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            selected: ''
        },
    });
</script>

3.2 组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲

同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件

自定义第一个组件

<div id="app">
    <teng></teng>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 定义一个Vue组件component
    Vue.component("teng", {
        template: '<li>Hello</li>'
    });

    var vue = new Vue({
        el: "#app",
    })
</script>

说明：

Vue.component()：注册组件
teng：自定义组件的名字
template：组件的模板

使用props属性传递参数

<div id="app">
    <teng v-for="item in items" v-bind:course="item"></teng>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 定义一个Vue组件component
    Vue.component("teng", {
        props: ['course'],
        template: '<li>{{course}}</li>'
    });

    var vue = new Vue({
        el: "#app",
        data: {
            items: ["Java", "Python", "Vue"]
        }
    });
</script>

说明：

v-for=“item in items”：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind:course=“item”：将遍历的item项绑定到组件中props定义名为course属性上；= 号左边的course为props定义的属性名，右边的为item in items 中遍历的item项的值