做不好的网站违法吗/识万物扫一扫
正确学习方式：视频->动手实操->压缩提取->记录表述
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)
正确学习方式：视频->动手实操->压缩提取->记录表述 1基础结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"&…...
C#开发的OpenRA的游戏主界面怎么样创建3
继续游戏主界面创建的主题， 我们知道游戏的主界面上有很多部件，比如显示文本的标签（LabelWidget）, 显示按钮（ButtonWidget）。那么这些部件又是如何创建在主界面上的呢？ 其实这些部件是否显示，都是来源于文件yaml，在这里就是文件mainmenu.yaml， 在这个文件里定义了所有…...
秒懂算法 | 基于主成分分析法、随机森林算法和SVM算法的人脸识别问题
本文的任务与手写数字识别非常相似，都是基于图片的多分类任务，也都是有监督的。 01、数据集介绍与分析 ORL人脸数据集共包含40个不同人的400张图像，是在1992年4月至1994年4月期间由英国剑桥的Olivetti研究实验室创建。 此数据集下包含40个目录，每个目录下有10张图像，每个…...
QML Loader（加载程序）
Loader加载器用于动态加载 QML 组件。加载程序可以加载 QML 文件（使用 source 属性）或组件对象（使用 sourceComponent 属性） 常用属性： active 活动asynchronous异步，默认为falseitem项目progress 进度so…...
C++——类型转换
目录 C语言中的类型转换 C强制类型转换 static_cast reinterpret_cast const_cast dynamic_cast 延伸问题 RTTI（了解） C语言中的类型转换 在C语言中，如果赋值运算符左右两侧类型不同，或者形参与实参类型不匹配，或…...
vue3：生命周期（onErrorCaptured）
一、背景 当项目如果发生报错，影响程序体验。如果能以捕获的方式得到错误信息，而且还能定位问题，这样就好了，本文介绍onErrorCaptured实现我们想要的效果。 vue2：errorCaptured。使用与vue3同理。 vue3：…...
vue过滤器
vue 过滤器 对要显示的数据进行特定格式化之后再显示 注册过滤器 Vue.filter(name,callback)new Vue({filters:{}}) 使用过滤器 {{ name | 过滤器名 }}v-band:属性“name | 过滤器名” 局部过滤器 <p>{{time | timeFormater }}</p> <!-- 过滤器可接受额外参…...
I/O模型
写在前面 前面聊完了IO方式, 也就意味着网络数据的收发通道是建立起来了。但业务场景中, 通道本身是不会发送数据的。在常见的网络应用中, server端会创建多个链接以服务更多client, 同时要求各个client尽可能互不影响。这是I/O模型(也就是IO方式线程模型)要解决的问题。由于加…...
前端必备技术之——AJAX
简介 AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML(现在已经基本被json取代)。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组…...
MySQL数据库 各种指令操作大杂烩(DML增删改、DQL查询、SQL...)
文章目录前言一、DML 增删改添加数据修改数据删除数据二、DQL 查询基本查询条件查询聚合函数(count、max、min、avg、sum)分组查询(group by)排序查询(order by)分页查询(limit)DQL 语句练习三、SQLDCL 权限控制约束案例多表查询事务存储引擎字符串函数数值函数日期函数流程函数…...
Java分布式全局ID（一）
随着互联网的不断发展，互联网企业的业务在飞速变化，推动着系统架构也在不断地发生变化。 如今微服务技术越来越成熟，很多企业都采用微服务架构来支撑内部及对外的业务，尤其是在高 并发大流量的电商业务场景下，微服务…...
算法分析与设计之并查集详解
算法分析与设计之并查集1.前言2.并查集的基础2.1.关于动态连通性2.2.动态连通性的应用场景：2.3.对问题建模：2.4.建模思路：2.5.API2.7.Quick-Find算法：2.8.Quick-Union算法：3. 并查集的应用1.前言 本文主要介绍解决动态…...
Linux - 内存性能评估
文章目录概述free 命令指定的时间段内不间断地监控内存的使用情况通过watch与free相结合动态监控内存状况vmstat命令监控内存“sar –r”命令组合小结概述 内存的管理和优化是系统性能优化的一个重要部分，内存资源的充足与否直接影响应用系统的使用性能。在进行内存…...
00后初中辍学，转行程序员后，终于找到了女朋友
大家好，这里是程序员晚枫，今天继续分享我们的读者投稿，如需投稿赚稿费的朋友，请在后台私信我：投稿。下面我们进入正文吧~ 我是一位 00 后，从初一辍学，到目前为止已有 8 年的时间了，在…...
“Vue学习注意事项：掌握核心特性，注意性能优化和第三方库的使用“
Vue是一款易学易用的JavaScript框架，它可以帮助开发者构建动态、高性能的用户界面。Vue的核心概念包括数据绑定、指令、计算属性和组件化，学习Vue需要注意以下几个点：1. 理解Vue的基本概念和用法Vue的基本概念包括模板、组件、数据绑定、计算…...
计算机网络协议详解（二）
文章目录🔥HTTP协议介绍🔥HTTP协议特点🔥HTTP协议发展和版本🔥HTTP协议中URI、URL、URN🔥HTTP协议的请求分析🔥HTTP协议的响应分析🔥MIME类型🔥HTTP协议介绍 HTTP协议介绍 什么是超…...
【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )
文章目录一、子元素选择器1、语法说明2、代码分析3、代码示例二、交集选择器1、语法说明2、代码示例一、子元素选择器 1、语法说明 子元素选择器 可以选择 某个基础选择器 选择出的 元素组 的 直接子元素 ( 亲儿子元素 ) 中 使用基础选择器 选择 元素 ; 子元素选择器语法 : 父选…...
Java集合专题
文章目录框架体系CollectionListArrayListLinkedListVectorSetHashSetLinkedHashSetTreeSetMapHashMapHashtableLinkedHashMapTreeMapPropertiesCollections框架体系 1、集合主要分了两组（单列集合，双列集合） 2、Collection接口有两个重要的子…...
双重差分法（DID）：算法策略效果评估的利器
文章目录算法评估DID原理简单实例Python实现算法评估 作为一名算法出身的人，曾长期热衷于算法本身的设计和优化。至于算法的效果评估，通常使用公开数据集做测试，然后对比当前已公开的结果，便可得到结论。 但是在实际落地过程中&…...
【pytorch】使用mixup技术扩充数据集进行训练
目录1.mixup技术简介2.pytorch实现代码，以图片分类为例1.mixup技术简介 mixup是一种数据增强技术，它可以通过将多组不同数据集的样本进行线性组合，生成新的样本，从而扩充数据集。mixup的核心原理是将两个不同的图片按照一定的比例…...
面向对象设计模式：创建型模式之单例模式
1. 单例模式，Singleton Pattern 1.1 Definition 定义 单例模式是确保类有且仅有一个实例的创建型模式，其提供了获取类唯一实例（全局指针）的方法。 单例模式类提供了一种访问其唯一的对象的方式，可以直接访问…...
IsADirectoryError: [Errno 21] Is a directory: ‘.‘
项目场景： 基于YOLOv5的室内场景识别 工具：colab 问题描述 Traceback (most recent call last): File “train.py”, line 630, in main(opt) File “train.py”, line 494, in main d torch.load(last, map_location‘cpu’)[‘opt’] File “/usr/…...
判断三角面片与空间中球体是否相交
文章目录一、问题描述二、解题思路 在做项目时遇到了一个数学问题，即，如何判断给定一个三角面片与空间中某个球体有相交部分？这个问题看似简单，实际处理起来需要一些方法和手段。一、问题描述 已知空间中球体的球心位置center&a…...
继承下的缺省参数值和访问说明符
前言 本文将介绍 C 继承体系下，函数缺省参数的绑定和函数访问说明符的绑定。这些奇怪的问题实际上不应在我们的代码中出现，但它们能帮助我们理解 C 的动态绑定和静态绑定，也能帮助我们更好的通过面试。 缺省参数值 先来看一段代码…...
Spring核心模块—— BeanFactoryPostProcessorBeanPostProcessor（后处理器）
后置处理器前言Spring的后处理器BeanFactoryPostProcessor（工厂后处理器）执行节点作用基本信息经典场景子接口——BeanDefinitiRegistryPostProcessor基本介绍用途具体原理例子——注册BeanDefinition使用Spring的BeanFactoryPostProcessor扩展点完成自定…...
产品新人如何培养产品思维？
什么是产品思维？其实很难定义，不同人有不同的定义。有的人定义为以用户为中心打磨一个完美体验的产品；有的定义为从需求调研到需求上线各个步骤需要思考的点，等等。本文想讨论的产品思维是：怎么去发现问题，…...
「兔了个兔」CSS如此之美，看我如何实现可爱兔兔LOADING页面（万字详解附源码）
💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后…...
【Java】阻塞队列 BlcokingQueue 原理、与等待唤醒机制condition/await/singal的关系、多线程安全总结
在实习过程中使用阻塞队列对while sleep 轮询机制进行了改造，提升了发送接收的效率，这里做一点点总结。 自从Java 1.5之后，在java.util.concurrent包下提供了若干个阻塞队列，BlcokingQueue继承了Queue接口，是线程安全…...
【水下图像增强】Enhancing Underwater Imagery using Generative Adversarial Networks
原始题目Enhancing Underwater Imagery using Generative Adversarial Networks中文名称使用 GAN 增强水下图像发表时间2018年1月11日平台ICRA 2018来源University of Minnesota, Minneapolis MN文章链接https://arxiv.org/abs/1801.04011开源代码官方：https://gith…...
Maven专题总结—详细版
第一章 为什么使用Maven 获取jar包 使用Maven之前，自行在网络中下载jar包，效率较低。如【谷歌、百度、CSDN…】使用Maven之后，统一在一个地址下载资源jar包【阿里云镜像服务器等…】 添加jar包 使用Maven之前，将jar复制到项目工程…...