Vue学习笔记

最新推荐文章于 2024-05-30 13:09:09 发布
最新推荐文章于 2024-05-30 13:09:09 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： 小白学习笔记 文章标签： vue javascript
本文链接：https://blog.csdn.net/weixin_43370282/article/details/124291477
版权

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

一、V前端核心分析

1、Vue概述

Vue (读音 /vjuː/，类似于 view)是一套用于构建用户界面的渐进式JavaScript框架(渐进式意味着你可以将Vue作为你应用的一部分嵌套其中)，发布于2014年2月。与其他大型框架不同，Vue被设计为可以自底向上逐层应用。Vue的核心是只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue-resource：通信，vuex：状态管理)或既有项目整合。

Vue官网：https://v3.cn.vuejs.org/

  • SoC：关注点分离原则
    • Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
  • 网络通信：axios
  • 页面跳转：vue-router
  • 状态管理：vuex
  • Vue-UI：ICE、ElementUI
  • 集大成者：MVVM+虚拟DOM
  • 计算属性：Vue特色(利用了虚拟DOM)

2、Vue入门使用

第一个Vue

和许多JavaScript应用一样，我们从网页中需要展示的数据开始，使用VUE的起步非常简单，我们引入VUE库，创建一个VUE实例，然后通过应用的ID嵌入到我们的根元素，”EL”是元素(ELEMENT)的缩写，我们还有将数据放入一个对象，并将X修改为一个表达式，用双大括号括起来。

除了字符串，VUE对其它数据的类型也是如此，我们把这个简单商品换成一个商品数组试试看，然后我们将

改为一个无序列表，在为数组中的每个商品创建一个列表项，使用VUE的v-for指令，让每个商品拥有各自的列表项，就如：

第一个Vue1

但这还不够有说服力，现在我们从空列表开始，然后从一个实际的API获取我们的商品信息，这个API是从某个数据库中获取来的，当应用被创建时，我们会从这个API获取最新的商品信息，这就是你要从这里获取的全部。我们获取商品列表，并将它们更新到数据中，如你所见：

第一个Vue2

各项列表展示了该API返回的对象。

3、前端三要素

HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据。

3.1、结构层（HTML）

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容。

  • HTML 不是一种编程语言，而是一种标记语言。
  • 标记语言是一套标记标签 (markup tag)。
  • HTML 使用标记标签来描述网页。
  • HTML文档也叫做 web 页面。
3.2、表现层（CSS）

CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式。

CSS层叠样式表是一门标记语言,并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：

  • 语法不够强大，比如无法嵌套书写，导致模块化开发中需要写很多重复的选择器；
  • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；

这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为[CSS预处理器]的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。（例如页面在不同的时候有不同的需求，淘宝在双11和618的样式就会不一样）

3.2.1、CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言,进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。

常用的CSS预处理器：
  • SASS:基于Ruby,通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
    • Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
  • LESS:基于NodeJS,通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS,但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。
    • Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。Less是一门动态CSS语言，使得CSS样式更加灵活地作用于Html标签。还有一个重要的作用就是提高样式代码的可维护性。
    • 总的来说，Less赋予了CSS逻辑运算的能力。
3.3、行为层（JavaScript）

JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为。

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

Native原生JS开发

原生JS开发，也就是让我们按照[ECMAScript] 标准的开发方式，简称是ES，特点是所有浏览器都支持。截止到当前博客发布时间，ES 标准已发布如下版本：

  • ES3

  • ES4 (内部,未征式发布)

  • ES5 (全浏览器支持)

  • ES6 (常用，当前主流版本: webpack打包成为ES5支持! )

  • ES7

  • ES8

  • ES9 (草案阶段)

区别就是逐步增加新特性。

TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯海尔斯伯格(C#、Delphi、TypeScript 之父; .NET 创立者)主导。

该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持TypeScript语法，需要编译后(编译成JS)才能被浏览器正确执行。

4、JavaScript框架

  • jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6、7、8;
  • Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理(如： 1代 -> 2代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6)；
  • React: Facebook出品，一款高性能的JS前端框架；特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门[JSX] 语言；
  • Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点；
  • Axios ：前端通信框架；因为Vue 的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery提供的AJAX通信功能。

前端三大框架：Angular、React、Vue。

二、前端发展史

1、UI框架

  • Ant-Design：阿里巴巴出品，基于React的UI框架
  • ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
  • BootStrap：Teitter推出的一个用于前端开发的开源工具包
  • AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

2、JavaScript构建工具

  • Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。
  • WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载。

注：以上知识点已将WebApp开发所需技能全部梳理完毕。

扩展

MVVM

image-20220420100949771

  • 异步通信为主

  • Model、View、ViewModel

  • 核心为ViewModel：

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

MVVM-1

MVVM-2

MVVM工作原理

MVVM工作原理

三、入门

参考笔记：https://gitee.com/wuyuyang_bklyyds/wustudy/tree/master/%E7%AC%94%E8%AE%B0

学前须知：

HTML

HTML(HyperText MarkUp Language)超文本标记语言，是用来制作网页的标记语言。通过使用标记来描述文档结构和表现形式的一种语言，不需要编译，直接由浏览器进行解析执行,然后把结果显示在网页上。它是网页构成的基础,你见到的所有网页都离不开HTML。

CSS

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，是一种样式表 (stylesheet) 语言，(CSS语言是一种标记语言，因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言))，用于控制Web页面的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

JavaScript

JavaScript 是世界上最流行的编程语言，哈哈，Javascript 之所以流行，因为在浏览器里这是唯一选择（这个倒是）。JavaScript 是一种轻量级的浏览器端解释性脚本语言(JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象)，可由所有的现代浏览器解释执行。JavaScript广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为页面添加交互行为，为用户提供更流畅美观的浏览效果。通常JavaScript脚本可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

Ajax

AJAX（Asynchronous Javascript And XML） = 异步 JavaScript 和 XML。是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

使用ajax将后台传入的数据展示在页面时，需要使用传统的js方法：text、innerHtml、append等，比较麻烦，所以使用Vue框架。

示例前端代码：

<script>
    $(function() {
      
        $.ajax({
      
            url: '/ajaxTestDemo/',     //请求到后台的路由
            type: 'get',     //请求方式
            //访问成功时执行的函数
            //后台传过来的数据传给了参数result
            success: function(result){
         
                alert('success');
                console.log(result);
                console.log(result.status);    //数据
            },
            //访问失败时执行的函数
            error: function (result) {
      
                alert('error');
            }
        })
    })
</script>

AJAX 如何工作

Ajax如何工作

Ajax实现前后端分离

开发工具：

VSCode

VSCode是一款免费开源的现代化轻量级代码编辑器。

vue项目用官方推荐的HBuilderX。但是，现在市面的前端都在用VSCode，所有我Vue学习就采用VSCode。

下载

但是在下载VSCode这个工具时，由于网络问题总是下载中断或者失败，究其原因大概是因为不是国内的服务器！

首先在官网找到需要下载的文件，点击下载。

image-20211112184417071

它会跳转至一个新页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LybZhd72-1650422248679)(https://gitee.com/AuroraLeVi/markdown/raw/master/img/image-20211112184549424.png)]

在浏览器或者下载软件中就可以看到一个下载地址了，将其复制下来。

然后/stable地址之前的地址换为如下内容：

vscode.cdn.azure.cn <--------就是左边这个

比如：更新后的地址为：http://vscode.cdn.azure.cn/stable/78a4c91400152c0f27ba4d363eb56d2835f9903a/VSCodeUserSetup-x64-1.52.1.exe

这个就是国内的镜像了点开后，你会发现速度直接起飞！

安装

下载完成单击运行，然后我们开始进行安装：一直"下一步"即可，记住要选择"添加到PATH中"(添加到系统环境变量中，如果没有勾选这个选项，则需要手动添加)。

启动

安装结束后，我们可以启动软件查看是否安装成功：

image-20211112185613146

这样一步一步的操作下来，我们的VSCode软件的下载和安装就基本上完成了！

Vscode界面介绍（主要分为5个区域，分别是活动栏，侧边栏，编辑栏，面板栏，状态栏）

img

①：活动栏从上到下依次为，打开侧边栏，搜索，使用git，debug，使用插件。

②：侧边栏，新建项目文件和文件夹。

③：编辑栏，编写代码的区域。

④：面板栏，从左到右依次为，问题，输出，调试栏，终端（terminal），最重要的是terminal，用来输入相关命令

⑤：状态栏，点击 该区域可以调出面板栏

⑥：需要注意的为下图红框所示，分别表示鼠标光标所在位置和tab缩进字符，这里为缩进4个字符

新建文件和文件夹

  • 新建文件：Ctrl+N新建文件并修改后缀即可（后缀根据所需文件来，比如.html，.css，.js等）

  • 新建文件夹

    • ①：首先根据需要指定一个路径（这里路径以桌面为例），然后新建一个文件夹（这里新建的文件夹为demo1）

    • ②：鼠标点击侧边栏第二个选项

    • ③：此时会提示你没有可以打开的文件夹，点击Open Folder按钮导入桌面新建的文件夹demo1

    • ④：把文件夹导入后发现刚刚新建文件夹名字是小写的，现在变大写了，这个不影响，不用太在意
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDXvMaxe-1650422248694)(D:\Typera_Image\image-20211112202956985.png)]
      （上图红色框图标从左到右为，新建文件 / 新建文件夹 / 刷新 / 折叠文件）
      注：新建文件一定要修改后缀，否则默认都是text文本文件。

