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

入门vue(1-10)

news 2026/2/7 17:58:07

正确学习方式：视频->动手实操->压缩提取->记录表述

1基础结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div class="root"><h1>get frame prefer to look for what you got</h1><h2>so  you know you learn a lot from {{company}}</h2></div><script>Vue.config.productionTip = false //关闭提醒const vm = new Vue({el:'.root',data:{company:'123'}})</script>
</body>
</html>

2容器和实例的关系
容器和实例：一 一对应；一个实例对应一个容器
容器先到先得实例
区分：不是说mustache和实例的关系

3组织vue启动时生成提示生产信息
Vue.config.productionTip = false;

4注意区分js表达式和js代码（语句）
js表达式：a,a+b,x===y?‘a’:‘b’;
js代码：if(){} ,for(){} ,while(){}

5开发过程使用开发版本vue(vue.js)可以在console报错方便修改

模板语法：1插值语法，2指令语法

< 指令语法>{{插值语法}}<>

插值举例{{}} :常用于标签内,eg:< h1>{{content}}< /h1>
指令语法举例：v-bind ：多用于绑定标签属性
v-bind==:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div class="test"><h1>你好{{name}}</h1><a v-bind:href="url">点击我去和百度聊天</a><!-- v-bind添加之后 url 当作表达式执行 --><a :href="url2">点我去和bing聊天</a></div><script>Vue.config.productionTip = falsenew Vue({el:'.test',data:{name:'帅小伙',url:'http://www.baidu.com',url2:'http://www.bing.com'}})</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div class="test"><h1>你好{{name}}</h1><h1>wow {{school.name}}</h1><a v-bind:href="url">点击我去和百度聊天</a><!-- v-bind添加之后 url 当作表达式执行 --><a :href="url2">点我去和bing聊天</a></div><script>Vue.config.productionTip = falsenew Vue({el:'.test',data:{name:'帅小伙',school:{name:'最帅小伙'},url:'http://www.baidu.com',url2:'http://www.bing.com'}})</script>
</body>
</html>

数据绑定详解：1单向绑定(v-bind)，2双向绑定(v-model)

双向绑定（能产生交互）只能用在表单类元素，输入元素，有value值
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><!-- 单项绑定：<input type="text" v-bind:value="name"><br> -->双向绑定: <input type="text" v-model:value="name"> //v-model='name'</div><script>Vue.config.productionTip = false;new Vue({el:'#root',data:{name:'拜登老妖精'}})</script></body>
</html>

el&data的两种写法：
连接容器与实例的两种方法：1el,2mount

