Vue2学习第一天

Vue2 学习第一天

1. 什么是 vue?

Vue 是一套用于构建用户界面的渐进式框架

2. vue 历史

vue 是在 2013 年创建的,vue3 是 2020 出现的,现在主要是用 vue2,创新公司用的是 vue3

vue 的作者是尤雨溪,vue 的搜索热度比 react 更高,国内 vue 用的人更多,国外的用 react 多。

3. vue 学习的内容

image.png

注:标黄是学习的内容

今天学习:常用指令,事件,生命周期,计算属性,watch

4. Vite 构建 Vue 项目

  • 在 cmd 中输入以下代码,构建 vue 项目。
pnpm create vue@2
cd vue_demo //进入vue_demo文件夹
pnpm install //下载相关的依赖包(下载别人写的代码)
pnpm dev //打开终端,进入网页

小 tips:如果下载很慢,可以用 ctrl+c 进行中断,重下;也可以切换淘宝源来下载。

  • 在终端输入**pnpm dev**打开终端

vue初始化界面

  • 以下是 vue 的目录结构介绍

vue文件

可以下载vetur插件,可以进行代码提示。

5. Vite 配置文件说明

import legacy from "@vitejs/plugin-legacy";
import vue2 from "@vitejs/plugin-vue2";

@的含义:@这里是代替了src路径。

6. main.js 文件说明

// import 就是引入文件
import Vue from "vue";
// App是我们的根组件
import App from "./App.vue";
import "./assets/main.css";

// h函数就是帮助我们渲染页面的函数
new Vue({
	el: "#app",
	render: (h) => h(App),
});

7. Vue 文件总结

vue 文件主要由templatescriptstyle组成。

<template>
	<div></div>
</template>

<script>
export default {
	name: "",
};
</script>

<style scoped></style>
  • template 模板用法

    template 是我们的视图,可以在里面写 html

    <template>
    	<div></div>
    </template>
    
  • 绑定事件

    @click叫做指令 v-on:click ,@是 v-on 的简写 v-on的意思就是触发一个事件 ,使用**v-on:xxx**或 **@xxx**绑定事件,其中 xxx 是事件名;addNum就是具体的事件函数。

    <button @click="addNum">+1</button>
    
  • 大胡子语法

    {{ }}大胡子语法,大胡子里面可以放我们data中的变量

    <span>{{ num }}</span>
    
  • data 数据源

    • data 是我们的数据源,vue 会对 data添加监听,能够监听到 data 中数据的变化,然后触发视图更新
    • data 写法比较奇怪,是一个函数,函数返回一个对象,对象中的数据才是我们的数据源
    export default {
      data() {
        return {
          num: 0,
        };
      },
    
  • methods 配置函数

    • methods 就是我们的事件处理中心,所有的函数都放在里面
    • methods 中配置的函数,不要用箭头函数!否则 this 就不是 vm 了
    • methods 中配置的函数,都是被 Vue 所管理的函数,this 的指向是vm组件实例对象
      methods: {
        addNum() {
          console.log(this);
          this.num++;
        },
      },
    
  • 整体 vue 文件

    <template>
    	<div id="test">
    		<button @click="addNum">+1</button>
    		<span>{{ num }}</span>
    	</div>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    			num: 0,
    		};
    	},
    	methods: {
    		addNum() {
    			console.log(this);
    			this.num++;
    		},
    	},
    };
    </script>
    
    <style>
    #test {
    	margin: auto;
    }
    </style>
    

QQ录屏20240215102051 -original-original

8. v-if 条件渲染

  • v-if

    • 写法:

      • v-if="表达式"

      • v-else-if="表达式"

      • v-else="表达式"

    • 适用于:切换频率较低的场景。

    • 特点:直接通过删除 DOM 元素来控制显隐。

    • 注意:v-if可以和v-else-ifv-else一起使用,但要求结构不能被“打断”。

  • v-show

    • 写法:v-show="表达式"
    • 适用于:切换频率较高的场景。
    • 特点:不展示的 DOM 元素未被移除,仅仅是使用样式**display:none**隐藏掉

