【后端速成 Vue】第一个 Vue 程序

1、为什么要学习 Vue?

为什么使用 Vue? 回想之前,前后端交互的时候,前端收到后端响应的数据,接着将数据渲染到页面上,之前使用的是 JavaScript 或者 基于 JavaScript 的 Jquery,但是这两个用起来还是不太方便,而使用 Vue 往 html 页面中填充数据,是非常方便的,至于方便在哪里,随着往后的学习,会越发明显。

简单了解 Vue 两个特性:

1. 数据驱动视图

数据的变化会 驱动 视图自动更新,这样一来,程序员只需要把数据维护好,至于页面的结构则会自动被 Vue 渲染出来。 

理解页面依赖的数据,通常页面依赖的数据是从后端查数据库来的,这里的页面依赖数据也是从后端来的,可能这个数据被放到一个 js 对象中,当这个 js 对象发生改变了,vue 就会监听到数据变化,也就会把新的数据渲染到页面上。

2. 双向数据绑定

在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动把用户填写的内容同步到数据源。

这里页面依赖的数据和上面所讲述的相同,双向数据绑定有什么好处呢?当用户填的表单数据发生变化,Vue 就会自动同步到 js 中,此时程序员就不用去操作 DOM 树来获取表单元素的最新值了。

有了上面的认识,现在来了解,Vue 是什么?对于后端程序员来说,学习 Vue 需要学习到哪个阶段?

Vue 是一个用于构建用户界面的渐进式框架

在 Vue 中,你基本不会看到去操作 DOM 树,只需要管理好数据即可,对于后端程序员,你只需要能使用 Vue 写出几个 demo 就可以了。

现在就来开始写下第一段 Vue 代码吧!

2、第一个 Vue 程序

1. 创建 Vue 实例,初始化渲染:

准备容器,Vue 所管理的范围:

<div id="app"><!-- 编写需要渲染的代码逻辑,  --><!-- 创建需要渲染数据的变量 -->{{ msg }}
</div>

2. 引入 Vue 包(去官网复制cdn时注意选择开发版本/生产版本):

开发版本:包含了完整的警告和调试模式(学习推荐)

生产版本:删除了警告,占用空间更小了

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

当我们引入了这个 VueJS 包,在全局环境,就有了 Vue 构造函数了。

3. 创建 Vue 实例:

const app = new Vue({el: '#app',data: {msg: 'Hello Vue!'}
})

new Vue(),创建 Vue 实例,通过里面的 el 配置选择器,指定 Vue 管理的是哪个容器,通过 data 给该容器中的指定变量提供数据。

完整代码如下:

<!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"><!-- 编写需要渲染的代码逻辑,  --><!-- 创建需要渲染数据的变量 -->{{ msg }}</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>const app = new Vue({el: '#app',data: {msg: 'Hello Vue!'}})
</script>
</html>

渲染结果:

如果此时 #app 这个容器中还想添加一个 h1 标签,里面写上程序猿教你打篮球呢?此时相信肯定难不倒各位,直接举一反三即可:

<!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"><!-- 编写需要渲染的代码逻辑,  --><!-- 创建需要渲染数据的变量 -->{{ msg }}<h1>{{ blogname }}</h1></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>const app = new Vue({el: '#app',data: {msg: 'Hello Vue!',blogname: '程序员教你打篮球'}})
</script>
</html>

3、插值表达式

插值表达式是 Vue 的模板语法,也就是上述代码中的 {{ }} 

重点:利用表达式进行插值,渲染到页面中

那既然这个是表达式,是不是也就意味着可以被求值?是的,于是后面可能会见到这样的代码:

<p>{{ age >= 18 ? '成年啦!' : "小屁孩!" }}</p>
<p>{{ person.name }}</p>
<p>{{ name.toUpperCase() }}</p>

使用插值表达式注意点:

● 使用的数据必须存在(在 Vue 构造方法配置项 data 中声明)

● 支持的是表达式,并非语句,不支持 if for 等

● 不能在标签属性中使用 {{ }} 插值,如:

<a href="{{ url }}"></a>
<p title="{{ blog-title }}"></p>

4. 再谈 Vue 响应式

const app = new Vue({el: '#app',data: {msg: 'Hello Vue!'}
})

