Vue의 기본 사용법
- 巴扎黑원래의
- 2017-06-26 11:52:131003검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!