zoukankan      html  css  js  c++  java
  • vue基本使用

    现在vue非常火爆所以今天来小小介绍一下

    vue到底是什么呢?

            它是以mvvm的框架和angular类似,比较小巧容易上手。

            vue官网:http://cn.vuejs.org/

            vue手册网址:http://cnvuejs.org/api/

    如果你会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"></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"></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代码来实现这就是我们那一片代码
  • 相关阅读:
    调用系统相机导致照片旋转问题的修复
    JavaLearning:日期操作类
    PHP实现事件机制实例分析
    按下葫芦起了瓢
    win系统下的eclipse连接和使用linux上的hadoop集群
    利用gradle加入构建版本
    从设计到实现,一步步教你实现Android-Universal-ImageLoader-辅助类
    I帧、P帧和B帧的特点
    tcp_tw_recycle检查tcp_timestamps的内核代码
    OBS源码编译开发
  • 原文地址:https://www.cnblogs.com/durenlong/p/7044386.html
Copyright © 2011-2022 走看看