Vue.js는 매우 인기 있는 JavaScript MVVM(Model-View-ViewModel) 라이브러리로 데이터 중심 및 구성 요소 기반 아이디어로 구축되었습니다. Angular.js와 비교하여 Vue.js는 더 간단하고 이해하기 쉬운 API를 제공하므로 Vue.js를 빠르게 시작하고 사용할 수 있습니다. 이 기사에서는 모든 사람에게 도움이 되기를 바라며 vue.js를 사용하여 라이브러리 관리 플랫폼을 신속하게 구축하는 사례를 주로 공유합니다.
1. DEMO 스타일
먼저 간단한 데모 스타일을 구축해야 하며, 명확하고 간결한 페이지를 빠르게 구축할 수 있는 부트스트랩을 사용하는 것이 좋습니다.
내 코드를 공유하겠습니다.
<p class="container"> <p class="col-md-6 col-md-offset-3"> <h1>Vue demo</h1> <p id="app"> <table class="table table-hover "> <caption></caption> <thead> <tr> <th>序号</th> <th>书名</th> <th>作者</th> <th>价格</th> <th>操作</th> </tr> </thead> </table> <p id="add-book"> <legend>添加书籍</legend> <p class="form-group"> <label for="group">书名</label> <input type="text" class="form-control" id="group"> </p> <p class="form-group"> <label for="author">作者</label> <input type="text" class="form-control" id="author"> </p> <p class="form-group"> <label for="price">价格</label> <input type="text" class="form-control" id="price"> </p> <button class="btn btn-primary btn-block">添加</button> <button class="btn btn-primary btn-block">查询</button> </p> <p id="update-book"> <legend>修改书籍</legend> <p class="form-group"> <label for="group1">书名</label> <input type="text" class="form-control" id="group1"> </p> <p class="form-group"> <label for="author1">作者</label> <input type="text" class="form-control" id="author1"> </p> <p class="form-group"> <label for="price1">价格</label> <input type="text" class="form-control" id="price1"> </p> <button class="btn btn-primary btn-block">完成</button> </p> </p> </p> </p>
부트스트랩의 그리드 시스템과 몇 가지 간단한 구성 요소를 사용하면 간단하고 빠를 뿐만 아니라 자동으로 반응합니다.
그리고 효과도 흉하지 않고 꽤 깔끔해요.
초기 렌더링을 보여드리겠습니다.
이 CSS 프레임워크를 이해하지 못한다면 스타일을 직접 작성해도 상관 없습니다.
2. vue 인스턴스 만들기
다음으로 자체 JS 파일을 가져오고 vue 인스턴스를 만듭니다.
new Vue({ el: '#app', data: { book: { id: 0, author: '', name: '', price: '' }, books: [{ id: 1, author: '曹雪芹', name: '红楼梦', price: 32.0 }, { id: 2, author: '施耐庵', name: '水浒传', price: 30.0 }, { id: '3', author: '罗贯中', name: '三国演义', price: 24.0 }, { id: 4, author: '吴承恩', name: '西游记', price: 20.0 }] } });
데이터에는 마음대로 입력할 수 있는 일부 초기 데이터가 포함되어 있습니다.
3. HTML에 다양한 지침 추가
Vue의 핵심은 뷰 레이어에 중점을 두고 있다고 말씀드렸으니, 지침이 가장 중요한 단계입니다.
다만, 설명서가 난잡하게 배포되기 때문에 코드를 전부 직접 첨부한 후 하나씩 설명을 해드리고 있습니다.
<p id="app"> <table class="table table-hover "> <caption></caption> <thead> <tr> <th>序号</th> <th>书名</th> <th>作者</th> <th>价格</th> <th>操作</th> </tr> </thead> <tbody> <tr v-cloak v-for="book in books"> <td>{{book.id}}</td> <td>{{book.name}}</td> <td>{{book.author}}</td> <td>{{book.price}}</td> <template v-if="book.id%2==0"> <td class="text-left"> <button type="button" class="btn btn-success" @click="delBook(book)" class="del">删除</button> <button type="button" class="btn btn-success" @click="updateBook(book)">修改</button> </td> </template> <template v-else> <td class="text-left"> <button type="button" class="btn btn-danger" @click="delBook(book)" class="del">删除</button> <button type="button" class="btn btn-danger" @click="updateBook(book)">修改</button> </td> </template> </tr> </tbody> </table> <p id="add-book"> <legend>添加书籍</legend> <p class="form-group"> <label for="group">书名</label> <input type="text" class="form-control" id="group" v-model="book.name"> </p> <p class="form-group"> <label for="author">作者</label> <input type="text" class="form-control" id="author" v-model="book.author"> </p> <p class="form-group"> <label for="price">价格</label> <input type="text" class="form-control" id="price" v-model="book.price"> </p> <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button> <button class="btn btn-primary btn-block" v-on:click="searchBook()">查询</button> </p> <p id="update-book"> <legend>修改书籍</legend> <p class="form-group"> <label for="group1">书名</label> <input type="text" class="form-control" id="group1" v-model="book.name"> </p> <p class="form-group"> <label for="author1">作者</label> <input type="text" class="form-control" id="author1" v-model="book.author"> </p> <p class="form-group"> <label for="price1">价格</label> <input type="text" class="form-control" id="price1" v-model="book.price"> </p> <button class="btn btn-primary btn-block" v-on:click="updatesBook()">完成</button> </p> </p>
먼저 ID 앱을 사용하여 Vue 인스턴스를 DOM 노드에 마운트하세요. 이러한 기본 내용을 이해하지 못하면 Vue 지식의 기본 사항을 자세히 소개하는 지난 블로그로 이동하세요.
다음 표는 tr의 v-for 루프를 사용하여 vue 인스턴스 데이터의 모든 데이터를 테이블에 로드합니다.
주의 깊은 독자들은 내가 v-for 전에 v-cloak을 썼다는 것을 알아차렸을 것입니다.
Angular 및 Vue와 같은 프레임워크를 사용해 본 사람이라면 {{}}를 사용하여 데이터를 바인딩할 때 페이지를 새로 고칠 때 원본 코드가 깜박인다는 것을 알아야 합니다.
정보의 양이 상대적으로 많으면 이 경험은 의심할 여지 없이 매우 나쁩니다. 이때 v-cloak 명령은 관련 인스턴스가 컴파일될 때까지 요소에 남아 있습니다.
[v-cloak] { display: none }
과 같은 CSS 규칙과 함께 사용하면 이 지시문은 인스턴스가 준비될 때까지 컴파일되지 않은 Mustache 태그를 숨길 수 있습니다.
이렇게 하면 새로 고침하는 순간 페이지에 글자가 깨져서 많이 나타나는 문제가 해결됩니다.
아래 v-if와 v-else는 다양한 명령어를 연습하기 위한 것이므로 버튼이 생성될 때 두 가지 색상을 차례로 생성할 수 있습니다~
그리고 v-model은 입력에 콘텐츠를 동적으로 입력하기 위한 것입니다. 입력 내용을 검색합니다.
다시 한 번 말씀드리지만, 이러한 기본 지침을 모르신다면 제 지난 블로그에 가서 확인해 보세요.
v-on:click으로 묶인 기능을 하나씩 자세히 설명하겠습니다. 이제 효과를 살펴보겠습니다.
나쁘지 않아요~ 다음으로 각 기능에 대해 이야기해보겠습니다.
addBook: function() { //计算书的id this.book.id = this.books.length + 1; this.books.push(this.book); //将input中的数据重置 this.book = {}; }
함수를 추가하는 것입니다. 위로 이동하여 vue 인스턴스의 데이터에 있는 코드를 살펴볼 수 있습니다.
실제로 단 몇 줄의 코드만으로 Vue의 위력이 충분히 발휘되었습니다.
입력 상자에 v-model을 바인딩했기 때문에 입력한 내용은 책 개체와 동적으로 동기화됩니다.
이 함수의 원리는 book 객체의 id에 값을 할당한 후 v-model을 통해 입력 상자에 동적으로 바인딩된 데이터, 즉 우리가 입력한 데이터를 books 배열에 밀어넣는 것입니다.
마지막으로 책 개체를 지웁니다. 이는 입력 상자를 지운다는 의미입니다.
단 3줄의 코드만으로 정보 입력이 완료됩니다. 놀랍지 않나요?
그런데, vue 인스턴스에서는 이것이 vue 인스턴스 자체를 가리킨다. 객체지향의 개념을 이해하지 못한다면 이 포인팅 문제에 대해 Baidu를 검색해 보는 것이 좋습니다.
삭제에 대해 살펴보겠습니다
delBook: function(book) { var blength = this.books.length; this.books.splice(book.id-1, 1); for( var i = 0; i < blength ; i++) { if(book.id < this.books[i].id) { this.books[i].id -= 1; } } }
삭제의 원리는 현재 선택된 책 배열의 길이를 구해 id-1로 하고, splice 메소드를 사용하여 삭제합니다. .
그런 다음 루프를 통해 ID가 삭제된 데이터보다 큰 항목의 ID에서 1을 빼서 일련번호의 연속성을 유지합니다.
그럼 수정
updateBook: function(book) { $("#add-book").css("display","none"); $("#update-book").css("display","block"); id = book.id; }, updatesBook:function(book) { this.book.id = id; this.books.splice(id-1,1,this.book); $("#add-book").css("display","block"); $("#update-book").css("display","none"); this.book = {};
첫 번째 기능은 수정 상자를 띄우고 추가된 상자를 숨긴 다음 수정해야 할 id를 전역 변수에 바인딩하는 것입니다~
그 다음 첫 번째 기능은 실제 수정 명령.
현재 id에 방금 바인딩된 전역 변수를 할당한 후 splice 메소드를 사용하여 원본 내용을 입력 내용으로 대체합니다~
그런 다음 다시 입력 상자인 book 개체를 지웁니다.
End
이렇게 간단한 정보 입력 플랫폼이 완성되었습니다. 비록 코드가 많지는 않지만 vue의 힘을 깊이 느끼기에는 충분합니다.
향후 웹페이지의 발전 추세는 이러한 디자인 아이디어를 피해서는 안 됩니다.
관련 권장 사항:
Linux 셸에서 라이브러리 관리 시스템을 구현하는 예에 대한 자세한 설명
vue.js 라이브러리 구축을 위한 자세한 단계 관리 플랫폼
위 내용은 vue.js는 도서 관리 플랫폼의 예를 빠르게 구축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!