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

vue的第3篇 第一个vue程序

news 2026/3/31 10:14:01

一 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

PyAEDT终极指南：3个技巧让你快速掌握Python自动化工程仿真

PyAEDT终极指南&#xff1a;3个技巧让你快速掌握Python自动化工程仿真 【免费下载链接】pyaedt AEDT Python Client Package 项目地址: https://gitcode.com/gh_mirrors/py/pyaedt PyAEDT是Ansys Electronics Desktop&#xff08;AEDT&#xff09;的Python客户端工具包&…...

编程新知 2026/3/31 10:12:23

抖音批量下载终极指南：3分钟掌握高效无水印下载技巧

抖音批量下载终极指南&#xff1a;3分钟掌握高效无水印下载技巧 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support…...

编程新知 2026/3/31 9:32:07

3步快速解密QQ音乐加密文件：QMCDecode终极免费解决方案

3步快速解密QQ音乐加密文件&#xff1a;QMCDecode终极免费解决方案 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认…...

编程新知 2026/3/31 8:13:30

共享图书借阅系统 Java 源码 + 数据库设计完整方案

以下是一个共享图书借阅系统的Java源码与数据库设计的完整方案&#xff0c;涵盖系统架构、核心功能实现、数据库设计以及安全防护措施等方面&#xff1a;一、系统架构技术栈&#xff1a;后端&#xff1a;Spring Boot 2.x MyBatis-Plus&#xff08;简化数据库操作&#xff09;前…...

编程新知 2026/3/31 7:29:17

判断一个链表是否是环形链表

给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&#xff08;索…...

编程新知 2026/3/31 7:13:03

别再为发票报销发愁！用Python+EasyOFD库，5分钟搞定OFD转PDF/图片（附完整代码）

5分钟极速解决发票报销难题&#xff1a;PythonEasyOFD高效转换实战指南 每次月底报销时&#xff0c;面对邮箱里堆积如山的OFD格式电子发票&#xff0c;你是否也感到头疼&#xff1f;手动一张张下载、转换、打印不仅耗时耗力&#xff0c;还容易出错。今天我们就来彻底解决这个困…...

编程新知 2026/3/31 6:22:40

新手别怕！用Volatility 2.6分析WinXP内存镜像，一步步揪出隐藏的svchost木马

从零开始的内存取证实战&#xff1a;用Volatility 2.6解剖WinXP内存中的svchost木马 当你第一次接触内存取证时&#xff0c;面对黑底白字的命令行界面和陌生的术语&#xff0c;难免会感到无从下手。但别担心&#xff0c;今天我们就用一个真实的WinXP SP2内存镜像案例&#xff0…...

编程新知 2026/3/31 6:20:39

Phi-4-mini-reasoning基础教程：理解其与Phi-4-standard在架构上的关键差异

Phi-4-mini-reasoning基础教程&#xff1a;理解其与Phi-4-standard在架构上的关键差异 1. 模型定位与核心能力 Phi-4-mini-reasoning是一个专注于推理任务的文本生成模型&#xff0c;与通用型的Phi-4-standard相比&#xff0c;它在数学推导、逻辑分析和多步推理等任务上表现出…...

编程新知 2026/3/31 6:16:38

3个理由让你选择DeepSeek-Coder-V2：免费开源的AI编程助手

3个理由让你选择DeepSeek-Coder-V2&#xff1a;免费开源的AI编程助手 【免费下载链接】DeepSeek-Coder-V2 项目地址: https://gitcode.com/GitHub_Trending/de/DeepSeek-Coder-V2 从代码效率低下到开发流程革新的完整路径 在当今快节奏的软件开发环境中&#xff0c;开…...

编程新知 2026/3/31 4:39:16

Vivado 2019.2实战：手把手教你封装自己的UART串口IP核（含参数化配置避坑指南）

Vivado 2019.2实战&#xff1a;从零构建可配置UART IP核的完整指南 在FPGA开发中&#xff0c;UART通信是最基础也最常用的功能之一。每次新项目都重新编写UART驱动不仅效率低下&#xff0c;还容易引入错误。本文将带你完整经历将一个经过验证的UART发送模块封装成可配置IP核的全…...

编程新知 2026/3/31 4:23:12