v-if 和 v-show 的区别:

  1. 需要频繁操作 DOM 元素显隐的时候,用 v-show 性能会更好
  2. 使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。
<template>
	<div id="wrapper">
		<button v-on:click="toggle">toggle</button>
		<p v-if="isShow">hello world</p>
	</div>
</template>

<script>
export default {
	data() {
		return {
			isShow: true,
		};
	},
	methods: {
		toggle() {
			this.isShow = !this.isShow;
		},
	},
};
</script>

<style></style>

QQ录屏20240215102258 -original-original

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

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

相关文章

java的面向对象编程(oop)——认识泛型

前言&#xff1a; 打好基础&#xff0c;daydayup! 泛型 1&#xff0c;认识泛型&#xff1a; 定义类&#xff0c;接口&#xff0c;方法时&#xff0c;同时声明了一个或多个类型变量&#xff08;例&#xff1a;<E>&#xff09;,称为泛型&#xff0c;泛型接口&#xff0c;泛…

计算机网络——11EMail

EMail 电子邮件&#xff08;EMail&#xff09; 3个主要组成部分 用户代理邮件服务器简单邮件传输协议&#xff1a;SMTP 用户代理 又名“邮件阅读器”撰写、编辑和阅读邮件输入和输出邮件保存在服务器上 邮件服务器 邮箱中管理和维护发送给用户的邮件输出报文队列保持待发…

###51单片机学习(2)-----如何通过C语言运用延时函数设计LED流水灯

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 目录 一. 延时函数的生成 1.通过延时计算器得到延时函数 2.可赋值改变…

2月14日作业

1.请编程实现二维数组的杨慧三角 代码&#xff1a; #include <stdio.h> #include <string.h> #include <stdlib.h> int main(int argc, const char *argv[]) {int n;printf("please enter n:");scanf("%d",&n);int arr[n][n];for(…

算法——数论——快速幂

目录 快速幂 费马小定理 一、试题 算法训练 A的B的C次方次方 快速幂 快速幂是一种用于快速计算幂运算的算法。计算复杂度 O(log n)基本思想是利用指数 n 的二进制展开形式&#xff0c;将 转化为多个 a 的幂的乘积&#xff0c;然后通过迭代快速计算。 快速幂的示例代码&…

Zabbix图形中文乱码问题(显示口口)解决办法

一 切换到zabbix安装目录assets/fonts下&#xff0c;下载字体 这里使用是nginxphp作为zabbix-web展示&#xff0c;使用find 命令查找 进入目录下&#xff0c;将原有字体备份&#xff0c;下载msyh字体 wget https://www.xxshell.com/download/sh/zabbix/ttf/msyh.ttf 二 修改配…

基于FPGA的UDP实现(包含源工程文件)

1、概括 前文通过FPGA实现了ARP和ICMP协议&#xff0c;ARP协议一般用来获取目的IP地址主机的MAC地址&#xff0c;ICMP通过回显请求和回显应答来判断以太网链路是否通畅&#xff0c;这两个协议都不是用来传输用户数据的。如果用户需要向PC端传输大量数据&#xff0c;那么就必须使…

嵌入式培训机构四个月实训课程笔记(完整版)-Linux ARM驱动编程第四天-ARM Linux编程之IIC与uart (物联技术666)

链接&#xff1a;https://pan.baidu.com/s/1V0E9IHSoLbpiWJsncmFgdA?pwd1688 提取码&#xff1a;1688 教学内容&#xff1a; 1、I2C总线&#xff1a; I2C&#xff08;Inter&#xff0d;Integrated Circuit),PHILIPS公司开发的两线式半双工同步串行总线&#xff1b;可以用来连…

RCS系统之:浅谈系统设计与开发

这是我在开发RCS系统中的一些个人感悟与心得&#xff0c;写出来与大家一起分享下。是想到什么写到什么&#xff0c;如果有什么不对的&#xff0c;欢迎大家一起探讨。 有些人喜欢把WMS系统下面的系统统称为RCS系统。 但我不是这么想的&#xff0c;我这里把WMS/ERP系统与AGV之间…

AtCoder Beginner Contest 332 --- E - Lucky bag --- 题解

