前端入门(二)Vue2到Vue3

文章目录

  • Vue简介
    • Vue的特点
    • Hello, Vue
  • Vue基本语法
    • 模板语法
    • 数据绑定(v-bind、v-model)
      • el与data的两种写法
    • 数据代理实现原理
      • Object.defineProperty()
      • 数据代理
    • 事件处理(v-on:click / @click)
      • 事件修饰符
      • 键盘事件(略)
    • 计算属性与监视(computed、watch)
      • 计算属性-computed
      • 监视属性-watch
      • 深度监视-deep
      • computed和watch的区别
  • 样式渲染
    • class与style绑定
    • 条件渲染

Vue简介

在这里插入图片描述

Vue的特点

在这里插入图片描述

在这里插入图片描述

3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。

在这里插入图片描述

Hello, Vue

1、Vue实例与HTML容器是一一对应的,使用el属性让容器与Vue实例关联起来。
2、Vue可以使用插值语法(双层花括号)解析Vue的data属性,插值语法还可以解析其他的js表达式(所谓js表达式,就是可以产生一个值的js语句,一般为元素赋值语句的等号右边部分或者函数的返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>初始Vue</title>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 开发环境, 关闭vue对于生产环境的提示信息
    </script>

    <div id = "r1">
        <h1>
            {{msg}}  // vue的插值语法
        </h1>
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
                msg: "hello vue"
            }
        });
    </script>
</body>

</html>

Vue基本语法

模板语法

Vue模板语法有2大类:
1、插值语法:

  • 功能:用于解析标签体(开闭标签之间部分)内容。
  • 写法:{{****}} ****是js表达式,且可以读取vue实例中data的所有属性。

2、指令语法:

  • 功能:用于解析标签(包括标签属性,标签体内容,绑定事件……)
  • 举例:v-bind:href = "***" 或简写为 ::href="***",***同样要写js表达式,且可以直接读取到data中的属性。
  • 注:vue中除了v-bind还有很多v-???的属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>初始Vue</title>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 开发环境, 关闭vue对于生产环境的提示信息
    </script>

    <div id = "root">
        <h1>
        差值语法
            <h3>{{name}}</h3>  // vue的插值语法
        </h1>
        <h1>
			指令语法
			<a v-bind:href="school.url.toUpperCase()">点我去{{school.url}}学习</a>
		</h1>
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#root",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
            	name: 'jack'
                school:{
					name:'ULCA',
					url:'https://www.ulca.com'
				}
            }
        });
    </script>
</body>
</html>

数据绑定(v-bind、v-model)

Vue中有2中数据绑定方式:

  • 1、单向绑定(v-bind):数据只能从data流向页面
  • 2、双向绑定(v-model):数据不仅能从data流向页面,也可以从页面流向data。
    • 双向绑定一般应用在表单元素上(如:input、select等,这些元素都有value属性,v-model绑定的正是这个value属性)
    • v-model:value 可以简写为v-model,因为v-model默认收集的就是value值。

el与data的两种写法

el:

  • 使用el属性绑定容器
  • 使用代码.$mount('#root')绑定

下边演示了一个案例,使用一个定时器,在1秒后再建立vue实例与html容器之间的关联。
在这里插入图片描述
data:

  • 使用data属性,对象式
  • 使用函数返回值,函数式。当学习组件时,data必须使用函数式,否则会报错。
  • 一个重要的原则,由Vue管理的函数,不可以写箭头式,一旦写了箭头式,this就不再是Vue实例了。

在这里插入图片描述

数据代理实现原理

Object.defineProperty()

Object.defineProperty()字面意思就是可以为对象设置属性,且在设置属性时,可以控制属性的一些高级选项:

  • enumerable:是否可以枚举
  • writable:是否可修改
  • configurable:是否可删除
    在这里插入图片描述
    此外可以设置属性的get()和set()方法。

数据代理

  1. Vue中通过VM对象来代理data对象属性中的操作(读/写)
  2. 数据代理可以更加方便的操作data中的数据
  3. 实现原理:通过Object.defineProperty()把data对象中所有属性添加到vm上,为每一个属性指定getter和setter方法,在这些方法中去读/写data中对于的属性。
    在这里插入图片描述

事件处理(v-on:click / @click)

  1. 使用v-on:×××@×××绑定事件,其中××× 是事件名。
  2. 事件的回调需要配置在method对象中,最终会在vm上。
  3. method中配置的函数都是被Vue管理的函数,this指向的就是组件实例对象,最好不要用箭头函数(lambda)表示。
  4. @click="demo" 和 @click="deme($event)"效果是一致的,但是后者可以给函数传参数。

