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

vue的第3篇 第一个vue程序

news 2026/4/4 17:09:58

一 vue的mvvm实践者

1.1 介绍

  • Model：模型层， 在这里表示JavaScript对象

  • View：视图层， 在这里表示DOM(HTML操作的元素)

  • ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者

  在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者

  • ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新

  • ViewModel能够监听到视图的变化， 并能够通知数据发生改变

  至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定

1.2 vue模板的配置

1.文件 =>  首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

2.使用：新建一个html文件，在文件中输入vue.html 则自动生成如下内容

二  vue的程序

2.1 第一个程序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><div id="app"><!-- {{}} 插值表达式，绑定vue中的data数据 -->{{ message }}</div><script src="vue.min.js"></script><script>// 创建一个vue对象
new Vue({el: '#app',//绑定vue作用的范围data: {//定义页面中显示的模型数据message: 'Hello Vue!'}
})</script></body>
</html>

效果：

相关文章：

vue的第3篇 第一个vue程序

一 vue的mvvm实践者 1.1 介绍 Model&#xff1a;模型层&#xff0c; 在这里表示JavaScript对象 View&#xff1a;视图层&#xff0c; 在这里表示DOM(HTML操作的元素) ViewModel&#xff1a;连接视图和数据的中间件&#xff0c; Vue.js就是MVVM中的View Model层的实现者 在M…...

编程日记 2023/9/4 5:03:09

线性求逆元

先暴力求出 1 n ! \frac 1 {n!} n!1​往回推出 1 i ! \frac 1 {i!} i!1​ 1 i ( i − 1 ) ! i ! \Large \frac 1 i\frac{(i-1)!}{i!} i1​i!(i−1)!​...

编程日记 2023/9/4 5:02:07

第一章 USB应用笔记之USB初步了解

USB应用笔记之USB初步了解 文章目录 USB应用笔记之USB初步了解前言USB的优点&#xff1a;USB版本发展USB速度以及电气接口USB传输过程USB开发抓包工具&#xff1a;USB传输方式1.控制传输特点:2.中断传输的特点3. 批量传输的特点4.实时传输&#xff08;同步传输&#xff09;的特…...

编程日记 2023/9/4 5:01:06

小白入门python

建议用vscode进行代码学习 vscode下载地址:Download Visual Studio Code - Mac, Linux, Windows 左侧点击扩展安装python,右下角选择python版本&#xff0c;记得配置系统环境变量&#xff0c;python在系统(cmd)的版本由环境变量优先级决定,在编程软件中由自己选择解释器...

编程日记 2023/9/4 5:00:06

《Kubernetes部署篇：Ubuntu20.04基于containerd部署kubernetes1.24.17集群(多主多从)》

一、架构图 如下图所示： 二、环境信息 1、部署规划主机名K8S版本系统版本内核版本IP地址备注k8s-master-631.24.17Ubuntu 20.04.5 LTS5.15.0-69-generic192.168.1.63master节点 + etcd节点k8s-master-641.24.17Ubuntu 20.04.5 LTS5.15.0-69-generic192.168.1.64master节点 + …...

编程日记 2023/9/4 4:59:04

Adobe Illustrator 2023 for mac安装教程，可用。

Adobe Illustrator 是行业标准的矢量图形应用程序&#xff0c;可以为印刷、网络、视频和移动设备创建logos、图标、绘图、排版和插图。数以百万计的设计师和艺术家使用Illustrator CC创作&#xff0c;从网页图标和产品包装到书籍插图和广告牌。此版本是2023版本&#xff0c;适配…...

编程日记 2023/9/4 4:58:01

ElasticSearch（一）数据类型

ElasticSearch&#xff08;一&#xff09;数据类型 1.简述 Es数据类型分为基础数据类型和复杂类型数据&#xff0c;掌握ES数据类型才能进一步使用ES检索数据内容。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…...

编程日记 2023/9/4 4:57:00

Spark-Core核心算子

文章目录 一、数据源获取1、从集合中获取2、从外部存储系统创建3、从其它RDD中创建4、分区规则—load数据时 二、转换算子(Transformation)1、Value类型1.1 map()_1.2 mapPartitions()1.3 mapPartitionsWithIndex(不常用)1.4 filterMap()_扁平化&#xff08;合并流&#xff09;…...

编程日记 2023/9/4 4:55:59

Linux和Windows下防火墙、端口和进程相关命令

&#x1f680;1 防火墙 1.1 firewall systemctl stop firewalld.service # 关闭防火墙 systemctl start firewalld.service # 开启防火墙 systemctl restart firewalld.service # 重启防火墙 systemctl status firewalld.service # 防火墙状态 firewall-cmd --reload # 重…...

