Vue 상용 명령 상세 분석
Vue 는 MVVM(Model/View/ViewModel)의 전단 구조 로 Angular 에 비해 간단 하고 배우 기 쉬 우 며 손 이 빠 르 며 최근 2 년 동안 유행 하지 않 고 발전 속도 가 빨 라 Angular 를 뛰 어 넘 었 다.이동 단,경량급 프레임 워 크,파일 이 작고 운행 속도 가 빠르다.요즘 은 할 일이 없 으 니 Vue 라 는 유행 하 는 틀 을 배 워 서 나중에 쓸 수 있 도록 하 세 요.
지령
v-model 은 주로 폼 요소 가 양 방향 데이터 바 인 딩(Anular 중의 ng-model)을 실현 하 는 데 사용 된다v-for 형식:v-for="필드 이름 in(of)배열 json"순환 배열 이나 json(같은 angular 의 ng-repat),vue 2 부터$index 를 취소 하 는 것 을 주의해 야 합 니 다v-show 디 스 플레이 내용(같은 angular 의 ng-show)v-hide 숨겨 진 내용(같은 angular 의 ng-hide)v-if 디 스 플레이 와 숨 김(dom 요소 의 삭제 에 같은 angular 의 ng-if 기본 값 을 false 로 추가)v-else-if 는 v-if 와 연결 해 야 합 니 다v-else 는 v-if 와 연결 해 야 합 니 다.단독으로 사용 할 수 없습니다.그렇지 않 으 면 템 플 릿 컴 파일 오류 가 발생 했 습 니 다v-bind 동적 바 인 딩 작용:페이지 의 데 이 터 를 신속하게 변경 합 니 다v-on:click 은 탭 에 바 인 딩 함 수 를 줄 일 수 있 습 니 다.@이 라 고 줄 일 수 있 습 니 다.예 를 들 어 하나의 클릭 함수 함 수 를 연결 하려 면 methods 에 써 야 합 니 다v-text 해석 텍스트
v-html 태그 분석
v-bind:class 세 가지 바 인 딩 방법 1,대상 형'{red:isred}'2,3 원 형'isred?'red":"blue","3,배열 형"[{red:"isred"},{blue:"isblue"}"
기본 구성 요소 속성
new Vue({
el, // DOM element
template, // ， #id, HTML DOM element
data, //
computed, // , name = firstName + lastName
watch, // , ,
methods, //
})1.html
<div id="app">
<p>{{msg}}</p>
</div>
var app=new Vue({
el:'#app',// 、id，
//
data:{
msg:' '
},
//
methods:{
}
});실례
boottstrap+vue 를 이용 하여 간단 한 게시판 기능 을 실현 하고 추가,삭제,팝 업 모드 상 자 를 만 들 수 있 습 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" >
<script src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
myData:[],
username:'',
age:'',
nowIndex:-100
},
methods:{
add:function(){
this.myData.push({
name:this.username,
age:this.age
});
this.username='';
this.age='';
},
deleteMsg:function(n){
if(n==-2){
this.myData=[];
}else{
this.myData.splice(n,1);
}
}
}
});
};
</script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username"> :</label>
<input type="text" id="username" class="form-control" placeholder=" " v-model="username">
</div>
<div class="form-group">
<label for="age"> :</label>
<input type="text" id="age" class="form-control" placeholder=" " v-model="age">
</div>
<div class="form-group">
<input type="button" value=" " class="btn btn-primary" v-on:click="add()">
<input type="reset" value=" " class="btn btn-danger">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<h3 class="h3 text-info text-center"> </h3>
<tr class="text-danger">
<th class="text-center"> </th>
<th class="text-center"> </th>
<th class="text-center"> </th>
<th class="text-center"> </th>
</tr>
<tr class="text-center" v-for="(item,index) in myData">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index"> </button>
</td>
</tr>
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" > </button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p> ....</p>
</td>
</tr>
</table>
<!-- -->
<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> ?</h4>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm"> </button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)"> </button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