eg:el两种方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><h1>你好，{{name}}</h1></div><script>Vue.config.productionTip = false const v = new Vue({//el:'#root',data:{name:'广东'}})setTimeout(() => {v.$mount('#root')}, 2000);</script>
</body>
</html>

data两种方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="root"><h1>你好，{{name}}</h1></div><script>Vue.config.productionTip = false const v = new Vue({el:'#root',// data:{//     name:'普通data'// }data:function(){return{name:'函数式data666'}}})</script>
</body>
</html>

summary/conclude:
在这里插入图片描述

what is MVVM?
M:model+V:view+VM:viewModel实例对象
在这里插入图片描述
在这里插入图片描述

相关文章：

入门vue(1-10)

正确学习方式&#xff1a;视频->动手实操->压缩提取->记录表述 1基础结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"&…...

编程日记 2023/5/12 21:06:35

C#开发的OpenRA的游戏主界面怎么样创建3

继续游戏主界面创建的主题， 我们知道游戏的主界面上有很多部件，比如显示文本的标签（LabelWidget）, 显示按钮（ButtonWidget）。那么这些部件又是如何创建在主界面上的呢？ 其实这些部件是否显示，都是来源于文件yaml，在这里就是文件mainmenu.yaml， 在这个文件里定义了所有…...

编程日记 2023/5/12 21:06:31

秒懂算法 | 基于主成分分析法、随机森林算法和SVM算法的人脸识别问题

本文的任务与手写数字识别非常相似，都是基于图片的多分类任务，也都是有监督的。 01、数据集介绍与分析 ORL人脸数据集共包含40个不同人的400张图像，是在1992年4月至1994年4月期间由英国剑桥的Olivetti研究实验室创建。 此数据集下包含40个目录，每个目录下有10张图像，每个…...

编程日记 2023/5/12 21:06:28

QML Loader（加载程序）

Loader加载器用于动态加载 QML 组件。加载程序可以加载 QML 文件&#xff08;使用 source 属性&#xff09;或组件对象&#xff08;使用 sourceComponent 属性&#xff09; 常用属性&#xff1a; active 活动asynchronous异步&#xff0c;默认为falseitem项目progress 进度so…...

编程日记 2023/5/12 21:06:26

C++——类型转换

目录 C语言中的类型转换 C强制类型转换 static_cast reinterpret_cast const_cast dynamic_cast 延伸问题 RTTI&#xff08;了解&#xff09; C语言中的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&#xff0c;或者形参与实参类型不匹配&#xff0c;或…...

编程日记 2023/5/12 21:06:23

vue3：生命周期（onErrorCaptured）

一、背景 当项目如果发生报错&#xff0c;影响程序体验。如果能以捕获的方式得到错误信息&#xff0c;而且还能定位问题&#xff0c;这样就好了&#xff0c;本文介绍onErrorCaptured实现我们想要的效果。 vue2&#xff1a;errorCaptured。使用与vue3同理。 vue3&#xff1a;…...

编程日记 2023/5/12 3:03:20

vue过滤器

vue 过滤器 对要显示的数据进行特定格式化之后再显示 注册过滤器 Vue.filter(name,callback)new Vue({filters:{}}) 使用过滤器 {{ name | 过滤器名 }}v-band:属性“name | 过滤器名” 局部过滤器 <p>{{time | timeFormater }}</p> <!-- 过滤器可接受额外参…...

编程日记 2023/5/12 2:01:01

I/O模型

写在前面 前面聊完了IO方式, 也就意味着网络数据的收发通道是建立起来了。但业务场景中, 通道本身是不会发送数据的。在常见的网络应用中, server端会创建多个链接以服务更多client, 同时要求各个client尽可能互不影响。这是I/O模型(也就是IO方式线程模型)要解决的问题。由于加…...

编程日记 2023/5/12 21:06:21

前端必备技术之——AJAX

简介 AJAX 全称为 Asynchronous JavaScript And XML&#xff0c;就是异步的 JS 和 XML(现在已经基本被json取代)。通过 AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;无刷新获取数据。AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准组…...

编程日记 2023/5/12 21:06:17

MySQL数据库 各种指令操作大杂烩(DML增删改、DQL查询、SQL...)

文章目录前言一、DML 增删改添加数据修改数据删除数据二、DQL 查询基本查询条件查询聚合函数(count、max、min、avg、sum)分组查询(group by)排序查询(order by)分页查询(limit)DQL 语句练习三、SQLDCL 权限控制约束案例多表查询事务存储引擎字符串函数数值函数日期函数流程函数…...

编程日记 2023/5/12 21:06:14

Java分布式全局ID（一）

随着互联网的不断发展&#xff0c;互联网企业的业务在飞速变化&#xff0c;推动着系统架构也在不断地发生变化。 如今微服务技术越来越成熟&#xff0c;很多企业都采用微服务架构来支撑内部及对外的业务&#xff0c;尤其是在高 并发大流量的电商业务场景下&#xff0c;微服务…...

编程日记 2023/5/12 21:06:10

算法分析与设计之并查集详解

算法分析与设计之并查集1.前言2.并查集的基础2.1.关于动态连通性2.2.动态连通性的应用场景&#xff1a;2.3.对问题建模&#xff1a;2.4.建模思路&#xff1a;2.5.API2.7.Quick-Find算法&#xff1a;2.8.Quick-Union算法&#xff1a;3. 并查集的应用1.前言 本文主要介绍解决动态…...

编程日记 2023/5/12 21:06:06

Linux - 内存性能评估

文章目录概述free 命令指定的时间段内不间断地监控内存的使用情况通过watch与free相结合动态监控内存状况vmstat命令监控内存“sar –r”命令组合小结概述 内存的管理和优化是系统性能优化的一个重要部分&#xff0c;内存资源的充足与否直接影响应用系统的使用性能。在进行内存…...

编程日记 2023/5/12 21:06:03

00后初中辍学，转行程序员后，终于找到了女朋友

大家好&#xff0c;这里是程序员晚枫&#xff0c;今天继续分享我们的读者投稿&#xff0c;如需投稿赚稿费的朋友&#xff0c;请在后台私信我&#xff1a;投稿。下面我们进入正文吧~ 我是一位 00 后&#xff0c;从初一辍学&#xff0c;到目前为止已有 8 年的时间了&#xff0c;在…...

编程日记 2023/5/12 21:06:00

“Vue学习注意事项：掌握核心特性，注意性能优化和第三方库的使用“

Vue是一款易学易用的JavaScript框架&#xff0c;它可以帮助开发者构建动态、高性能的用户界面。Vue的核心概念包括数据绑定、指令、计算属性和组件化&#xff0c;学习Vue需要注意以下几个点&#xff1a;1. 理解Vue的基本概念和用法Vue的基本概念包括模板、组件、数据绑定、计算…...

编程日记 2023/5/12 21:05:57

计算机网络协议详解（二）

文章目录&#x1f525;HTTP协议介绍&#x1f525;HTTP协议特点&#x1f525;HTTP协议发展和版本&#x1f525;HTTP协议中URI、URL、URN&#x1f525;HTTP协议的请求分析&#x1f525;HTTP协议的响应分析&#x1f525;MIME类型&#x1f525;HTTP协议介绍 HTTP协议介绍 什么是超…...

编程日记 2023/5/12 21:05:54

【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

文章目录一、子元素选择器1、语法说明2、代码分析3、代码示例二、交集选择器1、语法说明2、代码示例一、子元素选择器 1、语法说明 子元素选择器 可以选择 某个基础选择器 选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ; 子元素选择器语法 : 父选…...

编程日记 2023/5/12 21:05:50

Java集合专题

文章目录框架体系CollectionListArrayListLinkedListVectorSetHashSetLinkedHashSetTreeSetMapHashMapHashtableLinkedHashMapTreeMapPropertiesCollections框架体系 1、集合主要分了两组&#xff08;单列集合&#xff0c;双列集合&#xff09; 2、Collection接口有两个重要的子…...

编程日记 2023/5/12 21:05:48

双重差分法（DID）：算法策略效果评估的利器

文章目录算法评估DID原理简单实例Python实现算法评估 作为一名算法出身的人&#xff0c;曾长期热衷于算法本身的设计和优化。至于算法的效果评估&#xff0c;通常使用公开数据集做测试&#xff0c;然后对比当前已公开的结果&#xff0c;便可得到结论。 但是在实际落地过程中&…...

编程日记 2023/5/12 21:05:44

【pytorch】使用mixup技术扩充数据集进行训练

目录1.mixup技术简介2.pytorch实现代码&#xff0c;以图片分类为例1.mixup技术简介 mixup是一种数据增强技术&#xff0c;它可以通过将多组不同数据集的样本进行线性组合&#xff0c;生成新的样本&#xff0c;从而扩充数据集。mixup的核心原理是将两个不同的图片按照一定的比例…...

编程日记 2023/5/12 21:05:41

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/6 2:57:38

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/2 2:30:58

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/3 2:10:25

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/11/9 14:40:17

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51