前端的VUE怎么使用

我用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(不知道有没有理解错,理解错了指点下)。

下面就是一个最简单的说明例子

代码如下

html
  

{{ message }}

  
jsnew Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }})

登录后复制

相信也不难理解,就是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;    }
    
                html        css        javascript        vue    
    
                
            html
        
        
            css        
        
            javascript        
        
            vue        
    
new Vue({ el: '#tab', data: { curId: 0 }, computed: {}, methods: {}, mounted: function () { } })

登录后复制

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

(0)
上一篇 2025年4月1日 02:07:56
下一篇 2025年4月1日 02:08:06

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • java中什么时候使用static

    什么时候使用: 当一个方法或者变量需要初始化加载,或者是经常被调用的时候可以加上static。用static修饰的方法可以用类名直接调用,不用的一定要先实例化一个对象然后才可以调用。 不足之处: 初始化加载,比较占内存,所以不经常用的方法,…

    2025年5月3日
    000
  • java类库怎么使用

    以使用math类库编写求算术平方根程序为例: 首先打开Java官方在线API文档 在Java API文档中查看Math类库的sqrt函数的使用方法 (推荐学习视频:java视频教程) 立即学习“Java免费学习笔记(深入)”; 打开记事本,…

    2025年5月3日 编程技术
    000
  • 如何在Laravel中使用中间件进行请求限流

    如何在Laravel中使用中间件进行请求限流 引言:在我们开发 Web 应用程序时,经常会遇到需要对用户的请求进行限制的情况,例如,限制每分钟只能发送一定数量的请求,或者限制某个接口的并发请求数量等。在 Laravel 框架中,我们可以通过…

    2025年5月3日
    000
  • Laravel表单类详解:如何正确使用

    Laravel表单类详解:如何正确使用,需要具体代码示例 作为一款流行的PHP框架,Laravel不仅提供了强大的路由系统、ORM、模板引擎等功能,还为开发者提供了方便易用的表单类。通过Laravel的表单类,开发者可以轻松创建表单、验证表…

    2025年5月2日
    000
  • 详解在React 组件中使用Echarts的正确姿势

    本文主要介绍了在react 组件中使用echarts的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化,第一反应当然是Ec…

    2025年5月1日
    000
  • html的表格比较宽溢出怎么设置

    这次给大家带来html的表格比较宽溢出怎么设置,设置不让html的表格宽溢出的注意事项有哪些,下面就是实战案例,一起来看一下。 表格如果比较宽,则有可能溢出。 比如有两个div,左和右。如果表格在右边的div中,但是它比较宽,则显示的时候很…

    编程技术 2025年5月1日
    000
  • jQuery$. 和 $().使用详解

    这次给大家带来jQuery$. 和 $().使用详解,jQuery$. 和 $().使用的注意事项有哪些,下面就是实战案例,一起来看一下。  像我这种没有经过系统学习的人总是有这样的问题:( $就是jQuery的别称 而jQuery就是jQ…

    编程技术 2025年5月1日
    000
  • 如何使用Hyperf框架进行日志记录

    如何使用Hyperf框架进行日志记录 引言:在软件开发中,日志记录是一个非常重要的功能,它能够帮助开发人员追踪错误、分析问题以及监控系统运行状态。在使用Hyperf框架进行开发时,我们可以利用其内置的日志组件来实现灵活的日志记录功能。本文将…

    2025年4月2日
    100
  • 如何使用Hyperf框架进行表单验证

    如何使用Hyperf框架进行表单验证 引言:随着Web应用程序的发展,表单验证成为了保证数据的准确性和安全性的重要环节。Hyperf框架作为一款高性能的PHP开发框架,提供了强大的表单验证功能,本文将介绍如何使用Hyperf框架进行表单验证…

    2025年4月2日
    300
  • 如何使用Hyperf框架进行微信支付

    使用Hyperf框架进行微信支付 引言:随着电子商务的发展,微信支付成为了人们日常购物、付款的主要方式之一。在开发中,如何快速集成微信支付变得尤为重要。本文将介绍如何使用Hyperf框架进行微信支付,并提供具体的代码示例。 正文: 一、准备…

    2025年4月2日
    200

发表回复

登录后才能评论