【Vue探索之旅】初识Vue

文章目录

前言

渐进式框架​

入门案例

完结撒花 


前言

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

渐进式框架​

Vue 是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点,Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用 Vue:

入门案例

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:

 

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

暂不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时。 

 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

<div id="app">{{ message }}
</div>

 然后再在HTML页面上写入:

<script>var app = new Vue({el: '#app',data: {message: 'Hello World!'}
})</script>

 那么Vue就会执行js部门中的message值:“Hello World!”,把message写在div中,这个语法字面意思就叫做插值表达式

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。 

除了插值表达式,我们还可以像这样来绑定元素 attribute:

<div id="app-2"><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span>
</div>
var app2 = new Vue({Javael: '#app-2',data: {message: '页面加载于 ' + new Date().toLocaleString()}
})

这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title attribute 和 Vue 实例  的 message property 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台,输入 app2.message = '新消息',就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

完结撒花 

好啦!以上就是Vue.js的入门案例了,我们从认识Vue.js,写入了第一个Vue案例 hello World!梦开始的程序,也认识插值表达式绑定元素。

注意:本章分享的Vue2,Vue官方已经对Vue2不再更新,目前最热门的就是Vue3了,但是初学者的话,简易还是从Vue2开始!

如果对博主感兴趣欢迎大家点赞+关注,添加博主联系方式一起探索哦!

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

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

相关文章

XWiki 服务没有正确部署在tomcat中,如何尝试手动重新部署?

1. 停止 Tomcat 服务 首先&#xff0c;您需要停止正在运行的 Tomcat 服务器&#xff0c;以确保在操作文件时不会发生冲突或数据损坏&#xff1a; sudo systemctl stop tomcat2. 清空 webapps 下的 xwiki 目录和 work 目录中相关的缓存 删除 webapps 下的 xwiki 目录和 work …

【实践】给proto的message添加自定义tag

背景 通常来说&#xff0c; 使用proto定义message的Field是使用下划线&#xff0c;比如&#xff1a; # proto定义 message Req {string key_name 1; }# 生成的.pb.go 中req的定义type Req struct {state protoimpl.MessageStatesizeCache protoimpl.SizeCacheun…

angular13 自定义组件全项目都可用 自存

1.定义自定义组件 使用命令创建一个组件 但删除它在你的module里的声明&#xff0c;因为会报错只能引用一次 在本组件中创建一个module文件&#xff0c;引入刚才的组件component.ts import { NgModule } from angular/core; import { CommonModule } from angular/common; im…

[ES] ElasticSearch节点加入集群失败经历分析主节点选举、ES网络配置 [publish_address不是当前机器ip]

背景 三台CentOS 7.6.1虚拟机&#xff0c; 每台虚拟机上启动一个ElasticSearch 7.17.3&#xff08;下面简称ES&#xff09;实例 即每台虚拟机上一个ES进程&#xff08;每台虚拟机上一个ES节点&#xff09; 情况是&#xff1a; 之前集群是搭建成功的, 但是今天有一个节点一…

【运维实践项目|004】:企业网络性能优化升级项目

目录 项目名称 项目背景 项目目标 项目成果 我的角色与职责 我主要完成的工作内容 本次项目涉及的技术 本次项目遇到的问题与解决方法 本次项目中可能被面试官问到的问题及答案 问题1&#xff1a;你是如何分析网络瓶颈的&#xff1f; 问题2&#xff1a;你是如何实施网…

PHP超级全局变量 | 全栈: [表单post提交数据(姓名,密码,文件)]

超级全局变量 特点&#xff1a;预定义变量无需创建 作用&#xff1a;用于存储来自执行环境的特殊信息&#xff0c;如HTTP请求数据、服务器信息、会话数据 常见类别 $_GET 用于收集表单数据&#xff0c;当表单的method为get时&#xff0c;数据会通过URL传递。例如&#xff0c…

函数编辑器调研及设计开发

前言&#xff1a;在产品研发中需要一款可嵌入web开发的代码及函数编辑器&#xff0c;本文从功能&#xff0c;扩展&#xff0c;外观/交互&#xff0c;维护/社区&#xff0c;兼容性&#xff0c;开源与否等方面考虑&#xff0c;进行对比筛选 1、编辑器统计数据 市面上编辑器有很…

Windows电脑使用Docker安装AList网盘神器并配置公网地址打造私人云存储空间