这里的 msg 数据其实已经是响应式数据了,文章开头说过,当页面依赖数据发生变化,Vue 则会监听到并自动渲染页面,此时如果将 msg 里的数据进行修改,Vue 也会自动渲染新的数据到页面上!

如何访问修改 data 中的数据呢?直接使用 Vue 实例.属性名即可,拿上面举例说:

访问:app.msg

修改:app.msg = "Hello JS!"

同时也能得出,data 中的数据,是会被添加到 Vue 实例上的。

使用 Vue 开发,关注业务的核心逻辑,根据业务修改数据即可。


下期预告:【后端速成Vue】初识指令(上)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/47656.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uni-app 打包生成签名Sha1

Android平台打包发布apk应用&#xff0c;需要使用数字证书&#xff08;.keystore文件&#xff09;进行签名&#xff0c;用于表明开发者身份。 可以使用JRE环境中的keytool命令生成。以下是windows平台生成证书的方法&#xff1a; 安装JRE环境&#xff08;推荐使用JRE8环境&am…

yolov8模型转onnx模型 和 tensorRT 模型

转onnx模型 在 安装好 pip install onnxruntime-gpu pip install onnx onnxconverter-common 出现 No module named cpuinfo 错误&#xff0c;通过安装&#xff1a; pip install py-cpuinfo 解决该问题。 import sys # 即 ultralytics文件夹 所在绝对路径 sys.path.app…

STM32 GPIO复习

GPIO General Purpose Input Output&#xff0c;即通用输入输出端口&#xff0c;简称GPIO。 负责采集外部器件的信息或控制外部器件工作&#xff0c;即输入输出。 不同型号&#xff0c;IO口数量可能不一样&#xff0c;可通过选型手册快速查询。 能快速翻转&#xff0c;每次翻…

Crimson:高性能,高扩展的新一代 Ceph OSD

背景 随着物理硬件的不断发展&#xff0c;存储软件所使用的硬件的情况也一直在不断变化。 一方面&#xff0c;内存和 IO 技术一直在快速发展&#xff0c;硬件的性能在极速增加。在最初设计 Ceph 的时候&#xff0c;通常情况下&#xff0c;Ceph 都是被部署到机械硬盘上&#x…

vellum (Discovering Houdini VellumⅡ柔体系统)学习笔记

视频地址&#xff1a; https://www.bilibili.com/video/BV1ve411u7nE?p3&spm_id_frompageDriver&vd_source044ee2998086c02fedb124921a28c963&#xff08;搬运&#xff09; 个人笔记如有错误欢迎指正&#xff1b;希望可以节省你的学习时间 ~享受艺术 干杯&#x1f37b…

Vue——如何在安卓项目中加载离线vue项目

最近在做一个离线工单的功能&#xff0c;为了直接复用原来在线H5的代码&#xff0c;我希望将它放到安卓本地来加载&#xff0c;做法比较简单&#xff0c;无非就是npm run build打包&#xff0c;然后把包放到安卓项目的assets目录下&#xff0c;然后按照正常加载webview的方式加…

jira增删改查接口

