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

vue的第3篇 第一个vue程序

news 2026/5/29 4:01:24

一 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

Hitboxer：开源SOCD清理工具，3分钟提升游戏操作精准度

Hitboxer&#xff1a;开源SOCD清理工具&#xff0c;3分钟提升游戏操作精准度 【免费下载链接】socd Key remapper for epic gamers 项目地址: https://gitcode.com/gh_mirrors/so/socd 你是否在激烈的游戏对抗中经历过这样的挫败&#xff1a;同时按下左右方向键时角色卡…...

编程新知 2026/5/26 3:07:53

如何高效批量下载音乐歌词：智能歌词管理完整指南

如何高效批量下载音乐歌词&#xff1a;智能歌词管理完整指南 【免费下载链接】ZonyLrcToolsX ZonyLrcToolsX 是一个能够方便地下载歌词的小软件。 项目地址: https://gitcode.com/gh_mirrors/zo/ZonyLrcToolsX ZonyLrcToolsX 是一款专业的跨平台歌词下载工具&#xff0c…...

编程新知 2026/5/26 0:48:40

HDI 高密度互连板阶数的深度理解

一、概述高密度互连板&#xff08;High Density Interconnector, HDI&#xff09;是通过激光微孔技术和逐层积层工艺实现高密度布线的印制电路板。其阶数划分是行业内统一的技术标准&#xff0c;核心依据为独立积层压合次数与配套激光盲孔制程次数&#xff0c;而非单面层数或钻…...

编程新知 2026/5/25 23:31:40

武汉国电华美串联谐振试验装置，现场用着心里有底

在高压试验现场干了这么多年&#xff0c;这位老师傅常说&#xff0c;一台好的串联谐振装置&#xff0c;就是试验人员的胆。面对GIS、大型变压器、超高压电缆这些大电容试品&#xff0c;没有趁手的谐振设备&#xff0c;交流耐压试验根本没法干。16875kVA/225kV这个规格&#xff…...

编程新知 2026/5/25 22:06:17

3分钟解锁网易云音乐NCM文件：ncmdumpGUI小白也能懂的完整教程

3分钟解锁网易云音乐NCM文件&#xff1a;ncmdumpGUI小白也能懂的完整教程 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经下载了网易云音乐的歌曲&a…...

编程新知 2026/5/25 21:50:10

XZ1018,100V,40A,NMOS 封装：TO252

封装&#xff1a;TO252类型&#xff1a;NVDS&#xff1a;100V VGS&#xff1a; 20V ID&#xff1a;40ARDS(ON)&#xff1a;10V <14mΩRDS(ON)&#xff1a;4.5V <19mΩ型号&#xff1a; XZ1018 封装&#xff1a;TO252类型&#xf…...

编程新知 2026/5/25 17:55:32

不止于绘图：用GMT 6.4的`grdtrack`和`project`命令玩转地形剖面分析与可视化

不止于绘图&#xff1a;用GMT 6.4的grdtrack和project命令玩转地形剖面分析与可视化 当我们谈论地理空间分析时&#xff0c;很多人首先想到的是绘制精美的地图。但GMT&#xff08;Generic Mapping Tools&#xff09;的真正魅力在于它强大的地理计算能力。本文将带你超越基础绘图…...

编程新知 2026/5/25 17:50:35

Arduino土壤湿度监测仪制作：从传感器原理到自动灌溉实现

1. 项目概述&#xff1a;用Arduino Uno和LCD屏打造你的土壤湿度监测仪作为一个喜欢在阳台种点番茄、辣椒的业余园丁&#xff0c;我经常为浇水这事儿头疼。浇多了怕烂根&#xff0c;浇少了又怕旱着&#xff0c;光靠手指插土里感觉&#xff0c;实在是不准。后来玩上了Arduino&…...

编程新知 2026/5/27 0:06:55

Midjourney模糊效果深度拆解（从--stylize到--sref的光学模拟原理揭秘）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Midjourney模糊效果的本质与视觉认知基础 Midjourney 中的模糊效果并非图像后处理意义上的高斯模糊&#xff08;Gaussian Blur&#xff09;&#xff0c;而是由扩散模型在潜空间中对高频细节进行概率性抑制所…...

编程新知 2026/5/25 15:11:51

tree 命令

tree 命令 tree 命令用于以树状图的形式列出目录下的文件。 1 Linux 安装 tree 命令 # CentOS sudo yum -y install tree # Ubuntu sudo apt -y install tree2 Windows 安装 tree 命令 Windows 10 以上 CMD 和 PowerShell 已经内置了 tree 命令&#xff0c;可以直接使用。 …...

编程新知 2026/5/25 13:21:10