首頁  >  文章  >  web前端  >  vue基本使用

vue基本使用

巴扎黑
巴扎黑原創
2017-06-26 11:52:131008瀏覽

現在vue非常火爆所以今天來小小介紹一下

#vue到底是什麼呢?

        它是以mvvm的框架和angular類似,較小且容易上手。

        vue官網:

        vue手冊網址:

如果你會angularular 所以非常好好學習vue了。因為說了他們基本上類似

         vue指令以v-xxx  vue由一片html代碼配合上json,new出來一個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基本使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn