Vue의 기본 사용법-JS 튜토리얼-php.cn

Vue의 기본 사용법

巴扎黑

풀어 주다： 2017-06-26 11:52:13

원래의

1002명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Vue의 기본 사용법

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