时间:2021-07-01 10:21:17 帮助过:16人阅读
相关视频教程推荐:Vue.js 教程推荐:2018最新的5个vue.js视频教程精选
1.本篇文章使用的vue版本是2.4.2,可能会和新版有不一样的地方,大家要注意。
2.现在我也是假设您有基础的html,css,javascript的知识,也已经看过了官网的基本介绍,对vue有了一个大概的认识了,了解了常用的vue指令(v-model,v-show,v-if,v-for,v-on,v-bind等)!如果刚接触前端的话,你看着文章可能会蒙圈,建议先学习基础,掌握了基础知识再来看!
3.下面的实例,建议大家边看文章边动手做!这样思路会非常清晰,不易混乱!也不会觉得文章长(文章长是为了让大家看得更信息,贴了很多重复的代码,这些代码。html,css等完全可以跳过看)。如果只看文章,你可能未必会看完,因为文章我讲得比较细,比较长!
4.这几个实例,摘自我自己的平常练习的项目,代码已经提到github上面了(vue-demos)。欢迎大家star。!
2.什么是vue
vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架。相比angular和react,vue更加轻巧、高性能、也很容易上手。大家也可以移步,看一下vue的介绍和核心功能官网介绍。简单粗暴的理解就是:用vue开发的时候,就是操作数据,然后vue就会处理,以数据驱动去改变DOM(不知道有没有理解错,理解错了指点下)。
下面就是一个最简单的说明例子
代码如下
html <div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> js new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
相信也不难理解,就是input绑定了message这个值,然后在input修改的时候,message就改了,由于双向绑定,同时页面的html({{ message }})进行了修改!
好,下面进入例子学习!
3.选项卡
原理分析和实现
这个很简单,无非就是一个点击切换显示而已。但是大家也要实现。如果这个看明白了,再看下面两个!这个实例应该只是一个热身和熟悉的作用!
这个的步骤只有一步,原理也没什么。我直接在代码打注释,看了注释,大家就明白了!
完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> body{ font-family:"Microsoft YaHei"; } #tab{ width: 600px; margin: 0 auto; } .tab-tit{ font-size: 0; width: 600px; } .tab-tit a{ display: inline-block; height: 40px; line-height: 40px; font-size: 16px; width: 25%; text-align: center; background: #ccc; color: #333; text-decoration: none; } .tab-tit .cur{ background: #09f; color: #fff; } .tab-con div{ border: 1px solid #ccc; height: 400px; padding-top: 20px; } </style> <body> <div id="tab"> <div> <!--点击设置curId的值 如果curId等于0,第一个a添加cur类名,如果curId等于1,第二个a添加cur类名,以此类推。添加了cur类名,a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式--> <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a> <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a> <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a> <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a> </div> <div> <!--根据curId的值显示div,如果curId等于0,第一个div显示,其它三个div不显示。如果curId等于1,第二个div显示,其它三个div不显示。以此类推--> <div v-show="curId===0"> html<br/> </div> <div v-show="curId===1"> css </div> <div v-show="curId===2"> javascript </div> <div v-show="curId===3"> vue </div> </div> </div> </body> <script src="vue.min.js"></script> <script> new Vue({ el: '#tab', data: { curId: 0 }, computed: {}, methods: {}, mounted: function () { } }) </script> </html>
VUE的使用方法大概就是这些了,通过这个案列相信你也对vue有一些了解了,更多精彩请关注Gxl网其它相关文章!
相关阅读:
怎样用CSS3和JS做出上升的方块动态背景
CSS3的主要功能应用
CSS3中过渡动画怎么使用
以上就是前端的VUE怎么使用的详细内容,更多请关注Gxl网其它相关文章!