前端框架Vue入坑指南（前端框架 vue）
ccwgpt 2024-09-23 04:26 36 浏览 0 评论
Hello World程序
写一个HTML文件内容如下:
<!DOCTYPE html>
<div id="app">
<h1>{{hello}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
hello:"Hello from Vue!"
}
});
</script>
在这里,从CDN引入了Vue库,创建了一个vue实例,和页面ID为app的元素绑定。数据hello的值填充到标签<h1>中。
在浏览器中运行效果如下
v-bind绑定指令
HTML文件内容如下：
<!DOCTYPE html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="app">
<div class="container">
<form class="mt-5">
<div class="form-group">
<label for="email">Email</label>
<input type="email" v-bind:value="email" id="email" class="form-control form-control-lg">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
email:"demo@example.com"
}
});
</script>
不用在意代码中的bootstrap样式。这里重点关注邮件input控件，数据绑定使用了vue的指令v-bind，将data中的email和HTML的email标签的value绑定起来。在第一个helloworld程序中我们可以使用双括号{{}}，但在标签中是不能使用{{}}的。
这里我们也可以将v-bind:value简写为:value
浏览器中浏览
V-model双向绑定
将上面代码中的v-bind:vlaue改为v-model，就可以完成双向绑定
<!DOCTYPE html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="app">
<div class="container">
<form class="mt-5">
<div class="form-group">
<label for="email">Email</label>
<input type="email" v-model="email" id="email" class="form-control form-control-lg">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
email:"demo@example.com"
}
});
</script>
这里我们对emai控件使用v-model指令和数据中的email进行双向绑定，并在脚本中用vm保存Vue实例。
如果在输入表单将demo@example修改为test@example.com,并在控制台打出vm.email
会看到上图中，数据vm.email会随页面输入变化。
相反，如果在控制台中输入vm.email="changeme@example.com",表单中会自动更新email控件的值。
这就是所谓的双向绑定。这是Vue中最重要的特性，保持页面控件和数据的自动同步。
方法
紧接上面的代码，修改后如下
......
<button type="submit" v-on:click="process" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el: '#app',
data: {
email:"demo@example.com"
},
methods:{
process: function(){
alert('Submitted'+this.email);
}
}
});
</script>
为提交按钮添加了指令v-on, v-on:click="process",表示点击后调用方法process，process方法在随后进行了定义。
这里点击按钮调用process方法后，页面依然会刷新，为了避免刷新可以修改process方法如下
methods:{
process: function(event){
event.preventDefault();
alert('Submitted'+this.email);
}
}
或者将process保持原样，只需要修改v-on指令为v-on:click.prevent
<button type="submit" v-on:click.prevent="process" class="btn btn-primary">Submit</button>
同v-bind一样，v-on有自己的简写方式上例中，可以简写为@click.prevent
按条件渲染页面
使用v-if指令
参考上图，在数据中添加了布尔型的数据submitted，表示表单是否已经提交。方法process中修改submitted为true。在form表单中使用v-if指令，表示只有在表单提交之前显示该表单。在h2中同样使用v-if，表示表单提交之后显示感谢信息。
在上面的代码中，我们可以将v-if 用v-show指令替换，达到同样的效果。v-if和v-show的不同在于，如果条件为假，v-if直接不渲染其中的dom，v-show只是隐藏dom，单dom实际是存在的。
总结，这里只是Vue的入门介绍，请参照Vue官方文档，了解更多Vue的指令，概念及特性。
相关推荐
- 十分钟让你学会LNMP架构负载均衡（impala负载均衡）
-
业务架构、应用架构、数据架构和技术架构一、几个基本概念1、pv值pv值(pageviews):页面的浏览量概念：一个网站的所有页面，在一天内，被浏览的总次数。(大型网站通常是上千万的级别)2、u...
- AGV仓储机器人调度系统架构（agv物流机器人）
-
系统架构层次划分采用分层模块化设计，分为以下五层：1.1用户接口层功能：提供人机交互界面（Web/桌面端），支持任务下发、实时监控、数据可视化和报警管理。模块：任务管理面板：接收订单（如拣货、...
- 远程热部署在美团的落地实践（远程热点是什么意思）
-
Sonic是美团内部研发设计的一款用于热部署的IDEA插件，本文其实现原理及落地的一些技术细节。在阅读本文之前，建议大家先熟悉一下Spring源码、SpringMVC源码、SpringBoot...
- springboot搭建xxl-job(分布式任务调度系统)
-
一、部署xxl-job服务端下载xxl-job源码：https://gitee.com/xuxueli0323/xxl-job二、导入项目、创建xxl_job数据库、修改配置文件为自己的数据库三、启动...
- 大模型:使用vLLM和Ray分布式部署推理应用
-
一、vLLM：面向大模型的高效推理框架1.核心特点专为推理优化：专注于大模型（如GPT-3、LLaMA）的高吞吐量、低延迟推理。关键技术：PagedAttention：类似操作系统内存分页管理，将K...
- 国产开源之光【分布式工作流调度系统】:DolphinScheduler
-
DolphinScheduler是一个开源的分布式工作流调度系统，旨在帮助用户以可靠、高效和可扩展的方式管理和调度大规模的数据处理工作流。它支持以图形化方式定义和管理工作流，提供了丰富的调度功能和监控...
- 简单可靠高效的分布式任务队列系统
-
#记录我的2024#大家好，又见面了，我是GitHub精选君！背景介绍在系统访问量逐渐增大，高并发、分布式系统成为了企业技术架构升级的必由之路。在这样的背景下，异步任务队列扮演着至关重要的角色，...
- 虚拟服务器之间如何分布式运行?（虚拟服务器部署）
-
在云计算和虚拟化技术快速发展的今天，传统“单机单任务”的服务器架构早已难以满足现代业务对高并发、高可用、弹性伸缩和容错容灾的严苛要求。分布式系统应运而生，并成为支撑各类互联网平台、企业信息系统和A...
- 一文掌握 XXL-Job 的 6 大核心组件
-
XXL-Job是一个分布式任务调度平台，其核心组件主要包括以下部分，各组件相互协作实现高效的任务调度与管理：1.调度注册中心（RegistryCenter）作用：负责管理调度器（Schedule...
- 京东大佬问我,SpringBoot中如何做延迟队列?单机与分布式如何做?
-
京东大佬问我,SpringBoot中如何做延迟队列？单机如何做？分布式如何做呢？并给出案例与代码分析。嗯，用户问的是在SpringBoot中如何实现延迟队列，单机和分布式环境下分别怎么做。这个问题其实...
- 企业级项目组件选型(一)分布式任务调度平台
-
官网地址：https://www.xuxueli.com/xxl-job/能力介绍架构图安全性为提升系统安全性，调度中心和执行器进行安全性校验，双方AccessToken匹配才允许通讯；调度中心和执...
- python多进程的分布式任务调度应用场景及示例
-
多进程的分布式任务调度可以应用于以下场景：分布式爬虫：importmultiprocessingimportrequestsdefcrawl(url):response=re...
- SpringBoot整合ElasticJob实现分布式任务调度
-
介绍ElasticJob是面向互联网生态和海量任务的分布式调度解决方案，由两个相互独立的子项目ElasticJob-Lite和ElasticJob-Cloud组成。它通过弹性调度、资源管控、...
- 分布式可视化 DAG 任务调度系统 Taier 的整体流程分析
-
Taier作为袋鼠云的开源项目之一，是一个分布式可视化的DAG任务调度系统。旨在降低ETL开发成本，提高大数据平台稳定性，让大数据开发人员可以在Taier直接进行业务逻辑的开发，而不用关...
- SpringBoot任务调度:@Scheduled与TaskExecutor全面解析
-
一、任务调度基础概念1.1什么是任务调度任务调度是指按照预定的时间计划或特定条件自动执行任务的过程。在现代应用开发中，任务调度扮演着至关重要的角色，它使得开发者能够自动化处理周期性任务、定时任务和异...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)