内部插件-Live Server：为实时加载功能的小型服务器，在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

步骤：

  • Vue基础

  • 本地引用

  • 网络应用

  • 综合应用

Vue基础

Vue简介

1、JavaScript框架

2、简化DOM操作（Vue有特殊语法，不用人为写代码）

3、响应式数据驱动

第一个Vue应用

入门一个框架或者库，没有比官方文档更好的方式了！Vue官方文档

Vue官网推荐学习视频带您了解其核心概念和一个示例工程。还有一个讲解视频

① 导入 vue.js 的 script 脚本文件：

<!-- 1. 导入Vue.js的script脚本 -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

② 在页面中声明一个将要被 vue 所控制的 DOM 区域：

<!-- 2. 在页面中声明将被Vue所控制的DOM区域 -->
<!-- 将来new的Vue实例，会控制这个元素中的内容 -->
<!-- Vue实例所控制的这个元素区域，就是我们MVVM中的V -->
<div id="app">
    {
  { message }}
</div>

③ 创建 vm 实例对象（Vue 实例对象）：el指定根element(选择器)； data初始化数据(页面可以访问)。使用简洁的模板语法把数据渲染到页面上：

<script>
    
    // 3. 创建一个vm实例对象(Vue实例对象)
    // 当我们导入vue包后，在浏览器的内存中，就多了一个Vue构造函数
    // 注意：我们new出来的这个vm对象，就是我们MVVM中VM调度者
    var app = new Vue({
      // data属性中，存放的是el中要用到的数据
        // 3.1 指定当前vm实例对象要控制页面的哪一个区域
        el: "#app", // 表示，当前我们new的这个Vue实例，要控制页面上的哪一个区域
        // 3.2 指定Model数据源
        // 这里的data就是我们MVVM中的M，专门用来保存每个页面的数据的
        data: {
     
            message: "您好！世界!" // 通过Vue提供的指令，很方便的就把数据渲染到页面上，程序员不再手动操作DOM元素了【前端Vue之类的框架，不提倡我们手动去操作DOM了！】
        }
    })
</script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

总共代码：

<!-- 2. 在页面中声明将被Vue所控制的DOM区域 -->
<!-- 将来new的Vue实例，会控制这个元素中的内容 -->
<!-- Vue实例所控制的这个元素区域，就是我们MVVM中的V -->
<div id="app">
    {
  { message }}
</div>

<!-- 1. 导入Vue.js的script脚本 -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    // 3. 创建一个vm实例对象(Vue实例对象)
    // 当我们导入vue包后，在浏览器的内存中，就多了一个Vue构造函数
    // 注意：我们new出来的这个vm对象，就是我们MVVM中VM调度者
    var app = new Vue({
      // data属性中，存放的是el中要用到的数据
        // 3.1 指定当前vm实例对象要控制页面的哪一个区域
        el: "#app", // 表示，当前我们new的这个Vue实例，要控制页面上的哪一个区域
        // 3.2 指定Model数据源
        // 这里的data就是我们MVVM中的M，专门用来保存每个页面的数据的
        data: {
     
            message: "您好！世界!" // 通过Vue提供的指令，很方便的就把数据渲染到页面上，程序员不再手动操作DOM元素了【前端Vue之类的框架，不提倡我们手动去操作DOM了！】
        }
    })
