我用vue做项目也有一段时间了,对于vue来说现在已经比较熟悉了,但是关于vue的入门文章却一直没有写过,那么今天就给大家带来几个案例,好好介绍下vue这种好用的小工具。
相关视频教程推荐:Vue.js 教程推荐:2018最新的5个vue.js视频教程精选
1.本篇文章使用的vue版本是2.4.2,可能会和新版有不一样的地方,大家要注意。
2.现在我也是假设您有基础的html,css,Vue.js 教程推荐:2018最新的5个vue.js视频教程精选的知识,也已经看过了官网的基本介绍,对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(不知道有没有理解错,理解错了指点下)。
下面就是一个最简单的说明例子
代码如下
htmljsnew Vue({ el: '#app', data: { message: 'Hello Vue!' }}){{ message }}
登录后复制
相信也不难理解,就是input绑定了message这个值,然后在input修改的时候,message就改了,由于双向绑定,同时页面的html({{ message }})进行了修改!
好,下面进入例子学习!
3.选项卡
原理分析和实现
这个很简单,无非就是一个点击切换显示而已。但是大家也要实现。如果这个看明白了,再看下面两个!这个实例应该只是一个热身和熟悉的作用!
这个的步骤只有一步,原理也没什么。我直接在代码打注释,看了注释,大家就明白了!
完整代码
nbsp;html>Title 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; }new Vue({ el: '#tab', data: { curId: 0 }, computed: {}, methods: {}, mounted: function () { } })html
cssjavascriptvue
登录后复制
VUE的使用方法大概就是这些了,通过这个案列相信你也对vue有一些了解了,更多精彩请关注【创想鸟】其它相关文章!
相关阅读:
Vue.js 教程推荐:2018最新的5个vue.js视频教程精选
Vue.js 教程推荐:2018最新的5个vue.js视频教程精选
Vue.js 教程推荐:2018最新的5个vue.js视频教程精选
以上就是前端的VUE怎么使用的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3194777.html