事件修饰符

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用)
  2. stop:阻止事件冒泡(即事件不会向外层传播,常用)
  3. once:事件只触发一次(常用)
  4. capture:使用事件的捕获模式(即外层容器的事件也会被捕获)
  5. self:只有event.target是当前操作的元素才触发事件
  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕。

键盘事件(略)

计算属性与监视(computed、watch)

计算属性-computed

计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!

计算在虚拟dom中进行,计算结果在缓存中,不会随时间变化,当计算属性中的参数有更新时,虚拟dom清空,重新计算,这时计算属性才会发生变化。
注意计算属性是vue component的属性,可以用方法定义,但不可用作方法调用。

计算属性的优势:有缓存,多次调用,只计算一次。仅当计算所依赖的数据变化后才会重新修改。

computed: {
		fullname:{
			get(){
				return this.firstName + '-' + this.lastName;
				}
			}
        }

计算属性:也可以使用函数返回值设置,但是methods,computed 方法名不能重名,重名字后,只会调用methods的方法。

computed: {
            //计算属性:methods,computed 方法名不能重名,重名字后,只会调用methods的方法
            fullname: function () {
				return this.firstName + '-' + this.lastName;
            }
            // 或者函数也可直接这样写:
            fullname() {
				return this.firstName + '-' + this.lastName;
            }
        }

监视属性-watch

监视属性有两种配置方式:

  • Vue实例中使用watch
  • 调用Vue实例的.$watch方法

主要是可以设置handler(new, old)方法,每次监测的值变化时,都会调用该方法。
在这里插入图片描述

和计算属性一样,监测属性也可以进行简写:
在这里插入图片描述

深度监视-deep

监视多级结构中的某个属性时,使用’number.a’指定对象的key。
在这里插入图片描述
深度监视:

  • Vue中的watch默认不监测对象内部值的改变
  • 配置deep:true,则可以监测对象内部值的改变(多层)

在下边的例子中number对象开启了深度监测,无论属性a还是b变化,都会触发handler()。
在这里插入图片描述

computed和watch的区别

  1. computed能完成的功能,watch都可以完成。
  2. watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

两个重要的小原则:

  • 被Vue管理的函数,最好不要写为箭头函数,即写成普通函数,这样this的指向才是Vue实例对象。
  • 所有不被Vue管理的函数(定时器回调函数,Ajax的回调函数等),最好写成箭头函数,这样this的指向才是Vue实例对象。

样式渲染

class与style绑定

条件渲染

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/169027.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

思伟老友记 | 厦门路桥翔通海砼建材有限公司与思伟软件携手走过23年

23年 感恩相伴 携手成长 2001年-2023年&#xff0c;厦门路桥翔通海砼建材有限公司已携手上海思伟软件有限公司走过23年。从最初的半手动生产模式到如今的自动生产一体化系统&#xff0c;海砼公司通过思伟软件生产混凝土累计超过1000万m&#xff0c;思伟软件则借助海砼公司的实…

C语言——函数的嵌套调用

#define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h>void new_line() {printf("Hello\n"); }void three_line() {int i0;for(i0;i<3;i){new_line();} }int main() {three_line();return 0; }

测试用例的设计方法(全):正交实验设计方法|功能图分析方法|场景设计方发

正交实验设计方法 一.方法简介 利用因果图来设计测试用例时, 作为输入条件的原因与输出结果之间的因果关系,有时很难从软件需求规格说明中得到。往往因果关系非常庞大,以至于据此因果图而得到的测试用例数目多的惊人&#xff0c;给软件测试带来沉重的负担&#xff0c;为了有效…

Vue3 常用组件

一、Fragment组件 Vue2 的template 模板中必须要有一个根标签&#xff0c;而我们在Vue3 的模板中不需要使用根标签就能渲染&#xff0c;因为Vue3 在内部会将多个标签包含在一个Fragment 虚拟元素中。 好处就在于可以减少标签的层级&#xff0c;减小内存占用。 二、Teleport组…

基于ResNet框架的CNN

数据准备 DATA_URL http://download.tensorflow.org/example_images/flower_photos.tgz 一、训练集和验证集的划分 #spile_data.pyimport os from shutil import copy import randomdef mkfile(file):if not os.path.exists(file):os.makedirs(file)file flower_data/flower…

YOLO目标检测——无人机航拍行人检测数据集下载分享【含对应voc、coc和yolo三种格式标签】

实际项目应用&#xff1a;智能交通管理、城市安防监控、公共安全救援等领域数据集说明&#xff1a;无人机航拍行人检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富标签说明&#xff1a;使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;…

whisper使用方法

看这个 github https://github.com/Purfview/whisper-standalone-win/tags下载 视频提取音频 ffmpeg -i 222.mp4 -vn -b:a 128k -c:a mp3 output.mp3截取4秒后的音频 ffmpeg -i output.mp3 -ss 4 -c copy output2.mp3使用 whisper-faster.exe 生成字幕 whisper-faster.exe …

