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

发布于：2022-12-28 ⋅ 阅读:(420) ⋅ 点赞:(0)

感兴趣的朋友可以去我的语雀平台进行查看更多的知识。
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层通过接口请求进行数据交互

image-20220904234754234

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组成部分

image-20220904234919113

  1. View

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

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

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

  2. Model

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

    约定统一的接口规则

  3. 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}} -----> 实现数据绑定功能

运行效果

image-20220904235952223

测试双向绑定

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

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

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

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

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

image-20220905000200349

image-20220905000209619

理解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>

测试效果

image-20220905000727701

说明：

  • 看到的 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>

测试结果

image-20220905001531710

测试

  1. 在浏览器上运行，打开控制台

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

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

image-20220905001619082

测试代码二

<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>

测试结果

image-20220905001950454

测试

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

image-20220905002052015

注：===三个等号在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>

结果

image-20220905002442267

格式说明

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

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

测试

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

image-20220905002550489

2.4 v-on

  1. 可以用 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>

当我们点击后

image-20220905002938868

  1. 然而许多事件处理逻辑会更为复杂，所以直接把 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>

结果

image-20220905003343942

image-20220905003356256

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>

image-20220905200922375

多行文本

<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>

image-20220905201212894

复选框

  • 单个复选框绑定到布尔值
<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>

image-20220905201556810

image-20220905201604052

  • 多个复选框，绑定到同一个数组
<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>

image-20220905201930544

单选按钮

<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>

image-20220905202204056

选择框

<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>

image-20220905202344748

3.2 组件

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

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

image-20220905202539846

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

自定义第一个组件

<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>

image-20220905203828221

说明：

  • 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项的值

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布