10分钟快速入门vue.js
2024-10-19 02:01:56
Vue.js是一个轻巧、高性能、可组件化的MVVM库,一套用于构建用户界面的渐进式框架,上手简单,兼容强大。
官方文档:https://cn.vuejs.org/v2/guide/
下面我们就直接来使用一下vue:
引入vue.js:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
创建一个vue对象,绑定某个节点,该节点下的所有dom将被这个vue对象接管:
vue对象类似微信小程序,data里面的属性可以在页面上通过“{{}}”(双大括号)形式来映射,并且是双向绑定的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个vue项目</title>
</head>
<body> <div id="app"> {{msg}} </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script> var app = new Vue({
el:'#app',//接管的父类节点容器
data:{
msg:"Hello world"
} }) </script>
</body>
</html>
运行如下:
常规操作:
vue的事件可以用v-on:click来绑定,也可以简写为 @click,常规方法定义在vue对象的methods里面
vue的条件执行可以用 v-if、v-else-if、v-else来执行,v-else必须跟在v-if或v-else-if后面
vue的循环可以用 v-for 来执行
下面一起来看下这些属性的用法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是一个vue项目</title>
</head>
<body> <div id="app"> {{msg}} <button @click="changeMsg()">点击看看</button> <p v-if="score > 90">今晚出去嗨</p>
<p v-else-if="score >= 60">在家看电视</p>
<p v-else="score < 60">房间学习vue</p> <ul>
<li v-for="(item,index) in weekList">{{item}}-----{{index}}</li>
</ul>
</div> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script> var app = new Vue({
el:'#app',//接管的父类节点容器
data:{
msg:"Hello world",
score:59,
weekList:["周一","周二","周三","周四","周五","周六","周日"],
},
methods:{
changeMsg: function(){
this.msg = "Hello vue";
}
} }) </script>
</body>
</html>
运行如下:
如此,您已经掌握了vue的几个用法了,同时也体会到vue的强大之处。
vue的历史不过区区数载,但势头凶猛异常,已经有一个完整的生态体系。
更多的vue学习,最直接的就是 vue官网。
祝大家在vue的学习之路上渐行渐远,崭露头角,引领风骚~
最新文章
- cygwin E437
- wex5 实战 手指触屏插件 hammer的集成与优劣
- ios之VFL的补充(三)
- homepage左边的导航菜单怎么做的?
- Visual Studio 2015 RC Downloads
- OO的ALV隐藏工具栏的form
- WebApi HttpMsgHanler的执行顺序
- DES/des3 加密程序
- Java 实现 Domino邮箱自动注册
- list,set,map总结
- 初学者一些常用的SQL语句(一)
- IDEA写scala简单操作
- #WEB安全基础 : HTTP协议 | 0x9 GET和POST请求以及请求URI的方式
- tcp黏包
- yarn application -kill application_id yarn kill 超时任务脚本
- HDFS 命令深入浅出
- Odoo 8.0 new API 之constrains装饰
- bzoj1004: [HNOI2008]Cards(burnside引理+DP)
- 可以高度定制的代理服务器anyproxy
- Laxcus大数据管理系统2.0 (1) - 摘要和目录
热门文章
- 利用s3-test进行ceph的接口兼容性测试
- .NET 开源工作流: Slickflow流程引擎高级开发(八) -- 审批网关(ApprovalOrSplit)模式的应用
- 攻防世界-Web_php_include (四种解法)
- docker下启动单机nacos
- MathType总结编辑括号的类型(下)
- 在CorelDRAW中如何完成属性的复制
- 思维导图MindManager流程图有哪些功能
- FL studio系列教程(十二):FL Studio中如何导出音频
- web自动化测试难点 滚动条操作、日期框处理、上传文件
- 2016年第七届蓝桥杯【C++省赛B组】F、G、H、J 题解