动力节点杜老师Vue笔记——Vue程序初体验
一、Vue程序初体验
我们可以先不去了解Vue框架的发展历史、Vue框架有什么特点、Vue是谁开发的，这些对我们编写Vue程序起不到太大的作用，更何况现在说了一些特点之后，我们也没有办法彻底理解它，因此我们可以先学会用，使用一段时间之后，我们再回头来熟悉一下Vue框架以及它的特点。只需要知道Vue是一个基于JavaScript（JS）实现的框架。要使用它就需要先拿到Vue的js文件。
1.1 下载并安装vue.js
第一步：打开Vue2官网，点击下图所示的“起步”：
第二步：继续点击下图所示的“安装”
第三步：在“安装”页面向下滚动，直到看到下图所示位置：
第四步：点击开发版本，并下载，如下图所示：
第五步：安装Vue：
使用script标签引入vue.js文件。就像这样：<script src=”xx/vue.js”></script>
1.2 第一个Vue程序
集成开发环境使用VSCode，没有的可以安装一个
第一个Vue程序如下：
<!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>第一个Vue程序</title> <!-- 安装vue.js --> <script src="../js/vue.js"></script>
</head>
<body> <!-- 指定挂载位置 --> <div id="app"></div> <!-- vue程序 --> <script> // 第一步：创建Vue实例 const vm = new Vue({ template : '<h1>Hello Vue!</h1>' }) // 第二步：将Vue实例挂载到指定位置 vm.$mount('#app') </script>
</body>
</html> 运行效果：
对第一个程序进行解释说明：
- 当使用script引入vue.js之后，Vue会被注册为一个全局变量。就像引入jQuery之后，jQuery也会被注册为一个全局变量一样。
- 我们必须new一个Vue实例，因为通过源码可以看到this的存在。
-
- Vue的构造方法参数是一个options配置对象。配置对象中有大量Vue预定义的配置。每一个配置项都是key:value结构。一个key:value就是一个Vue的配置项。
- template配置项：value是一个模板字符串。在这里编写符合Vue语法规则的代码（Vue有一套自己规定的语法规则）。写在这里的字符串会被Vue编译器进行编译，将其转换成浏览器能够识别的HTML代码。template称之为模板。
- Vue实例的$mount方法：这个方法完成挂载动作，将Vue实例挂载到指定位置。也就是说将Vue编译后的HTML代码渲染到页面的指定位置。注意：指定位置的元素被替换。
- ‘#app’的语法类似于CSS中的id选择器语法。表示将Vue实例挂载到id=’app’的元素位置。当然，如果编写原生JS也是可以的：vm.$mount(document.getElementById(‘app’))
- ‘#app’是id选择器，也可以使用其它选择器，例如类选择器：’.app’。类选择器可以匹配多个元素（位置），这个时候Vue只会选择第一个位置进行挂载（从上到下第一个）。
1.3 Vue的data配置项
观察第一个Vue程序，你会发现要完成这种功能，我们完全没有必要使用Vue，直接在body标签中编写以下代码即可：
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>没必要使用Vue呀</title>
</head>
<body> <h1>Hello Vue!</h1>
</body>
</html>
在Vue中有一个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>Vue选项data</title> <!-- 安装vue --> <script src="../js/vue.js"></script>
</head>
<body> <!-- 指定挂载位置 --> <div id="app"></div> <!-- vue代码 --> <script> new Vue({ data : { message : 'Hello Vue!' }, template : '<h1>{{message}}</h1>' }).$mount('#app') </script>
</body>
</html>
运行结果如下：
对以上程序进行解释说明：
- data是Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
- {{message}}是Vue框架自己搞的一个语法，叫做插值语法（或者叫做胡子语法），可以从data中根据key来获取value，并且将value插入到对应的位置。
- data可以是以下几种情况，但不限于这几种情况：
data : { name : '老杜', age : 18 } //取值： {{name}} {{age}} data : { user : { name : '老杜', age : 18 } } //取值： {{user.name}} {{user.age}} data : { colors : ['红色', '黄色', '蓝色'] } //取值： {{colors[0]}} {{colors[1]}} {{colors[2]}} -
以上程序执行原理：Vue编译器对template进行编译，遇到胡子{{}}时从data中取数据，然后将取到的数据插到对应的位置。生成一段HTML代码，最终将HTML渲染到挂载位置，呈现。
-
当data发生改变时，template模板会被重新编译，重新渲染。
1.4 Vue的template配置项
template只能有一个根元素。 请看如下代码：
<!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>Vue选项template</title> <!-- 安装vue --> <script src="../js/vue.js"></script>
</head>
<body> <!-- 指定挂载位置 --> <div id="app"></div> <!-- vue程序 --> <script> new Vue({ template : '<h1>{{message}}</h1><h1>{{name}}</h1>', data : { message : 'Hello Vue!', name : '动力节点老杜' } }).$mount('#app') </script>
</body>
</html>
执行结果
控制台错误信息：组件模板应该只能包括一个根元素。 所以如果使用template的话，根元素只能有一个。 代码修改如下：
new Vue({ template : '<div><h1>{{message}}</h1><h1>{{name}}</h1></div>', data : { message : 'Hello Vue!', name : '动力节点老杜' }
}).$mount('#app')
运行结果
template编译后进行渲染时会将挂载位置的元素替换。
template后面的代码如果需要换行的话，建议将代码写到``符号当中，不建议使用 + 进行字符串的拼接。 代码修改如下：
new Vue({ template : ` <div> <h1>{{message}}</h1> <h1>{{name}}</h1> </div> `, data : { message : 'Hello Vue!', name : '动力节点老杜' }
}).$mount('#app')运行结果
template配置项可以省略，将其直接编写到HTML代码当中。 代码如下：
<!-- 指定挂载位置 -->
<div id="app"> <div> <h1>{{message}}</h1> <h1>{{name}}</h1> </div>
</div>
<!-- vue程序 -->
<script> new Vue({ data : { message : 'Hello Vue!', name : '动力节点老杜' } }).$mount('#app')
</script>
运行结果
需要注意两点：
第一：这种方式不会产生像template那种的元素替换。
第二：虽然是直接写到HTML代码当中的，但以上程序中第3~6行已经不是HTML代码了，它是具有Vue语法特色的模板语句。这段内容在data发生改变后都是要重新编译的。
将Vue实例挂载时，也可以不用$mount方法，可以使用Vue的el配置项。 代码如下：
<!-- 指定挂载位置 -->
<div id="app"> <div> <h1>{{message}}</h1> <h1>{{name}}</h1> </div>
</div>
<!-- vue程序 -->
<script> new Vue({ data : { message : 'Hello Vue!', name : '动力节点老杜' }, el : '#app' })
</script>
执行结果
el是element单词的缩写，翻译为“元素”，el配置项主要是用来指定Vue实例关联的容器。也就是说Vue所管理的容器是哪个。
相关文章：
动力节点杜老师Vue笔记——Vue程序初体验
一、Vue程序初体验 我们可以先不去了解Vue框架的发展历史、Vue框架有什么特点、Vue是谁开发的，这些对我们编写Vue程序起不到太大的作用，更何况现在说了一些特点之后，我们也没有办法彻底理解它，因此我们可以先学会用，使…...
ajax上传图片存入到指定的文件夹并回显
html代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"js/jquery-2.1.0.js"></script> </head> <body> <form…...
cesium加载cesiumlab切的影像切片和标准TMS瓦片的区别
1.加载cesiumlab切的影像 var labImg viewer.scene.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({url:http://192.168.1.25:8080/DOMtms/{z}/{x}/{y}.png,fileExtension : "png"})); 2.标准TMS瓦片 var labImg viewer.scene.im…...
第二周P9-P22
文章目录第三章 系统总线3.1、总线的基本概念一、为什么要用总线二、什么是总线三、总线上信息的传送四、总线结构的计算机举例1、单总线结构框图2、面向CPU的双总线结构框图3、以存储器为中心的双总线结构图3.2、总线的分类1、片内总线2、系统总线3、通信走线3.3、总线特性及性…...
java反射
文章目录何为反射？反射的应用场景了解么？谈谈反射机制的优缺点优点缺点反射实战获取 Class 对象的四种方式1. 知道具体类的情况下可以使用TargetObject.class：2. 通过 Class.forName()传入类的全路径获取：3. 通过对象实例instance…...
307 Temporary Redirect 解决办法（临时重定向）
背景：java后台服务请求python服务端 java服务报错：Unexpected response status：307 python服务端报错：307 Temporary Redirect 解决：查了好久找不到什么原因，请求路径问题 请求url：http//:w…...
SpringBoot案例
SpringBoot案例5，案例5.1 创建工程5.2 代码拷贝5.3 配置文件5.4 静态资源目标 基于SpringBoot的完成SSM整合项目开发 5，案例 SpringBoot 到这就已经学习完毕，接下来我们将学习 SSM 时做的三大框架整合的案例用 SpringBoot 来实现一下。我们完…...
Android 10.0 系统framework发送悬浮通知的流程分析
1.前言 在android10.0rom定制化开发中,在原生系统的systemui中，状态栏通知，和闹钟，wifi等悬浮通知也是很重要的， 悬浮通知也是系统通知的一种，也是在frameworks中发送出来的通知，接下来就分析下10.0中的悬浮通知的发送 流程，然后就可以实现自己自定义悬浮通知的相关功…...
傅里叶谱方法-傅里叶谱方法求解二维浅水方程组和二维粘性 Burgers 方程及其Matlab程序实现
3.3.2 二维浅水方程组 二维浅水方程组是描述水波运动的基本方程之一。它主要用于描述近岸浅水区域内的波浪、潮汐等水动力学现象。这个方程组由两个偏微分方程组成，一个是质量守恒方程，另一个是动量守恒方程。浅水方程描述了具有自由表面、密度均匀、深…...
算法训练营 - 广度优先BFS
目录 从层序遍历开始 N 叉树的层序遍历 经典BFS最短路模板 经典C queue 数组模拟队列 打印路径 示例1.bfs查找所有连接方块 Cqueue版 数组模拟队列 示例2.从多个位置同时开始BFS 示例3.抽象最短路类（作图关键） 示例4.跨过障碍的最短路 从层序遍历…...
判断两个字符串是否匹配（1个通配符代表一个字符）
目录 判断两个字符串是否匹配（1个通配符代表一个字符） 程序设计 程序分析...
用css画一个csdn程序猿
效果如下： 头部 我们先来拆解一下，程序猿的结构 两只耳朵和头是圆形组成的，耳朵内的红色部分也是圆形 先画头部，利用圆角实现头部形状 借助工具来快速实现圆角效果 https://9elements.github.io/fancy-border-radius/ <div…...
Java多线程编程—wait/notify机制
文章目录1. 不使用wait/notify机制通信的缺点2. 什么是wait/notify机制3. wait/notify机制原理4. wait/notify方法的基本用法5. 线程状态的切换6. interrupt()遇到方法wait()7. notify/notifyAll方法8. wait(long)介绍9. 生产者/消费者模式10. 管道机制11. 利用wait/notify实现…...
Three.js教程：旋转动画、requestAnimationFrame周期性渲染
推荐：将NSDT场景编辑器加入你3D工具链其他工具系列：NSDT简石数字孪生基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画，初步了解three.js可以做什么，深入讲解three.js动画之前，本节课先制作一个简单的…...
租车自驾app开发有什么作用?租车便利出行APP开发
在线租车APP有哪些优势，租车APP开发的基本功能，租车自驾app开发有什么作用?租车便利出行APP开发，租车服务平台小程序有哪些功能，租车软件开发需要多少钱，租车app都有哪些，租车平台定制开发，租车…...
linux shell 文件分割
split 按照 10m 大小进行分割 split -b 10m large_file.bin new_file_prefix...
智慧农业系统开发功能有哪些？
农业从古至今都是备受关注的话题，新时代背景下农业发展已经融合了互联网，数字化技术等新型发展方式，形成了农业物联网管控系统，让农业生产更加科技化、智能化、高效化，对农业可持续发展有巨大的推动作用。所以…...
【C语言】 指针的进阶 看这一篇就够了
目录 1.字符指针 2.数组指针 3.指针数组 4.数组传参和指针传参 5.函数指针 6.函数指针数组 7.指向函数指针数组的指针 8.回调函数 9.qsort排序和冒泡排序 1.字符指针 让我们一起来回顾一下指针的概念！ 1.指针就是一个变量，用来存放地址，地址…...
redis set list
Listlist: 插入命令：lpush / rpush 查看list列表所有数据(-1 表示最后一个)：lrange key 0 -1 查看列表长度(key 不存在则长度返回0 ): llen key list长度 获取下表 为 0 的元素 修改下标为0的元素，改为haha 移除列表的第一个元素 或最后一…...
如何解决DNS劫持
随着互联网的不断发展，DNS(域名系统)成为了构建网络基础的重要组成部分。而DNS遭到劫持，成为一种常见的安全问题。那么DNS遭到劫持是什么意思呢?如何解决DNS劫持问题呢?下面就让小编来为您一一解答。 DNS遭到劫持是什么意思? DNS遭到劫持指的是黑客通…...
零基础玩转OpenClaw：Qwen3-32B镜像快速入门5个示例
零基础玩转OpenClaw：Qwen3-32B镜像快速入门5个示例 1. 为什么选择OpenClawQwen3-32B组合？ 去年冬天，当我第一次看到同事用自然语言命令电脑自动整理桌面文件时，仿佛打开了新世界的大门。经过两周的折腾，我终于在本地…...
比迪丽LoRA模型Mathtype式交互：设计公式化提示词编辑器提升创作精度
比迪丽LoRA模型Mathtype式交互：设计公式化提示词编辑器提升创作精度 不知道你有没有过这样的经历：面对一个功能强大的AI绘画模型，比如集成了各种LoRA的比迪丽，脑子里明明有非常具体的画面，但就是不知道该怎么用文字描…...
PyCharm远程调试避坑指南：从数据集同步到依赖安装，搞定AuToDL服务器上的代码运行
PyCharm远程调试避坑指南：从数据集同步到依赖安装，搞定AuToDL服务器上的代码运行 在深度学习项目的实际开发中，本地环境往往难以满足大规模计算需求。许多开发者选择将代码迁移到AuToDL等云服务器上运行，却常常在远程调试环节遇到…...
Z-Image-Turbo_Sugar脸部Lora模型轻量化：基于.NET框架的推理引擎封装
Z-Image-Turbo_Sugar脸部Lora模型轻量化：基于.NET框架的推理引擎封装 最近在做一个C#的桌面工具，需要集成一个AI换脸功能。网上找了一圈，发现Z-Image-Turbo_Sugar这个脸部Lora模型效果不错，但官方只提供了Python的推理脚本。对于…...
从STM32开发手册中快速定位信息：文脉定序系统的嵌入式应用联想
从STM32开发手册中快速定位信息：文脉定序系统的嵌入式应用联想 作为一名在嵌入式领域摸爬滚打多年的工程师，我深知那种在动辄上千页的芯片手册里“大海捞针”的痛苦。比如，当你需要配置一个特定的定时器中断，或者想确认某个GPIO引…...
KittenTTS终极指南：如何在CPU上实现25MB轻量级TTS语音合成
KittenTTS终极指南：如何在CPU上实现25MB轻量级TTS语音合成 【免费下载链接】KittenTTS State-of-the-art TTS model under 25MB 😻 项目地址: https://gitcode.com/gh_mirrors/ki/KittenTTS KittenTTS是一款革命性的轻量级文本转语音工具&#…...
2025年Cursor免费续杯终极指南：绕过限制的自动化方案
1. 为什么需要Cursor免费续杯方案 作为一个长期使用AI编程工具的老用户，我完全理解学生和独立开发者面临的困境。Cursor作为一款优秀的AI编程助手，确实能大幅提升开发效率，但每月150次的免费额度对于项目开发来说实在捉襟见肘。特别是在调试和…...
Fish Speech 1.5开源大模型落地：为乡村学校定制方言普通话双语教学语音
Fish Speech 1.5开源大模型落地：为乡村学校定制方言普通话双语教学语音 想象一下，在偏远山区的教室里，孩子们正跟着一个亲切的“本地老师”学习普通话。这位老师不仅能说一口标准的普通话，还能用孩子们熟悉的家乡方言进行解释和互…...
CodeSys自定义HTML5控件：从零构建到工程实践
1. 为什么需要自定义HTML5控件？ 在工业自动化领域，可视化监控是设备管理的重要环节。CodeSys作为主流的工业控制开发平台，其WebVisu功能虽然提供了基础控件库，但在实际项目中经常会遇到这样的尴尬：标准控件无法满足特定…...
DASD-4B-Thinking效果对比：在HumanEval代码生成任务中超越Qwen2.5-7B
DASD-4B-Thinking效果对比：在HumanEval代码生成任务中超越Qwen2.5-7B 1. 为什么这个40亿参数模型值得关注？ 你可能已经用过不少大模型，但有没有遇到过这种情况：写一段Python函数时，模型直接给出答案，却跳…...