文章目录 前言1. 使用Docker本地部署Alist1.1 本地部署 Alist1.2 访问并设置Alist1.3 在管理界面添加存储 2. 安装cpolar内网穿透3. 固定Alist公网地址 前言 本文和大家分享如何在Windows系统使用Docker本地部署Alist全平台网盘神器&#xff0c;然后结合cpolar内网穿透工具实现…

全面解析:分布式光伏系统的概念、优缺点和应用

光伏发电领域中&#xff0c;分布式和集中式光伏是两种主要应用模式。集中式电站占地面积大&#xff0c;受国家土地政策制约严重&#xff0c;且我国土地资源又相当紧缺&#xff0c;而分布式光伏电站因接网便利、场地灵活等特点&#xff0c;近年来发展迅速&#xff0c;越来越多的…

P3853 [TJOI2007] 路标设置

题目描述: 题目背景 B 市和 T 市之间有一条长长的高速公路&#xff0c;这条公路的某些地方设有路标&#xff0c;但是大家都感觉路标设得太少了&#xff0c;相邻两个路标之间往往隔着相当长的一段距离。为了便于研究这个问题&#xff0c;我们把公路上相邻路标的最大距离定义为…

Linux sigfillset

#include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <signal.h> /* * 是标准C库中用于操作自定义信号集的一个函数 */ #if 0 # 用于初始化一个自定义信号集&#xff0c;将其所有信号都填充满&#xff0c;也就是将信号集中的所…

Windows安装多版本MySQL

5.7 - 配置 my.ini [client] port 3307[mysql] default-character-set utf8mb4[mysqld] port 3307 server_id 1 character-set-server utf8mb4basedir "E://MySQL/mysql5.7" datadir "E://MySQL/mysql5.7/data"# 将所有表名转换为小写字母 lower_c…

食品安全群众满意度的概念

本文由群狼调研&#xff08;湖南酒店神秘顾客&#xff09;出品&#xff0c;欢迎转载&#xff0c;请注明出处。食品安全群众满意度是指一国或地区居民对其所消费的食品安全状况的整体满意程度。食品安全群众满意度调查通常是通过对一定数量的居民进行问卷调查或采访&#xff0c;…

USE INDEX/FORCE INDEX/IGNORE INDEX使用的好,sql查询速度提升一倍

前言 在实际工作中有些时候数据库的执行就很奇怪&#xff0c;要么不用索引&#xff0c;要么用了错误的索引&#xff0c;那么在这种情况下你就可以考虑使用这些索引提示来纠正数据库的行为。 早期我们有一个表结构定义&#xff0c;上面有 A、B 两个索引。原本按照预期&#x…

美易官方:GPT-4o重磅演示后奥特曼发声

GPT-4的震撼演示犹如一道璀璨的星光&#xff0c;划破天际&#xff0c;照亮了科技领域的每一个角落。在这光芒四射的时刻&#xff0c;奥特曼&#xff0c;这位科技领域的先驱者&#xff0c;也忍不住发声&#xff0c;为我们描绘了一个激动人心的未来画卷。 虽然并未在OpenAI周一的…

RabbitMQ 面试题(三)

1. 简述RabbitMQ的Simple模式 &#xff1f; RabbitMQ的Simple模式是消息队列的基础模式&#xff0c;由一个生产者、一个队列和一个消费者组成。在这个模式下&#xff0c;生产者通过默认交换器将消息发送到队列中&#xff0c;而消费者则从该队列中取出消息进行处理。 Simple模…

SCQA表达模型:让你的表达更具吸引力(2)

一、引言 站在巨人的肩膀上&#xff0c;思维模型是前人智慧结晶&#xff0c;当我们面对相似挑战时&#xff0c;借鉴与模仿这些模型&#xff0c;往往能为我们带来意想不到的结果。 在信息爆炸的时代&#xff0c;如何高效、准确地传达信息成为了人们关注的焦点。SCQA表达模型作为…

网络网络层之(5)IPv6协议

网络网络层之(5)IPv6协议 Author: Once Day Date: 2024年5月12日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day…

Kotlin标准函数和静态方法

标准函数 with 第一个参数是一个类型或者对象&#xff0c;第二个参数是lambda表达式。其中第一个参数为第二个参数提供上下文&#xff0c;返回值是最后一行。案例代码&#xff1a; fun main() {val list mutableListOf<String>()var ret with(list) {add("1&q…

「JavaEE」多线程案例分析2:实现定时器

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;JavaEE &#x1f387;欢迎点赞收藏加关注哦&#xff01; 实现定时器 &#x1f349;简介&#x1f349;模拟实现定时器 &#x1f349;简介 定时器类似一个闹钟&#xff0c;时间到了之后就会执行…