当前位置：首页 > news >正文

快速上手Vue

news 2025/10/16 23:40:18

概念

创建实例

插值表达式

Vue响应式特性

概念

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

构建用户界面：基于数据渲染出用户看到的页面

渐进式：Vue相关生态：声明式渲染<组件系统<客户端路由<大规模状态管理<构建工具

Vue的两种使用方式：

                       ①Vue核心包开发

                               场景：局部模块改造

                       ②Vue核心包&Vue插件工程化开发

                               场景：整站开发

Vue 是一种非常适合循序渐进学习和开发的前端框架，无需一次性掌握所有技术，可以根据自己的需求和进度逐步深入学习和应用

框架：一套完整的项目解决方案

优点：开发效率提升

缺点：框架具有一些语法限制，可以去官网获得

创建实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>001创建一个Vue实例</title><!-- 引入 Vue2 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body><div id="box1"><h1>{{msg}}</h1><h1>{{count}}</h1></div><div id="box2"><h1>{{msg}}</h1><h1>{{count}}</h1></div><div id="app"><h1>{{msg}}</h1><h1>{{count}}</h1></div><script>const vm = new Vue({el: '#app',//该vm实例渲染id="app"的元素data: {//在Vue2中使用data 属性来声明响应式数据msg: 'Hello Vue',count: 666}})console.log(vm)</script>
</body></html>

插值表达式

作用：利用表达式进行插值渲染，将数据渲染于页面中

语法：{{表达式}}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>002插值表达式</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body><div id="app"><p>{{nickname}}</p><p>{{nickname.toUpperCase()}}</p><p>{{nickname+'你好'}}</p><p>{{age>=18?'成年':'未成年'}}</p><p>{{friend.name}}</p><p>{{friend.desc}}</p></div><script>const app = new Vue({el: '#app',data: {nickname: 'tony',age: 18,friend: {name: 'jepson',desc: '热爱Vue'}}})</script>
</body></html>

Vue响应式特性

即数据驱动视图（数据改变，视图会自动更新）

Vue底层监听到数据修改->进行Dom操作,自动更新视图

使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可

data中的数据，被添加到实例上

访问数据：实例.属性名
修改数据：实例.属性名=值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>003Vue响应式特性</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body><div id="app"><h1>{{msg}}</h1><h1>{{count}}</h1></div><script>const vm = new Vue({el: '#app',data: {msg: 'Hello Vue',count: 100}})console.log(vm)</script>
</body></html>

快速上手Vue

目录概念创建实例插值表达式 Vue响应式特性概念 Vue是一个用于构建用户界面的渐进式框架构建用户界面：基于数据渲染出用户看到的页面渐进式：Vue相关生态：声明式渲染<组件系统<客户端路由<大规模状态管理<构建工具 V…...

编程日记 2024/4/15 1:19:57

java 目录整理

Java知识相关目录主要参考黑马程序员风清扬老师的视屏，参考链接为 Java_黑马刘意(风清扬)2019最新版_Java入门视频_Java入门_Java编程_Java入门教程_黑马教程_黑马程序员_idea版_哔哩哔哩_bilibili 1、java 基础 java基本认识？java跨平台原理？jdk、jre、jvm的联系？链接：…...

编程日记 2024/4/15 1:18:56

使用Python的Pillow库进行图像处理书法参赛作品

介绍： 在计算机视觉和图像处理领域，Python是一种强大而流行的编程语言。它提供了许多优秀的库和工具，使得图像处理任务变得轻松和高效。本文将介绍如何使用Python的wxPython和Pillow库来选择JPEG图像文件，并对选中的图像进行调整和…...

编程日记 2024/4/15 1:14:52

docker 容器指定utf-8编码

在运行 Docker 容器的时候，如果容器内应用需要使用 UTF-8 编码来正常处理中文，你可以通过设置环境变量来指定编码。可以使用 -e 或者 --env 标志来设置环境变量。比如，设置 LANG 和 LC_ALL 环境变量为 C.UTF-8 或者 en_US.UTF-8&#xff1a…...

编程日记 2024/4/15 1:13:51

单例模式以及常见的两种实现模式

单例模式是校招中最常考的设计模式之一. 设计模式其实就是类似于“规章制度”，按照这个套路来进行操作。单例模式能保证某个类在程序中只存在唯一一份实例。而不会创建出多个实例，如果创建出了多个实例，就会编译报错。而不会创建出多个实…...

编程日记 2024/4/15 1:10:48

Java hashCode() 和 equals()的若干问题解答

Java hashCode() 和 equals()的若干问题解答本章的内容主要解决下面几个问题： 1 equals() 的作用是什么？ 2 equals() 与的区别是什么？ 3 hashCode() 的作用是什么？ 4 hashCode() 和 equals() 之间有什么联系？ …...

编程日记 2024/4/15 1:08:45

高级IO——React服务器简单实现

3.4Reactor服务器实现 1.connect封装每一个连接都要有一个文件描述符和输入输出缓冲区，还有读、写、异常处理的回调方法； 还包括指向服务器的回指指针； class connection; class tcpserver;using func_t std::function<void(s…...

编程日记 2024/4/15 1:05:41

Qt使用插件QPluginLoader 机制开发

简介： 插件(Plug-in,又称addin、add-in、addon或add-on,又译外挂)是一种遵循一定规范的应用程序接口编写出来的程序。 Qt 提供了2种APIs来创建插件： 一种高级API，用于为Qt本身编写插件：自定义数据库驱动程序，图像格…...

编程日记 2024/4/15 1:02:38

双子座 Gemini1.5和谷歌的本质

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2024/4/15 1:00:37

二百三十、MySQL——MySQL表的索引

1 目的梳理一下目前MySQL维度表的索引情况，当然网上也有其他博客专门讲MySQL索引的，我这边只是梳理一下目前的索引状况而已 2单列索引 2.1 索引截图 2.2 建表语句 3 联合索引 3.1 索引截图 3.2 建表语句 4 参考的优秀博客 http://t.csdnimg.cn/ZF7…...

编程日记 2024/4/15 0:58:34

ThreadLocal主要是为了解决线程安全性问题的非线程安全举例 public class ThreadLocalDemo {// 非线程安全的private static final SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");public static Date parse(String strDate) throws ParseExc…...

编程日记 2024/4/15 0:57:33

软件测试测试开发丨Pytest结合数据驱动-yaml，熬夜整理蚂蚁金服软件测试高级笔试题

编程语言 languages: PHPJavaPython book: Python入门: # 书籍名称 price: 55.5 author: Lily available: True repertory: 20 date: 2018-02-17 Java入门: price: 60 author: Lily available: False repertory: Null date: 2018-05-11 yaml 文件使用查看 yaml 文件 pych…...

编程日记 2024/4/15 0:56:32

软考数据库---2.SQL语言

主要记忆：表、索引、视图操作语句；数据操作；通配符、转义符；授权；存储过程；触发器这部分等等整理一下: “”" 1、数据定义语言。 SQL DDL提供定义关系模式和视图、删除关系和视图、修改关系模式的…...

编程日记 2024/4/15 0:51:28

基于顺序表实现通讯录

上篇我们讲了顺序表是什么，和如何实现顺序表。这篇文章我们将基于顺序表来实现通讯录。文章目录前言一、基于顺序表是如何实现的二、通讯录的头文件和实现文件三、通讯录的实现3.1 定义通讯录结构3.2 初始化通讯录3.3 销毁通讯录3.4 通讯录添加数据3.5 查找联系人…...

编程日记 2024/4/15 0:49:26

咸鱼之王_手游_开服搭建架设_内购修复无bug运营版

视频演示咸鱼之王_手游_开服游戏管理后台界面源码获取在文章末尾源码获取在文章末尾源码获取在文章末尾或者直接下面 https://githubs.xyz/y28.html 1.安装宝塔 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh &…...

编程日记 2024/4/15 0:48:25

【JSON2WEB】14 基于Amis的CRUD开发30分钟速成

【JSON2WEB】系列目录【JSON2WEB】01 WEB管理信息系统架构设计【JSON2WEB】02 JSON2WEB初步UI设计【JSON2WEB】03 go的模板包html/template的使用【JSON2WEB】04 amis低代码前端框架介绍【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成【JSON2WEB】06 JSO…...

编程日记 2024/4/15 0:44:20

Java入门教程||Java 变量

Java 变量 Java教程 - Java变量变量由标识符，类型和可选的初始化程序定义。变量还具有范围（可见性/生存期）。 Java变量类型在Java中，必须先声明所有变量，然后才能使用它们。变量声明的基本形式如下所示&#xff1…...

编程日记 2024/4/15 0:42:17

基于Java的校园快递一站式服务系统（源码+文档+包运行）

一.系统概述现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本校园快递一站式服务系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞…...

编程日记 2024/4/15 0:39:13

通讯录的实现（顺序表版本）

我们知道通讯录是基于顺序表的前提下，要写好通讯录我们就要深入了解好顺序表。我们先来看看什么是顺序表。（注意今天代码量有点多，坚持一下）。冲啊！兄弟们！ 顺序表的简单理解对于顺序表，我们首…...

编程日记 2024/4/15 0:38:12

利用Sentinel解决雪崩问题（一）流量控制

1、解决雪崩问题的常见方式有四种: 超时处理:设定超时时间，请求超过一定时间没有响应就返回错误信息，不会无休止等待;舱壁模式:限定每个业务能使用的线程数，避免耗尽整个tomcat的资源，因此也叫线程隔离;熔断降级:由断路器统计业务…...

编程日记 2024/4/15 0:36:09

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/10/15 14:31:44

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...

编程新知 2025/10/14 12:59:04

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...

编程新知 2025/9/14 19:44:52

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现题目链接：3576. Transform Array to All Equal Elements 1. 解题思路这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。核心优势对比基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/10/15 17:59:36