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

动力节点杜老师Vue笔记——Vue程序初体验

news 2025/12/15 7:43:11

一、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>  

运行效果：

对第一个程序进行解释说明：

  1. 当使用script引入vue.js之后，Vue会被注册为一个全局变量。就像引入jQuery之后，jQuery也会被注册为一个全局变量一样。
  2. 我们必须new一个Vue实例，因为通过源码可以看到this的存在。

  4. Vue的构造方法参数是一个options配置对象。配置对象中有大量Vue预定义的配置。每一个配置项都是key:value结构。一个key:value就是一个Vue的配置项。
  5. template配置项：value是一个模板字符串。在这里编写符合Vue语法规则的代码（Vue有一套自己规定的语法规则）。写在这里的字符串会被Vue编译器进行编译，将其转换成浏览器能够识别的HTML代码。template称之为模板。
  6. Vue实例的$mount方法：这个方法完成挂载动作，将Vue实例挂载到指定位置。也就是说将Vue编译后的HTML代码渲染到页面的指定位置。注意：指定位置的元素被替换。
  7. ‘#app’的语法类似于CSS中的id选择器语法。表示将Vue实例挂载到id=’app’的元素位置。当然，如果编写原生JS也是可以的：vm.$mount(document.getElementById(‘app’))
  8. ‘#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>  

运行结果如下：

对以上程序进行解释说明：

  1. data是Vue 实例的数据对象。并且这个对象必须是纯粹的对象 (含有零个或多个的 key/value 对)。
  2. {{message}}是Vue框架自己搞的一个语法，叫做插值语法（或者叫做胡子语法），可以从data中根据key来获取value，并且将value插入到对应的位置。
  3. data可以是以下几种情况，但不限于这几种情况： 
    data : {  name : '老杜',  age : 18  
}  
//取值：  
{{name}}  
{{age}}  data : {  user : {  name : '老杜',  age : 18  }  
}  
//取值：  
{{user.name}}  
{{user.age}}  data : {  colors : ['红色', '黄色', '蓝色']  
}  
//取值：  
{{colors[0]}}  
{{colors[1]}}  
{{colors[2]}}  

  4. 以上程序执行原理：Vue编译器对template进行编译，遇到胡子{{}}时从data中取数据，然后将取到的数据插到对应的位置。生成一段HTML代码，最终将HTML渲染到挂载位置，呈现。

  5. 当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是谁开发的&#xff0c;这些对我们编写Vue程序起不到太大的作用&#xff0c;更何况现在说了一些特点之后&#xff0c;我们也没有办法彻底理解它&#xff0c;因此我们可以先学会用&#xff0c;使…...

编程日记 2023/4/13 10:32:04

ajax上传图片存入到指定的文件夹并回显

html代码&#xff1a; <!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…...

编程日记 2023/4/13 10:27:03

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…...

编程日记 2023/4/13 10:22:02

第二周P9-P22

文章目录第三章 系统总线3.1、总线的基本概念一、为什么要用总线二、什么是总线三、总线上信息的传送四、总线结构的计算机举例1、单总线结构框图2、面向CPU的双总线结构框图3、以存储器为中心的双总线结构图3.2、总线的分类1、片内总线2、系统总线3、通信走线3.3、总线特性及性…...

编程日记 2023/4/13 10:17:01

java反射

文章目录何为反射&#xff1f;反射的应用场景了解么&#xff1f;谈谈反射机制的优缺点优点缺点反射实战获取 Class 对象的四种方式1. 知道具体类的情况下可以使用TargetObject.class&#xff1a;2. 通过 Class.forName()传入类的全路径获取&#xff1a;3. 通过对象实例instance…...

编程日记 2023/4/13 10:11:59

307 Temporary Redirect 解决办法（临时重定向）

背景&#xff1a;java后台服务请求python服务端 java服务报错&#xff1a;Unexpected response status&#xff1a;307 python服务端报错&#xff1a;307 Temporary Redirect 解决&#xff1a;查了好久找不到什么原因&#xff0c;请求路径问题 请求url&#xff1a;http//:w…...

编程日记 2023/4/13 10:06:58

SpringBoot案例

SpringBoot案例5&#xff0c;案例5.1 创建工程5.2 代码拷贝5.3 配置文件5.4 静态资源目标 基于SpringBoot的完成SSM整合项目开发 5&#xff0c;案例 SpringBoot 到这就已经学习完毕&#xff0c;接下来我们将学习 SSM 时做的三大框架整合的案例用 SpringBoot 来实现一下。我们完…...

编程日记 2023/4/13 10:01:57

Android 10.0 系统framework发送悬浮通知的流程分析

1.前言 在android10.0rom定制化开发中,在原生系统的systemui中，状态栏通知，和闹钟，wifi等悬浮通知也是很重要的， 悬浮通知也是系统通知的一种，也是在frameworks中发送出来的通知，接下来就分析下10.0中的悬浮通知的发送 流程，然后就可以实现自己自定义悬浮通知的相关功…...

