Vue学习笔记

最新推荐文章于 2021-03-23 11:24:11 发布

VIP文章木梓沐丶

最新推荐文章于 2021-03-23 11:24:11 发布

阅读量484

点赞数

本文链接：https://blog.csdn.net/weixin_43907522/article/details/112172124

版权

Vue

1.简介

Vue：前端体系，前后端分离

Vue 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月，开发者是尤雨溪（中国）。Vue 被设计为可以自底向上逐层应用，Vue 的核心库只关注视图层。

Vue 遵守一个原则：Soc（关注点分离原则）

1.1 前端三要素

HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设计网页的表现样式
JavaScript（行为）：是一种弱类型脚本语言，由浏览器解释运行，用于控制网页的行为。

CSS 层叠样式是一门标记语言，并不是编程语言。他的语法不够强大，不能嵌套书写，导致开发中需要书写很多重复的选择器。没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

所以实际开发中，并不会使用CSS，而是使用CSS预处理器

1.2 CSS预处理器

CSS预处理器定义了一种新的语言，基本思想是用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，开发者只需要用这种语言进行CSS编码工作，编码成正常的CSS文件来供项目使用即可。

常用的CSS预处理器：

SASS：基于Ruby，通过服务端处理，功能强大，解析效率高。
LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，但是解析效率也低于SASS，后端建议用LESS

1.3 JavaScript 框架

jQuery：简化了DOM操作，但是造成DOM操作太频繁，影响前端性能
Angular：由JAVA程序员开发，特点是将后台的MVC模式应用到了前端，并增加了模块化开发的理念
React：Facebook出品，高性能的JS前端框架，特点是提出了新概念（虚拟DOM）用于减少真实DOM操作，并在内存中模拟DOM操作，有效的提升了前端渲染效率，缺点是使用复杂
Vue：渐进式JavaScript框架，渐进式即逐步实现新特性，特点是综合了Angular（模块化）和ReactI（虚拟DOM）的优点
Axios：前端通信框架，因为Vue不处理通信，所以可以和这个搭配使用

1.4 单向绑定与双向绑定

单向绑定，数据模型和视图之间的绑定。即先写好HTML模板，把模板和数据整合到一起形成HTML代码，简单来说就是DOM操作html元素。

Vue.js 是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也随之发生变化，当视图发生变化的时候，数据也会跟着同步变化。

2.第一个Vue程序

在IDEA 中添加 Vue 插件

可以下载 Vue，也可以使用在线 CDN

在线CDN：

<!-- 开发环境版 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

编写第一个Vue程序，在html中编写如下代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue</title>
</head>
<!-- 1.导入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<!-- View层，变成了一个模板 -->
<div id="app">
    <!-- 相当于用${} 取值 -->
    {
  {message}}
</div>

<script>
    let vm = new Vue({
    
        <!-- el:element，元素，通过选择器绑定标签 -->
        el: "#app",
        <!-- Model层，数据 -->
        data: {
    
            message: "hello,Vue"
        }
    });
</script>
</body>
</html>

直接运行界面

在之前的运行中，出现了{ {message}} 问题，原因如下

一开始的CDN地址是错误的，后来在Vue.js官网中寻找了官方CDN地址使用
一开始 script 标签都卸载 body 上方，但是如果你要显示数据，那么你与相关标签所绑定的 Vue，则必须在标签下方（如上方代码中，el 使用选择器绑定了 div ，那么这一段 Vue 就必须在 id 为 app 的 div 下面）

在以前，我们修改前端的值要么通过后端数据绑定，要么通过修改innerHtml属性来进行修改，修改之后再刷新页面进行显示

而我们现在可以通过 Vue 对象，来直接修改，并且修改之后立即展示，不需要再刷新页面

在这里插入图片描述

Vue不改变DOM元素

简单使用Vue 的步骤

导入Vue
new Vue()
绑定一个元素
存放数据
从模板中取出数据

3.MVVM

MVVM（Model-View-ViewModel），是一种软件架构设计模式，由微软WPF和Silverlight的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。

MVVM源自经典的MVC模式，MVVM的核心是ViewModel层，负责转换 Model 中的数据对象来让数据变得更容易使用和管理

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

在这里插入图片描述

为什么要使用MVVM：

MVVM 模式和 MVC 模式一样，主要目的是分离视图和模型，有以下好处

低耦合：视图可以独立于Model 进行变化和修改，一个ViewModel 可以绑定到不同的 View 上，当 View 发生变化的时候， Model 可以不变；当 Model 发生变化的时候，View 可以不变
可复用：可以把一些视图逻辑放在一个ViewModel 里面，让很多View 重复使用这段逻辑
独立开发：开发人员可以更专注于业务逻辑和数据的开发，设计人员可以专注于页面设计
可测试：可以用View Model 来测试前端

MVVM的组成部分：

在这里插入图片描述

ViewModel 是由前端开发人员组织生成和维护的视图数据层，ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而Model 层的数据模型只包含状态

页面中的哪一部分用来展示什么内容，这些都属于视图状态（展示）
页面中的那一部分点击或者滚动等等，会产生什么事件，这些属于视图行为（交互）

由于ViewModel 封装了视图状态和行为，我们就不用再去频繁的操作DOM元素了，只需要处理和维护ViewModel ，更新数据视图就可以得到相应的结果，实现事件驱动编程

View层展示的是ViewModel 中的数据，而ViewModel 负责与Model 层交互，这就完全解耦了View 层和Model 层，这个解耦是前后端分离方案实施的重要步骤