</script>

image-20211112225156203

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台，并修改 app.message 的值，你将看到上例相应地更新。

基本代码与 MVVM 的对应关系：

image-20220420100554198

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

el：挂载点

el：用来设置Vue实例挂载（管理）的元素。

1、Vue实例的作用范围是什么？

在vue外部是没有用的。在el命中的元素内部是有作用的。

作用范围是el命中的元素及其内部的后代元素，外部的无效。

{
  { message }}
<div id="app">
    {
  { message }}
    <span>
        {
  { message }}
        <!-- p标签是块级元素，会独占一行,默认情况下p标签会自动换行的 -->
        <p>
            {
  { message }}
        </p>
    </span>
</div>
{
  { message }}

image-20211112225556197

2、是否可以使用其他的选择器？

可以使用其他的选择器（class，id，dom等），但是建议使用id选择器。

选择器的优先级: id选择器 > class类选择器 > 标签选择器 。

id选择器：只能在页面中使用一次，同一个id属性在同一个页面中只能使用一次。

class类选择器：最常用的选择器，样式一样的情况可以公用一个类名。

标签选择器：使用HTML中的标签作为相应的选择器的名称，直接设置页面中的标签样式。

<script>
    var app = new Vue({
     
        // Vue的id 选择器：#foo
        el: "#app",
        // Vue的类选择器：.foo
        //el: ".app",
        // Vue的标签选择器：foo
        //el: "div",
        data: {
     
            message: "中国"
        }
    })
</script>

3、是否可以设置其他的dom元素呢？

mount：挂载。

可以使用其他的双标签。但不可以使用html和body，建议挂载在div上。

<script>
    var app = new Vue({
     
        // Vue 的挂载容器不能是 html 和 body，解决办法， 用 div 将代码包起来！
        el: "#body",
        data: {
     
            message: "中国"
        }
    })
</script>
el有2种写法

(1) new Vue时候配置el属性。

<!-- new Vue时候配置el属性 -->
<div id="el1">
    {
  { msg1 }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm1 = new Vue({
     
        el: "#el1",
        data: {
     
            msg1: "new Vue时候配置el属性"
        }
    })
</script>

(2) 先创建Vue实例，随后再通过vm.$mount(‘#选择’)指定el的值。

<!-- 先创建Vue实例，随后再通过vm.$mount('#选择')指定el的值 -->
<div id="el2">
    {
  { msg2 }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm2 = new Vue({
     
        data: {
     
            msg2: "先创建Vue实例，随后再通过vm.$mount('选择器')指定el的值"
        }
    })
    vm2.$mount('#el2')
</script>

image-20211112232213697

data 数据对象

Vue中用到的数据定义在data中。
data中可以写复杂类型的数据 数组、对象。
渲染复杂数据类型时，遵守js语法。

<div id="app">
    {
  { message }}
    <!-- 渲染复杂数据类型时，遵守js语法 -->
    <h2>{
  { school.name }} {
  { school.moblie }}</h2>
    <ul>
        <li>{
  { campus[0] }}</li>
        <li>{
  { campus[1] }}</li>
        <li>{
  { campus[2] }}</li>
        <li>{
  { campus[3] }}</li>
    </ul>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
     
        el: "#app",
        // Vue中用到的数据定义在data中
        data: {
     
            // data中可以写复杂类型的数据 数组、对象
            message: "Hello World!",
            school: {
     
                name: "莱维",
                moblie: "163-997-9090"
            },
            campus: ["拉普拉斯校区","德雷克校区","东莱校区","圣堂校区"]
        }
    })
</script>
data有2种写法

(1) 对象式

<!-- 对象式 -->
<div id="app1">
    {
  { message1 }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm1 = new Vue({
     
        el: "#app1",
        data: {
     
            message1: "对象式"
        }
    })
</script>

(2) 函数式

<!-- 函数式 -->
<div id="app2">
    {
  { message2 }}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm2 = new Vue({
     
        el: "#app2",
        data(){
     
            console.log('@@@',this) //此处的this是Vue实例对象
            return{
     
                message2: "函数式"
            }
        }
    })
</script>

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错！

一个重要的原则：由Vue管理的函数，一定不要写箭头函数！一旦写了箭头函数，this就不再是Vue实例了。

本地应用

扩展

v-cloak：解决闪烁问题，用插值表达式，不会替换里面原来的内容。

使用 v-cloak 指令来解决屏幕闪动的问题。

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令了。

<div id="app">
    <!-- v-cloak：解决闪烁问题，用插值表达式，不会替换里面原来的内容 -->
    <!-- 使用v-cloak能够解决插值表达式闪烁的问题 -->
    <p v-cloak>++++++++ {
  { msg }} --------</p>
    <!-- 默认v-text是没有闪烁问题的 -->
    <!-- v-text会覆盖元素中原本的内容，但是差值表达式只会替换自己的这个占位符，不会把整个元素内容清空！ -->
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
     
        el: "#app",
        data: {
     
            msg: "v-cloak解决插值表达式闪烁的问题"
        }
    })
