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

快速上手Vue

news 文章来源：https://blog.csdn.net/weixin_73042028/article/details/137747919 2024/11/1 10:29:21

目录

概念

创建实例

插值表达式

 Vue响应式特性

概念

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中的数据，被添加到实例上

  1. 访问数据：实例.属性名
  2. 修改数据：实例.属性名=值
<!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是一个用于 构建用户界面 的 渐进式 框架 构建用户界面&#xff1a;基于数据渲染出用户看到的页面 渐进式&#xff1a;Vue相关生态&#xff1a;声明式渲染<组件系统<客户端路由<大规模状态管理<构建工具 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库进行图像处理书法参赛作品

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

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

docker 容器指定utf-8编码

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

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

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

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

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

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

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

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

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

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

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

Qt使用插件QPluginLoader 机制开发

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

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

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

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

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

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

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

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

并发编程之ThreadLocal使用及原理

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语言

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

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

基于顺序表实现通讯录

上篇我们讲了顺序表是什么&#xff0c;和如何实现顺序表。这篇文章我们将基于顺序表来实现通讯录。 文章目录 前言一、基于顺序表是如何实现的二、通讯录的头文件和实现文件三、通讯录的实现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变量 变量由标识符&#xff0c;类型和可选的初始化程序定义。变量还具有范围&#xff08;可见性/生存期&#xff09;。 Java变量类型 在Java中&#xff0c;必须先声明所有变量&#xff0c;然后才能使用它们。变量声明的基本形式如下所示&#xff1…...

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

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

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

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

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

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

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

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

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

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

二叉树总结

递归返回值 1、如果需要搜索整棵二叉树且不用处理递归返回值&#xff0c;递归函数就不要返回值。 2、如果需要搜索整棵二叉树且需要处理递归返回值&#xff0c;递归函数就需要返回值。 3、如果要搜索其中一条符合条件的路径&#xff0c;那么递归一定需要返回值&#xff0c;…...

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

接口优化技巧

一、背景 针对老项目&#xff0c;去年做了许多降本增效的事情&#xff0c;其中发现最多的就是接口耗时过长的问题&#xff0c;就集中搞了一次接口性能优化。本文将给小伙伴们分享一下接口优化的通用方案 二、接口优化方案总结 1.批处理 批量思想&#xff1a;批量操作数据库&a…...

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

【工具】NPS 内网穿透搭建

背景 在日常开发中经常会涉及到使用公网某个端口进行开发调试的情况&#xff0c;但我们日常开发的机器IP是非公网IP&#xff0c;所以需要使用内网穿透的手段&#xff0c;使我们的服务在公网上能被访问到。 常用的内网穿透工具分两大类&#xff0c;一类是付费/免费服务&#xf…...

编程日记 2024/4/15 0:31:03

【数学】主成分分析（PCA）的详细深度推导过程

本文基于Deep Learning (2017, MIT)&#xff0c;推导过程补全了所涉及的知识及书中推导过程中跳跃和省略的部分。 blog 1 概述 现代数据集&#xff0c;如网络索引、高分辨率图像、气象学、实验测量等&#xff0c;通常包含高维特征&#xff0c;高纬度的数据可能不清晰、冗余&am…...

编程日记 2024/4/15 0:30:02

微信跳转页面时发生报错

报错如下图所示&#xff1a; 解决方法&#xff1a;&#xff08;从下面四种跳转方式中任选一种&#xff0c;哪种能实现效果就用哪个&#xff09; 带历史回退 wx.navigateTo() //不能跳转到tabbar页面 不带历史回退 wx.redirectTo() //跳转到另一个页面wx.switchTab() //只能…...

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

8：系统开发基础--8.1：软件工程概述、8.2：软件开发方法 、8.3：软件开发模型、8.4：系统分析

转上一节&#xff1a; http://t.csdnimg.cn/G7lfmhttp://t.csdnimg.cn/G7lfm 课程内容提要&#xff1a; 8&#xff1a;知识点考点详解 8.1&#xff1a;软件工程概述 1.软件的生存周期 2.软件过程改进—CMM Capability Maturity Model能力成熟度模型 3.软件过程改进—CMMI—…...

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