目录 E - Lucky bag 题目大意&#xff1a; 思路解析&#xff1a; 代码实现&#xff1a; E - Lucky bag 题目大意&#xff1a; 思路解析&#xff1a; 在方差中平均值只与输入有关为定值。看到数据范围为 2 < D < N < 15&#xff0c;想到是否能使用状压dp来进行解答…

接口测试方法论

第1章 测试那点事 单元测试》接口测试》界面测试 接口就是包含特定输入和特定输出的一套逻辑处理单元&#xff0c;用户无须知晓接口的内部实现逻辑&#xff0c;这也可以称为接口的黑河处理逻辑。因为服务对象不同&#xff0c;接口又可分为两种&#xff1a;一种是系统或服务的…

LLM Visualization可视化

可视化演示网站&#xff1a;https://bbycroft.net/llm 视频解释&#xff1a;https://www.bilibili.com/video/BV1hZ4y1E7DZ/?spm_id_from333.788&vd_sourcecc2da879c044059d9838f660bcaf4664 欢迎使用Markdown编辑器 你好&#xff01; 这是你第一次使用 Markdown编辑器 …

react【六】 React-Router 路由

文章目录 1、Router1.1 路由1.2 认识React-Router1.3 Link和NavLink1.4 Navigate1.5 Not Found页面配置1.6 路由的嵌套1.7 手动路由的跳转1.7.1 在函数式组件中使用hook1.7.2 在类组件中封装高阶组件 1.8 动态路由传递参数1.9 路由的配置文件以及懒加载 1、Router 1.1 路由 1.…

基于BitVM的乐观 BTC bridge

1. 引言 前序博客&#xff1a; 区块链互操作协议Bitcoin Bridge&#xff1a;治愈还是诅咒&#xff1f;BitVM&#xff1a;Bitcoin的链下合约 基于BitVM的乐观 BTC bridge&#xff1a; Trust-minimized two-way peg 机制 BitVM BTC bridge背后的主要思想是&#xff1a; 为比…

几个经典金融理论

完整EA&#xff1a;Nerve Knife.ex4黄金交易策略_黄金趋势ea-CSDN博客 一、预期效用理论 预期效用理论是描述人们在做出决策时如何考虑风险和不确定性的一种理论。该理论最初由经济学家冯诺伊曼&#xff08;John von Neumann&#xff09;和奥斯卡摩根斯坦恩&#xff08;Oskar…

信号量概念,使用场景,本质,接口函数(pv操作),基于环形队列的生产消费者模型(过程,三个原则,单线程,多线程)

目录 引入​​​​​​​ 介绍 概念 使用场景 引入 介绍 注意 本质 计数器的本质 [判断资源是否就绪] 和互斥锁的关联 接口函数 初始化和销毁信号量 sem_init 函数原型 sem pshared value sem_destroy pv操作 sem_wait ​编辑 sem_post 其他接口 s…

【MySQL进阶之路】MySQL 中的分库分表方案解决方案

欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术的推送&#xff01; 在我后台回复 「资料」 可领取编程高频电子书&#xff01; 在我后台回复「面试」可领取硬核面试笔记&#xff01; 文章导读地址…

话题——程序员为什么不喜欢关电脑?

程序员为什么不喜欢关电脑&#xff1f; 方向一&#xff1a;工作流程与需求 程序员的工作往往涉及长时间、连续的任务&#xff0c;如代码编写、调试、测试等。这些任务需要高度的集中和专注&#xff0c;而频繁地关机和重启可能会打断他们的工作流&#xff0c;导致他们需要重新…

猫头虎分享已解决Bug || DNS解析问题(DNS Resolution Issue):DNSLookupFailure, DNSResolveError

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

基于决策树的金融市场波动性预测与应用

基于决策树的金融市场波动性预测与应用 项目背景与意义数据概述与分析数据来源数据特征 数据预处理与特征工程模型训练与评估结果与应用总结 LightGBM是一个机器学习算法库&#xff0c;用于梯度提升机&#xff08;Gradient Boosting Machine&#xff09;的实现。梯度提升机是一…