> 웹 프론트엔드 > JS 튜토리얼 > Vue의 기본 사용법

Vue의 기본 사용법

巴扎黑
풀어 주다: 2017-06-26 11:52:13
원래의
1023명이 탐색했습니다.

Vue는 요즘 인기가 너무 많아서 오늘은 간략하게 소개하겠습니다

vue란 정확히 무엇인가요?

mvvm 프레임워크를 기반으로 하며 상대적으로 작고 사용하기 쉽습니다.

        vue 공식 웹사이트:

        vue 매뉴얼 웹사이트:

Angle을 알면 vue를 배우기 쉽습니다. 기본적으로 비슷하기 때문에

vue 명령은 v-xxx를 사용합니다. Vue는 json과 결합된 html 코드 조각으로 구성되고, 새로운 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에는 배열 json 객체를 반복하는 ng-repeat가 있지만 Vue는 v-for=' val in arr'을 사용합니다. 물론 이름만 변경해도 사용법은 동일합니다.

vue 루프는 또한 json의 키 이름을 표시할 수 있는 {{$key}}를 제공합니다.

vue 이벤트:

Angular에는 물론 vue 이벤트가 있습니다. 여기에도 차이가 있습니다. 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:

입니다. 각도에서 false".vue는 v- show="true/false"와 동일합니다. true와 동일, false 표시, hide

//前边说了需要一片html代码来实现这就是我们那一片代码
로그인 후 복사

위 내용은 Vue의 기본 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