编程日记 2023/4/13 9:56:56

傅里叶谱方法-傅里叶谱方法求解二维浅水方程组和二维粘性 Burgers 方程及其Matlab程序实现

3.3.2 二维浅水方程组 二维浅水方程组是描述水波运动的基本方程之一。它主要用于描述近岸浅水区域内的波浪、潮汐等水动力学现象。这个方程组由两个偏微分方程组成&#xff0c;一个是质量守恒方程&#xff0c;另一个是动量守恒方程。浅水方程描述了具有自由表面、密度均匀、深…...

编程日记 2023/4/13 9:51:55

算法训练营 - 广度优先BFS

目录 从层序遍历开始 N 叉树的层序遍历 经典BFS最短路模板 经典C queue 数组模拟队列 打印路径 示例1.bfs查找所有连接方块 Cqueue版 数组模拟队列 示例2.从多个位置同时开始BFS 示例3.抽象最短路类&#xff08;作图关键&#xff09; 示例4.跨过障碍的最短路 从层序遍历…...

编程日记 2023/4/13 9:46:54

​​​​​​​判断两个字符串是否匹配（1个通配符代表一个字符）

目录 判断两个字符串是否匹配（1个通配符代表一个字符） 程序设计 程序分析...

编程日记 2023/4/13 9:41:53

用css画一个csdn程序猿

效果如下&#xff1a; 头部 我们先来拆解一下&#xff0c;程序猿的结构 两只耳朵和头是圆形组成的&#xff0c;耳朵内的红色部分也是圆形 先画头部&#xff0c;利用圆角实现头部形状 借助工具来快速实现圆角效果 https://9elements.github.io/fancy-border-radius/ <div…...

编程日记 2023/4/13 9:36:52

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实现…...

编程日记 2023/4/13 9:31:51

Three.js教程：旋转动画、requestAnimationFrame周期性渲染

推荐&#xff1a;将NSDT场景编辑器加入你3D工具链其他工具系列&#xff1a;NSDT简石数字孪生基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画&#xff0c;初步了解three.js可以做什么&#xff0c;深入讲解three.js动画之前&#xff0c;本节课先制作一个简单的…...

编程日记 2023/4/13 9:26:50

租车自驾app开发有什么作用?租车便利出行APP开发

在线租车APP有哪些优势&#xff0c;租车APP开发的基本功能&#xff0c;租车自驾app开发有什么作用?租车便利出行APP开发&#xff0c;租车服务平台小程序有哪些功能&#xff0c;租车软件开发需要多少钱&#xff0c;租车app都有哪些&#xff0c;租车平台定制开发&#xff0c;租车…...

编程日记 2023/4/13 9:21:48

linux shell 文件分割

split 按照 10m 大小进行分割 split -b 10m large_file.bin new_file_prefix...

编程日记 2023/4/13 9:16:46

智慧农业系统开发功能有哪些？

农业从古至今都是备受关注的话题&#xff0c;新时代背景下农业发展已经融合了互联网&#xff0c;数字化技术等新型发展方式&#xff0c;形成了农业物联网管控系统&#xff0c;让农业生产更加科技化、智能化、高效化&#xff0c;对农业可持续发展有巨大的推动作用。所以&#xf…...

编程日记 2023/4/13 9:11:45

【C语言】 指针的进阶 看这一篇就够了

目录 1.字符指针 2.数组指针 3.指针数组 4.数组传参和指针传参 5.函数指针 6.函数指针数组 7.指向函数指针数组的指针 8.回调函数 9.qsort排序和冒泡排序 1.字符指针 让我们一起来回顾一下指针的概念&#xff01; 1.指针就是一个变量&#xff0c;用来存放地址&#xff0c;地址…...

编程日记 2023/4/13 9:06:44

redis set list

Listlist: 插入命令&#xff1a;lpush / rpush 查看list列表所有数据(-1 表示最后一个)&#xff1a;lrange key 0 -1 查看列表长度(key 不存在则长度返回0 ): llen key list长度 获取下表 为 0 的元素 修改下标为0的元素&#xff0c;改为haha 移除列表的第一个元素 或最后一…...

编程日记 2023/4/13 9:01:43

如何解决DNS劫持

随着互联网的不断发展&#xff0c;DNS(域名系统)成为了构建网络基础的重要组成部分。而DNS遭到劫持&#xff0c;成为一种常见的安全问题。那么DNS遭到劫持是什么意思呢?如何解决DNS劫持问题呢?下面就让小编来为您一一解答。 DNS遭到劫持是什么意思? DNS遭到劫持指的是黑客通…...

编程日记 2023/4/13 8:56:41

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/12/15 5:20:25

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/12/11 23:45:42

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/12/13 8:43:37

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/12/12 20:44:23

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/10/19 9:49:56

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/12/13 23:39:33

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29