Vue 就是 MVVM 的一个实现者，他的核心就是实现了DOM监听与数据绑定。

4.Vue基本语法

我们可以使用 v-bind 来绑定元素特性

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue</title>
</head>
<!-- 1.导入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<h1>Vue语法</h1>
<!-- View层，变成了一个模板 -->
<div id="app">
    <span v-bind:title="message">
        测试鼠标悬停显示 message
    </span>
</div>

<script>
    let vm = new Vue({
        <!-- el:element，元素，通过选择器绑定标签 -->
        el: "#app",
        <!-- Model层，数据 -->
        data: {
            message: "hello,Vue"
        }
    });

</script>
</body>
</html>

在前端运行之后，将鼠标悬停在 span 标签上，就会显示 message 的内容

在 vue 中，前缀是 v- 的语句都被称为指令，以表示他们是 vue 提供的特殊特性，他们会在渲染的 DOM 上应用特殊的响应式行为。上述代码中的指令意思表示：将这个元素节点的 title 特性和 vue 实例的 message 属性保持一致

4.1 v-if,v-else

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            ok: true
        }
    });

</script>

这段代码表示， v-if 判断他的值为 ture 或者 false，即判断 ok 的值为 true 还是 false，如果为 true ，则显示Yes，否则显示No。由于我们定义的是 true，所以会显示Yes。在下方将 ok 的值改为 false，则显示No

我们也可以改成表达式

let vm = new Vue({
el: "#app",
data: {
ok: 1+1>3

}
});

很显然 1+1 < 3 ，所以会显示No

假设你有一组标签想要同步进行展示或者隐藏，可以使用一个 < template > 标签来进行条件渲染分组

<div id="app">
    <template v-if="type">
        <h1>h1为真显示</h1>
        <div>div为真显示</div>
        <p>p为真显示</p>
        <span>span为真显示</span>
    </template>
    <div>分组完毕</div>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            type: true
        }
    });

</script>

这段代码表示 type 为 true ，则 template 标签中的内容进行展示，最终的渲染结果不包含 template

在vue 中，也有 if-elseif 的格式

<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-if="type==='D'">D</h1>
    <h1 v-else>E</h1>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            type: 'C'
        }
    });
</script>

在 if 中进行判断，如果 type 和字符相等，则输出

前端中的 == 和 ===

三个 =
1、如果类型不同，就[不相等]
2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）
3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。
4、如果两个值都是true，或者都是false，那么[相等]。
5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。
6、如果两个值都是null，或者都是undefined，那么[相等]。

两个 =
1、如果两个值类型相同，进行 === 比较。
2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：
3、如果一个是null、一个是undefined，那么[相等]。
4、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。
5、如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。
6、如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻烦，我也不大懂）
e、任何其他组合，都[不相等]。

4.2 v-for

<div id="app">
    <!-- items 和 vue 中的 items 绑定 -->
    <!-- item 表示从 items 中取出的每一项，可以随意命名 -->
    <li v-for="item in items">
        <!-- 遍历出来的每一项的 message 属性 -->
        {
  {item.message}}
    </li>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            items: [
                {message: 'Java'},
                {message: 'Linux'},
                {message: 'C++'},
                {message: 'Python'},
            ]
        }
    });

</script>

for 循环遍历数组，中括号表示数组，大括号表示对象

v-for 还有第二个可选参数，index，即当前项的索引

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

输出就变成了 Java-0 这样的形式

在 v-for 中使用对象

<div id="app">
    <li v-for="info in person">
        {
  {info}}
    </li>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            person:{
                name: '蜡笔小新',
                address: '春日部',
                age: 5
            }
        }
    });

</script>

注意对象用大括号

也可以添加可选参数 name 和 index，name 表示键名

<div id="app">
    <li v-for="(info,name) in person">
        {
  {name}}:{
  {info}}
    </li>
</div>

这样输出就变成了

name：蜡笔小新
address：春日部
age：5

5.vue绑定事件

使用 v-on 指令监听DOM 事件，事件肯定有方法

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<h1>Vue循环</h1>
<!-- View层，变成了一个模板 -->
<div id="app">
    <!-- click 表示 onclick 事件 -->
    <button v-on:click="sayHi">click me say hi</button>
    <button v-on:click="sayBye">click me say goodBye</button>
    <button v-on:dblclick="saySomething">double click</button>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data:{
            message:"Hello,Vue",
            bye:"ByeBye"
        },
        methods:{
            // 方法必须定义在 vue 的 methods 对象中，注意是methods
            // 也是键值对形式，注意值是一个函数
            sayHi:function () {
                alert(this.message);
            },
            sayBye:function () {
                alert(this.bye);
            },
            saySomething:function () {
                alert("double click to show this message")
            }
        }
    });

</script>
</body>
</html>

需要注意的点就是 vue 中的方法是 methods ，不能写成 method

v-on: 冒号后面跟的是事件名，比如单击，双击等࿰

最低0.47元/天解锁文章

木梓沐丶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记

Vue1.简介Vue：前端体系，前后端分离Vue 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月，开发者是尤雨溪（中国）。Vue 被设计为可以自底向上逐层应用，Vue 的核心库只关注视图层。Vue 遵守一个原则：Soc（关注点分离原则）1.1 前端三要素HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容CSS（表现）：层叠样式表（Cascading Style Sheets），设计网页的表现样式JavaScrip
复制链接

扫一扫