</script>

使用v-cloak不会出现闪烁问题

v-pre
  • 显示原始信息跳过编译过程。
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染。
<body>
    <!-- 
显示原始信息跳过编译过程。
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染。
-->
    <span v-pre>{
  { this will not be compiled }}</span>
    <!--  显示的是{
   { this will not be compiled }}  -->
    <span v-pre>{
  {msg}}</span>
    <!--   即使data里面定义了msg，这里仍然是显示的{
   {msg}}  -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
     
            el: '#app',
            data: {
     
                msg: 'Hello Vue.js'
            }
        });
    </script>

image-20211113203543701

v-once

v-once：执行一次性的插值【当数据改变时，插值处的内容不会继续更新】。一般用于静态内容展示。

v-once 指令除了用于展示静态内容，也可能在需要进一步优化性能时用到它。

<div id="app">
    <!-- 即使data里面定义了 msg 后期我们修改了，仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
    <!--v-once：数据只绑定一次，不进行更新-->
    <span v-once>{
  { msg }}</span>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
     
        el: '#app',
        data: {
     
            msg: 'Hello Vue.js'
        }
    });
    app.msg = "Hello Vue!";
</script>

这里我遇到了问题，就是<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">引入vue脚本爆红！报错：The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.没搞明白！结果多次删除新建后，莫名其妙成功了！！！(无语)

原来是html文件的命名问题，.html前不能是英文！！！写个中文就行！

image-20211114202355653

image-20211113205933024

使用了 app.msg重新设置了内容，但并没有生效，因为我们使用了 v-once 指令。

image-20211113000537231

指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

内容绑定，事件绑定

v-text指令 替换文本

设置标签的文本值(textContent)。

v-text指令 替换文本

