您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

vue基本使用

2024/3/31 5:51:29发布20次查看
现在vue非常火爆所以今天来小小介绍一下vue到底是什么呢?
        它是以mvvm的框架和angular类似,比较小巧容易上手。
        vue官网:
        vue手册网址:
如果你会angular那就很好学习vue了。因为说了他们基本类似
         vue指令以 v-xxx  vue由一片html代码配合上json,new出来一个vue实例      vue是个人开发由个人来维护
 vue由于小巧所以他比较适用于移动端,同样他和angular一样不兼容ie低版本
 使用的话一样你得先去vue官网下载他的库文件。
vue基本用法:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"> //上面说了我们需要一片html代码来展示数据 {{msg}} //这样我们就完成了一条数据的基本展示 </div>   <script src="vue.js?1.1.11"></script> <script> new vue({ //new 一个实例来展示一条基本数据 el:"#box", //el意思是element这个是固定的后边的是页面中你要展示数据到那个元素,就类似于anguar的控制器。 只是angular是写在html 页面中这个是获取到了元素然后再展示。它里面是选择器class id 标签名都是可以的。 data:{ //data也是定死的 msg:"这是一条数据" //这其中就是数据当然他是个对象你可以写多条数据,还有这里面只可以放数据不可以是函数 } }) </script> </body> </html>
常用指令:
angular有 ng-model 获取表单元素数据 vue获取表单元素数据为 v-model 和angular他也是可以进行双向数据绑定的。
angular中有 ng-repeat 来循环数组json对象 vue就不太一样了它是通过 v-for=' val in arr' 当然只是换了个名称用法还是相同的。
vue 循环同样自带{{$index}}每个的下标 他还带了一个{{$key}} 它可以显示 json的key名
vue事件:
angular拥有事件 当然vue也有的这里就有区别了 angular 是 ng-click vue是v-on:click=" fn()"
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"> //上面说了我们需要一片html代码来展示数据  <button v-on:click="fn()"></button> //v-on: 后面可以跟你任何想跟的事件。 {{msg}} //这样我们就完成了一条数据的基本展示 </div>   <script src="vue.js?1.1.11"></script> <script> new vue({ el:"#box", data:{ msg:"这是一条数据" //这里只可以是数据 }, methods:{ //这里写方法 fn:function(){ //如果你要使用上边的数据也不太一样angular是 $scope.a alert(1); alert(this.msg); //这个this代表new的实例对象所以 this.msg 就调用到上边的数据了 } } }) </script> </body> </html>
v-show:
angular 中有ng-show="true/false" vue 相同 v-show=“true/false” 同样true显示 false隐藏
//前边说了需要一片html代码来实现这就是我们那一片代码
以上就是vue基本使用的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product