基于水基湍流算法优化概率神经网络PNN的分类预测 - 附代码

基于水基湍流算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于水基湍流算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于水基湍流优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

游戏报错d3dcompiler_47.dll缺失怎么修复,总结多种修复方法

在使用这些软件和游戏的过程中&#xff0c;我们常常会遇到一些问题&#xff0c;其中之一就是d3dcompiler_47.dll丢失的问题。这个问题可能会导致软件或游戏无法正常运行&#xff0c;给用户带来困扰。本文将详细介绍解决软件游戏d3dcompiler_47.dll丢失的方法&#xff0c;帮助您…

读懂:“消费报销”模式新零售打法,适用连锁门店加盟的营销方案

读懂&#xff1a;“消费报销”模式新零售打法&#xff0c;适用连锁门店加盟的营销方案 引言&#xff1a;2023年的双十一已经落下帷幕&#xff0c;作为每年的经典电商促销节&#xff0c;今年已是第15个年头&#xff0c;但是今年各大电商平台却都是非常默契的&#xff0c;没有公布…

《数据:挖掘价值,洞察未来

大数据&#xff1a;挖掘价值&#xff0c;洞察未来 我们正身处一个数据驱动的时代&#xff0c;大数据已经成为企业和个人决策的重要依据。本文将深入探讨大数据的魅力&#xff0c;挖掘其价值&#xff0c;并洞察未来发展趋势&#xff0c;让我们一起领略大数据的无穷奥秘。 一、大…

《云计算:云端协同,智慧互联》

《云计算&#xff1a;云端协同&#xff0c;智慧互联》 云计算&#xff0c;这个科技领域中的热门词汇&#xff0c;正在逐渐改变我们的生活方式。它像一座座无形的桥梁&#xff0c;将世界各地的设备、数据、应用紧密连接在一起&#xff0c;实现了云端协同&#xff0c;智慧互联的愿…

比科奇推出5G小基站开放式RAN射频单元的高性能低功耗SoC

全新的PC805作为业界首款支持25Gbps速率eCPRI和CPRI前传接口的系统级芯片&#xff08;SoC&#xff09;&#xff0c;消除了实现低成本开放式射频单元的障碍 中国北京&#xff0c;2023年11月 - 5G开放式RAN基带芯片和电信级软件提供商比科奇&#xff08;Picocom&#xff09;今日…

pip list 和 conda list的区别

PS : 网上说conda activate了之后就可以随意pip了 可以conda和pip混用 但是安全起见还是尽量用pip 这样就算activate了&#xff0c;进入base虚拟环境了 conda与pip的区别 来源 Conda和pip通常被认为几乎完全相同。虽然这两个工具的某些功能重叠&#xff0c;但它们设计用于不…

Linux文件目录以及文件类型

文章目录 Home根目录 //bin/sbin/etc/root/lib/dev/proc/sys/tmp/boot/mnt/media/usr 文件类型 Home 当尝试使用gedit等编辑器保存文件时&#xff0c;系统默认通常会先打开个人用户的“家”&#xff08;home&#xff09;目录&#xff0c; 建议在通常情况下个人相关的内容也是保…

在windows Server安装Let‘s Encrypt的SSL证书

1、到官网&#xff08;https://certbot.eff.org/instructions?wswebproduct&oswindows&#xff09;下载 certbot客户端。 2、安装客户端&#xff08;全部默认安装即可&#xff09; 3、暂停IIS中的网站 开始菜单中找到并运行“Certbot”&#xff0c;输入指令&#xff1a; …

【Web】Ctfshow Nodejs刷题记录

目录 ①web334 ②web335 ③web336 ④web337 ⑤web338 ⑥web339 ⑦web340 ⑧web341 ⑨web342-343 ⑩web344 ①web334 进来是一个登录界面 下载附件&#xff0c;简单代码审计 表单传ctfshow 123456即可 ②web335 进来提示 get上传eval参数执行nodejs代码 payload: …

Java贪吃蛇小游戏

Java贪吃蛇小游戏 import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import java.util.LinkedList; import java.util.Random;publi…

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现

项目编号&#xff1a; S 017 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S017&#xff0c;文末获取源码。} 项目编号&#xff1a;S017&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 登录注册模块2.2 课程管理模块2.3 课…

前端本地存储数据库IndexedDB

前端本地存储数据库IndexedDB 1、前言2、什么是 indexedDB&#xff1f;3、什么是 localForage&#xff1f;4、localForage 的使用5、VUE 推荐使用 Pinia 管理 localForage 1、前言 前端本地化存储算是一个老生常谈的话题了&#xff0c;我们对于 cookies、Web Storage&#xff…