编程日记 2023/9/4 4:54:58

2021年09月 C/C++（六级）真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程（1~8级）全部真题・点这里 第1题：双端队列 定义一个双端队列，进队操作与普通队列一样，从队尾进入。出队操作既可以从队头，也可以从队尾。编程实现这个数据结构。 时间限制：1000 内存限制：65535 输入 第一行输入一个整数t，代表测试数据的组数。 每组数据的第一…...

编程日记 2023/9/4 4:53:54

【算法】滑动窗口

滑动窗口应用场景 关键词&#xff1a; 满足xxx条件&#xff08;计算结果&#xff0c;出现次数&#xff0c;同时包含&#xff09; 最长/最短 子串/子数组/子序列 例如&#xff1a;长度最小的子数组 滑动窗使用思路&#xff08;寻找最长&#xff09; 核心&#xff1a;左右双指…...

编程日记 2023/9/4 4:52:54

JS获取Beego渲染模板Temple时传递的数据

如果纯粹的JS调用接口&#xff0c;获取后端数据很直接坦率&#xff0c;JSON解析也就可以了。 如果需要JS获取HTML页面加载时&#xff0c;后端传回来的一些数据&#xff0c;我们也可以通过以下的方式进行获取。范例如下&#xff1a; //通过person_name字段传递参数到html页面中…...

编程日记 2023/9/4 4:51:52

代码随想录训练营第五十二天|300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

300.最长递增子序列 题目链接/文章讲解/视频讲解&#xff1a;代码随想录 1.代码展示 //300.最长递增子序列 int lengthOfLIS(vector<int>& nums) {if (nums.size() 1) {return 1;}//step1 构建dp数组//dp[i]的含义是长度未nums数组中长度为i 1的数组的最长子序列长…...

编程日记 2023/9/4 4:50:51

前端三大Css处理器之Less

Less是Css预处理器之一&#xff0c;分别有Sass、Less、Stylus这三个。 Lesshttps://lesscss.org/ Less是用JavaScript编写的&#xff0c;事实上&#xff0c;Less是一个JavaScript库&#xff0c;他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。Less的少数…...

编程日记 2023/9/4 4:49:49

Win 教程 Win7实现隔空投送

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…...

编程日记 2023/9/4 4:48:46

代码随想录算法训练营Day45 | 70. 爬楼梯 (进阶) | 322. 零钱兑换 | 279. 完全平方数

文章目录 70. 爬楼梯 (进阶)322. 零钱兑换二维数组滚动数组 279. 完全平方数 70. 爬楼梯 (进阶) 题目链接 | 理论基础 以完全背包的思路来解题&#xff0c;正如组合总和 Ⅳ 中提到的一样。在本题中&#xff0c;先背包后物品的思路就显得非常合理明显了。 本题中的物品就是可…...

编程日记 2023/9/4 4:47:46

算法训练营第四十一天（9.2）| 动态规划Part11：最长公共子序列

Leecode 1143.最长公共子序列 题目地址&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目类型&#xff1a;最长子序列 class Solution { public:int longestCommonSubsequence(string text1, string text2) {int m text1.size(), n t…...

编程日记 2023/9/4 4:46:45

k8s基于rbac权限管理serviceAccount授权管理

测试通过http访问apiServer curl没有证书不能通过https来访问apiServer需要使用kubectl代理 #使用kubectl代理 kubectl proxy --port8111& #curl访问 api/v1 是资源所属群组/版本 即创建资源时定义的apiVersion #后边跟的是要访问的资源 #查看所有命名空间 #查看核心资源用…...

编程日记 2023/9/4 4:45:43

linux URL访问工具

URL访问工具 有时候想在命令行下通过http访问接口/网页&#xff0c;可以使用curl来进行操作 发起请求 curl www.baidu.com 会返回网页内容 参数选项 -i参数 使用-i参数&#xff0c;会返回响应header curl -i www.baidu.com -I参数 使用-I参数&#xff0c;只会返回响应header cu…...

编程日记 2023/9/4 4:44:42

CCF-CSP 29次 第五题【202303-5 施肥】

计算机软件能力认证考试系统 题解&#xff08;35分&#xff09;&#xff1a; 枚举每个区间&#xff0c;再枚举每个施肥车&#xff0c;看所有的施肥车能不能把这个区间填满 #include<bits/stdc.h> using namespace std; const int N410; int n,m; typedef pair<int,…...

编程日记 2023/9/4 4:43:42

Dress Code：突破性高分辨率虚拟试衣数据集的技术架构与实战应用