<div id="app">
    <h2 v-text="message+'-'">共产党</h2>
    <h2 v-text="info+':'">军事</h2>
    <h2>{
  { message + '-' }}共产党</h2>
    <h3>{
  { 1+2 }}</h3>
    <span>1的类型：{
  { typeof 1 }}</span>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
     
        el: "#app",
        data:{
     
            message: "中国",
            info: "秦朝"
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnaGtsLW-1650422248747)(https://gitee.com/AuroraLeVi/markdown/raw/master/img/image-20211113150545061.png)]

v-text指令的作用是：设置标签的内容(textContent)。

默认写法会替换全部内容，使用插值表达式{ {}}可以替换指定内容。

注意：v-text有个缺点，就是不管你h2标签里面原来的值是什么，都会被替换成message的值，所以想要不被替换的话就用另一种方法：插值表达式{ {}}

插值表达式的写法{ { message }}，把它写在标签内部就就可以了，它只会把大括号内的message属性值替换。

v-text指令内部支持写表达式，插值表达式也可以。

v-text 指令的缺点：会覆盖元素内部原有的内容！

{ { }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！

比如可以对它进行字符串的拼接。

v-html指令 解析替换v-html文本

设置标签的innerHTML。

v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！
注意：v-html有安全性问题！！！！
(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2)一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-html指令 解析替换v-html文本

<!-- 2.html结构 -->
<div id="app">
    <p v-html="content"></p>
    <p v-text="content"></p>
</div>
<!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // 3.创建Vue实例
    var app = new Vue({
     
        el: "#app",
        data:{
     
            // content: "张会林学Java"
            content: "<a href='https://scrimba.com/learn/vuedocs'>张会林学Vue</a>"
        }
    })
</script>

image-20211113143242470

v-html指令的作用是：设置元素的innerHTML。
内容中有html结构会被解析为标签。
v-text无论内容是什么，它只会解析为文本。
解析文本使用v-text。需要解析html结构使用v-html。

v-on指令基础 为元素绑定事件

为元素绑定事件。

v-on: 简写是 @ 辅助程序员为 DOM 元素绑定事件监听，原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup…

事件种类

v-on指令 为元素绑定事件

<!-- 2. 在页面中声明将被Vue所控制的DOM区域 -->
<!-- Vue实例所控制的这个元素区域，就是我们MVVM中的V -->
<div id="app">
    <h3>{
  { msg }}</h3>
    <!-- Vue执行方法的 标准 写法 -->
    <input type="button" value="v-on标准" v-on:click="doIt">
    <!-- Vue执行方法的 简写 写法 -->
    <input type="button" value="v-on简写" @click="doIt">
    <input type="button" value="双击事件" @dblclick="doIt">
    <h2 @click="changeFood">{
  { food }}</h2>
</div>
<!-- 1. 导入Vue.js的script脚本 -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
最低0.47元/天 解锁文章
资本雅威
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue 学习笔记
weixin_43971312的博客
05-22 2196
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
Vue 学习总结笔记 (一)
2401_84094979的博客
05-06 618
9. 数据代理9.1 数据代理 例子。
vue学习笔记
weixin_42765975的博客
09-21 878
/1.想要vue工作必须new一个vue对象出来，容器依旧符合html模板规范，只是加入了一些vue的语法例如双括号{{}},//5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。5.{{}}是插值语法，使用在标签体内容读取插值，标签属性值得用指令语法v-bind:表示会把属性的值当做js语句来执行。//7.指令语法包括v-bind:,v-if:等等，他可以用于解析标签体内容，标签属性，标签事件等。
Vue学习笔记总结
个人学习博客，不足之处，还望不吝赐教！
10-21 710
vue、vue学习教程、vue教程、vue3
VUE学习笔记
最新发布
weixin_51660483的博客
05-30 1575
什么是VUE？vue是一个用于构建用户界面的渐进式框架vue是一个基于数据渲染出用户能够看到的页面渐进式框架。
vue学习笔记（超详细）
热门推荐
fmk1023的博客
12-18 4万+
文章目录一. Vue基础认识Vue.jsVue安装方式Vue的MVVM二. Vue基础语法生命周期模板语法创建Vue, options可以放什么语法综合v-onv-for遍历数组v-model表单绑定v-model结合radio类型使用v-model结合checkbox类型使用v-model结合select类型使用值绑定修饰符检测数组更新计算属性 computed计算属性setter和gettercomputed / methods区别fulters过滤器三. 组件化开发组件的基本介绍注册组件的基本步骤全局
Vue学习笔记(黑马前端)
JayChouyyds589的博客
10-02 3567
黑马前端Vue学习笔记(未学完)
vue学习笔记（vue核心知识）
maohe的博客
01-22 2200
记录Vue学习过程笔记和知识点（更新中）。
Vue学习笔记04
weixin_52521356的博客
05-06 567
Vue学习笔记04 什么是vue-cli ​ vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板； ​ 主要功能： 统一的目录结构 本地调试 热部署 单元测试 集成打包上线 需要的环境 Node.js：Download | Node.js (nodejs.org) 检查node.js是否安装完成 node -v npm-v npm install -g安装镜像 这里的安装教程直接贴一个视频的链接吧。 [vue脚手架安装] npm run dev 运行第一个自己的vue项目
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记 note
05-06
学习笔记
vue学习笔记vue学习笔记vue学习笔记
12-02
vue学习笔记vue学习笔记vue学习笔记
vue学习笔记1
08-03
在开始学习Vue时，我们首先会遇到`<div v-cloak>{{msg}}</div>`这样的代码。`v-cloak`是一个特殊的指令，用于解决页面加载时，Vue模板在数据未完全渲染前显示原始HTML的问题。当Vue实例正在初始化时，`v-cloak`指令...
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值