安装 pip install atlassian-python-api3.40.1 若安装失败,可尝试加上清华源(-i https://pypi.tuna.tsinghua.edu.cn/simple) 使用 为了防止信息泄露&#xff0c;可将账号密码单独存放到json文件中 &#xff0c;如credential.json {"name" : "xiaoming"…

python常用

环境配置 conda Conda自动补全 在终端激活conda环境的时候按tab不能自动补全activate和环境名。安装后可用tab进行补全。 安装 conda-bash-completion 插件&#xff1a;GitHub 安装方法&#xff1a; conda install -c conda-forge conda-bash-completion常用命令 #创建虚拟…

通过几段代码,详解Python单线程、多线程、多进程

在使用爬虫爬取数据的时候&#xff0c;当需要爬取的数据量比较大&#xff0c;且急需很快获取到数据的时候&#xff0c;可以考虑将单线程的爬虫写成多线程的爬虫。下面来学习一些它的基础知识和代码编写方法。 一、进程和线程 进程可以理解为是正在运行的程序的实例。进程是拥…

Kubernetes 使用 Rancher 管理

K8S集群管理工具 只能管理单个K8S集群 kubectl命令行管理工具 dashboard&#xff08;K8S官方的UI界面图形化管理工具&#xff09; &#xff08;管理多集群很麻烦&#xff0c;切换不同集群每次需要更改kube-config文件[kubectl配置文件]&#xff0c;如果kubeadm部署每次都需…

C++ 类与对象关系、生成

C 类与对象关系、生成举例如下&#xff1a; #include <iostream>class student { public:int No;int Score; public:void setScore(int s) {Score s;}int getScore() {return Score;}void setNo(int n) {No n;}int getNo() {return No;} };int main(int argc, char *a…

bigemap如何批量添加地图?

bigemap如何批量添加地图&#xff1f; 说明&#xff1a;批量添加可以同时添加多个在线地图&#xff0c;一次性添加完成&#xff08;批量添加无法验证地址是否可以访问&#xff09;&#xff08;批量配置文件可以在官网获取&#xff09; 第一步选择地图点进去点(添加号) 第二步&…

常见前端基础面试题(HTML,CSS,JS)(七)

同源策略 浏览器有一个重要的安全策略&#xff0c;称之为同源策略 其中&#xff0c;协议、端口号、域名必须一致&#xff0c;&#xff0c;称之为同源&#xff0c;两个源不同&#xff0c;称之为跨源或跨域 同源策略是指&#xff0c;若页面的源和页面运行过程中加载的源不一致…

原生无限极目录树详细讲解

原生无限级目录树 当涉及到原生的无限级目录树&#xff0c;我们可以使用递归算法来实现。以下是一个使用 JavaScript 实现原生无限级目录树的示例 介绍 原生无限级目录树是一种常见的数据结构&#xff0c;用于组织多层级的目录或分类数据。通过递归算法&#xff0c;我们可以…

Unity框架学习--资源管理器

资源加载方案 1、Inspector窗口拖拽 在脚本中用public声明变量&#xff0c;然后在Inspector窗口把要加载的资源拖拽给该脚本的变量。 不建议在大型项目使用。在公司的项目也不要用。 如果你是独立游戏开发者&#xff0c;则可以用。 不支持热更…

Linux面试笔试题(5)

79、下列工具中可以直接连接mysql的工具有【c 】。 A.xhsell B.plsql C.navicat D.以上都不是 Navicat 是一套可创建多个连接的数据库开发工具&#xff0c; 让你从单一应用程序中同时连接 MySQL、Redis、MariaDB、MongoDB、 SQL Server、Oracle、PostgreSQL和 SQLite 。它与…

七夕给TA满分宠爱!浪漫攻略为约会加分

浪漫的七夕将至&#xff0c;无论是异地恋人还是约会情侣&#xff0c;怎么能缺少节日仪式感~精心策划的约会计划&#xff0c;让浪漫“超级加倍”。 美好的二人世界&#xff0c;共度甜蜜时光&#xff0c;当然需要提前做好攻略&#xff0c;风和日丽的好天气能为约会加分不少。在规…

ArcGIS Serve Windows下用户密码变更导致Server服务无法启动问题

问题&#xff1a; 因未知原因Windows下的Server安装账户密码变更&#xff0c;但是又忘记了密码&#xff0c;导致&#xff0c;Server服务启动失败&#xff0c;错误1069&#xff1a; 解决方法&#xff1a; 在账户管理界面&#xff0c;重置对应的arcgis账户的密码&#xff0c;…

初识Redis

简介RedisRedis安装怎么远程连接基础命令常用类型字符串类型字典类型列表类型集合类型有序集合类型 spring boot集成Redis代码操作Redis 实现一个session储存到redis持久化缓存雪崩缓存穿透缓存击穿缓存预热 项目升级之Redis储存Session 简介Redis Redis是一种内存数据存储系统…

open cv学习 (四)图像的几何变换

图像的几何变换 demo1 # dsize实现缩放 import cv2 img cv2.imread("./cat.jpg") dst1 cv2.resize(img, (100, 100)) dst2 cv2.resize(img, (400, 400)) # cv2.imshow("img", img) # cv2.imshow("dst1", dst1) # cv2.imshow("dst2&quo…