前端框架Vue入坑指南（前端框架 vue）
ccwgpt 2024-09-23 04:26 23 浏览 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的指令，概念及特性。
相关推荐
- NestJS入门教程系列一
-
介绍Nest（NestJS）是用于构建高效，可扩展的Node.js服务器端应用程序的框架。它使用渐进式JavaScript，内置并完全支持TypeScript（但开发人员仍然能够使用JavaScrip...
- 【推荐】一个网盘资源搜索与转存工具，支持移动端与PC端!
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍CloudSaver是一个基于Vue3和Express的网盘资源搜索与转存开源实用工具。它支持...
- Appium原理精讲
-
目前使用Appium新版本和旧版本的企业数目都很多，而两个版本的安装过程和api的使用又有较大的区别。但是无论表面上的东东如何变化，内部原理都是一样的。在这里我给大家介绍一下appium的核心，增进大...
- Kubernetes最小部署单元Pod
-
一、Kubernetes与Pod简介在当今云计算和容器化技术盛行的时代，Kubernetes已然成为容器编排领域的中流砥柱。它是一个开源的容器编排平台，由Google基于其内部使用的Bo...
- 最常用的四种跨域解决方案
-
前置知识什么是跨域？浏览器发送的请求地址（URL）与所在页面的地址不同（端口/协议/域名其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收服务器...
- Bolt.New —— 全栈AI Web自动编程
-
Bolt.New是由StackBlitz公司推出的，全栈AI工具，代码编辑、运行、部署，通通一站式搞定。它使用WebContainers技术，无需任何本地安装或配置，在浏览器中，就可以运行完整的No...
- Nodejs Express新手教程&高手进阶
-
NodejsExpress新手教程&高手进阶Express是一个NodeJS平台的框架，主要用于构于Web服务器项目。本文将通过示例介绍适合新手入门的Express基础使用，以及高手进阶知识，如：c...
- Express.js 创建Node.js Web应用
-
Express.js是一个基于Node.js的Web应用框架，框架的设计目的是构建应用的架构和简化应用的开发。框架会解决一些通用的问题，在Express.js中，Express框架会处理如：中间件、代...
- JavaScript 的 Express.js 功能及应用场景详解
-
Express.js是一个基于Node.js的轻量级Web应用框架，主要用于快速构建服务器端应用和API。它的核心功能包括以下关键点：1.路由管理URL路径与HTTP方法映射：通过...
- nodejs的express4文件下载
-
在nodejs的express框架中,下载变得非常简单,就一个方法,res.download()首先express命令行生成项目基本框架:不会的看这里:http://blog.csdn.net/zz...
- Express 系列:快速生成一个项目
-
系列预告本系列将以一个项目入手结合相关技术细节来带领大家一起学习Express这个基于Node.js的后端框架。本文首先将介绍：如何快速的生成一个具有一定结构的Express项目。Express项目结...
- nodejs的express自动生成项目框架
-
nodejs版本为:4.X,express版本为4.X1.全局安装2个模块express、express-generator在命令行输入:npminstall-gexpressnpminsta...
- express开发(一)简介与搭建
-
上周末去了趟上海书城，不愧是上海数得上号的书城，流行的科技书应有尽有，话不多说直接上图。最经典的C语言O(∩_∩)O最流行的java(づ￣3￣)づ超酷的R语言/(ㄒoㄒ)/~~然而，身为一个坚定的前...
- Vue+Echarts可视化大屏系统后端框架搭建(附代码)
-
各位同学，大家好。上节课，前面我们讲解了Vue+Echarts前端部分的设计方法。这节课程，我们开始讲解使用Express进行后端设计的方法。01项目相关理论介绍什么是expressExpress是...
- Shopify电商API接口开发
-
Shopify电商API接口开发上线流程主要包括以下步骤。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎洽谈合作。前期准备-注册Shopify账号：在Shopify官网注册，用于后续开发测试...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- express框架 (43)
- scrapy框架 (52)
- beego框架 (42)
- java框架spring (43)
- grpc框架 (55)
- 前端框架bootstrap (42)
- orm框架有哪些 (43)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)