【简单讲解下Symfony框架】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…...

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

[Linux基础]ln硬链接和ln -s软链接的方法参数及区别

区别&#xff1a; 1、ln创建硬链接&#xff1b;ln -s 创建软链接 2、硬链接的两个文件指向同一个inode&#xff08;inode&#xff1a;存放着文件的目录、权限、block块编号等信息&#xff09;&#xff1b;软链接的目标文件指向源文件&#xff0c;目标文件内存储的是源文件的目…...

编程日记 2024/4/15 0:10:43

开源博客项目Blog .NET Core源码学习（15：App.Hosting项目结构分析-3）

本文学习并分析App.Hosting项目中前台页面的关于本站页面和点点滴滴页面。 关于本站页面 关于本站页面相对而言布局简单&#xff0c;与后台控制器类的交互也不算复杂。整个页面主要使用了layui中的面包屑导航、选项卡、模版、流加载等样式或模块。   面包屑导航。使用layui…...

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

【muzzik 分享】3D模型平面切割

# 前言 一年一度的征稿到了&#xff0c;倒腾点存货&#xff0c;3D平面切割通常用于一些解压游戏里&#xff0c;例如水果忍者&#xff0c;切菜这些&#xff0c;今天我就给大家讲讲怎么实现3D切割以及其原理&#xff0c;帮助大家更理解3D中的 Mesh(网格)&#xff0c;以及UV贴图和…...

编程日记 2024/4/15 0:07:40

网站开发会议议程范文/营销传播服务

设计稿尽量提供偶数切图之前预先定义好标准(常用标签的样式,公用样式)上下文元素之间尽量保持同级更新不频繁的使用背景图片(logo)先做需求确定部分内容(头/尾部)设置颜色尽量不使用英文,使用色码时多用3位,少用6位转载于:https://blog.51cto.com/suyanzhu/1878191...

编程日记 2024/11/1 7:41:57

h5响应式网站做动画/千度搜索引擎

RequestMapping("queryUser5")public String queryUser5(String Userid,ModelMap modelMap) {// return "redirect:queryUser.action"; //重定向&#xff0c;方法参数不带过去, //可以用modelMap将参数传递过去modelMap.addAttribute("Userid&q…...

编程日记 2024/11/1 6:04:28

网站如何做吸引人的项目/汕头seo托管

书上的代码已完全不可参考&#xff0c;只好按知识点从网上查资料一个一个实例 了。 <!DOCTYPE html> <html> <head><title>ExtJs</title><meta http-equiv"Content-Type" content"text/html; charsetutf-8"/><link…...

编程日记 2024/11/1 3:08:48

魔客吧是什麼程序做的网站/职业技能培训班

我正在尝试用箭头键和回车键使一系列按钮可导航。在我已经很容易地实现了箭头键&#xff0c;但是我似乎在网上找不到如何将焦点按钮绑定到enter键的答案。具体来说&#xff0c;我希望能够使用向上/向下键将焦点设置为按钮&#xff0c;然后按enter键激活按钮。在我可以用箭头高亮…...

编程日记 2024/11/1 1:32:55

网上书城网站开发方案/站长工具免费

点击上方蓝字关注我们“Maven企业实战系列目标&#xff1a;从此以后分分钟看懂公司项目里的各种maven配置&#xff0c;并且分分钟配好自己的maven环境。从此以后使用各种依赖或者插件&#xff0c;进行配置的时候&#xff0c;脱离网络&#xff0c;脱离照葫芦画瓢。从此以后分分钟…...

编程日记 2024/11/1 0:53:33

武汉网页制作培训多少钱/windows优化大师win10

问题描述用微信的签名校验工具&#xff0c;结果是一致的。百度了一些相同的问题&#xff0c;很多都是说前端传过来的URL需要decode一下&#xff0c;但是我们的URL是前端只需要传一个path过来&#xff0c;然后我再拼接好给他传回去&#xff0c;所以不应该出现这种问题的啊相关代…...

编程日记 2024/11/1 0:50:31