Dress Code&#xff1a;突破性高分辨率虚拟试衣数据集的技术架构与实战应用 【免费下载链接】dress-code 项目地址: https://gitcode.com/gh_mirrors/dre/dress-code Dress Code是由意大利摩德纳大学研究团队开发的高分辨率多类别虚拟试衣数据集&#xff0c;为计算机视…...

编程新知 2026/4/4 15:45:40

降AI后怎么做知网查重不超标：降AI和查重双通过的操作方法

降AI后怎么做知网查重不超标&#xff1a;降AI和查重双通过的操作方法 被问了太多次降AI后查重相关的问题&#xff0c;写一篇完整教程。 主要工具是嘎嘎降AI&#xff08;www.aigcleaner.com&#xff09;&#xff0c;4.8元。第一次用的话有些细节知道和不知道差别挺大的。 操作…...

编程新知 2026/4/4 15:31:37

Qwen-Image-Layered实战：一键将图片拆成可编辑图层，设计师效率提升10倍

Qwen-Image-Layered实战&#xff1a;一键将图片拆成可编辑图层&#xff0c;设计师效率提升10倍 你是不是也遇到过这样的场景&#xff1f;客户发来一张产品海报&#xff0c;说“把背景换成星空&#xff0c;把Logo放大一点&#xff0c;再把模特往右移一点”。听起来只是几个简单…...

编程新知 2026/4/4 15:31:35

提升嵌入式开发效率：用快马平台一键生成串口通信等常用模块代码

作为一名嵌入式开发者&#xff0c;我经常需要和串口通信打交道。无论是调试信息输出、设备间通信还是固件升级&#xff0c;UART都是最常用的外设之一。但每次新项目都要重新写一遍串口初始化、中断处理这些重复性代码&#xff0c;实在有点浪费时间。最近发现InsCode(快马)平台能…...

编程新知 2026/4/4 14:26:40

免费音频编辑终极指南：Audacity 4 让专业音频处理触手可及

免费音频编辑终极指南&#xff1a;Audacity 4 让专业音频处理触手可及 【免费下载链接】audacity Audio Editor 项目地址: https://gitcode.com/GitHub_Trending/au/audacity 你是否曾经想要编辑音频却苦于没有合适的工具&#xff1f;或者被昂贵复杂的专业软件吓退&…...

编程新知 2026/4/4 14:24:39

Delphi经典8大天坑｜第六篇：方法参数缺省值写在实现区，导致缺省值不生效

一、现象描述给方法&#xff08;过程/函数&#xff09;定义参数缺省值&#xff08;默认值&#xff09;后&#xff0c;调用方法时不传递该参数&#xff0c;期望使用缺省值&#xff0c;但实际运行时&#xff0c;缺省值不生效&#xff0c;参数呈现随机值或错误值&#xff0c;排查时…...

编程新知 2026/4/4 14:10:36

FullControl GCode Designer：重新定义3D打印设计的参数化控制工具

FullControl GCode Designer&#xff1a;重新定义3D打印设计的参数化控制工具 【免费下载链接】FullControl-GCode-Designer Software for designing GCODE for 3D printing 项目地址: https://gitcode.com/gh_mirrors/fu/FullControl-GCode-Designer 突破传统3D打印限制…...

编程新知 2026/4/4 13:32:08

5个实战场景：QuickBMS的资源提取全流程指南

5个实战场景&#xff1a;QuickBMS的资源提取全流程指南 【免费下载链接】QuickBMS QuickBMS by aluigi - Github Mirror 项目地址: https://gitcode.com/gh_mirrors/qui/QuickBMS QuickBMS是一款开源的资源提取工具&#xff0c;集成超过400种压缩和加密算法&#xff0c…...

编程新知 2026/4/4 12:55:37

解决vue项目 vscode查找文件应用 ctrl+鼠标点击import无法跳转的问题

踩坑 前提是 AI的解决方案处理完&#xff0c;你的vue文件一体的script可以查看里面的import文件引用&#xff0c;但是独立的index.js-import无论如何都查看不了文件应用。 解决办法 如下是我的tscoonfig.json。 实际上就是加上 【“allowJs”: true, //为了查看文件引用&#x…...

编程新知 2026/4/4 12:24:58

联想拯救者Y7000系列BIOS隐藏功能一键解锁工具：3分钟开启高级设置，轻松安装黑苹果

联想拯救者Y7000系列BIOS隐藏功能一键解锁工具&#xff1a;3分钟开启高级设置&#xff0c;轻松安装黑苹果 【免费下载链接】LEGION_Y7000Series_Insyde_Advanced_Settings_Tools 支持一键修改 Insyde BIOS 隐藏选项的小工具&#xff0c;例如关闭CFG LOCK、修改DVMT等等 项目地…...

编程新知 2026/4/4 11:15:52