vue.js를 사용한 라이브러리 관리 플랫폼 구축을 위한 기술 솔루션-JS 튜토리얼-php.cn

vue.js를 사용한 라이브러리 관리 플랫폼 구축을 위한 기술 솔루션

php中世界最好的语言

풀어 주다： 2018-04-16 11:08:47

원래의

1240명이 탐색했습니다.

이번에는 vue.js로 라이브러리 관리 플랫폼을 구축하기 위한 기술적인 솔루션을 소개하겠습니다. vue.js로 라이브러리 관리 플랫폼을 구축할 때 주의사항은 무엇인가요?

Vue.js는 매우 인기 있는 JavaScript MVVM(Model-View-ViewModel) 라이브러리로, 데이터 기반 및 구성 요소화된 아이디어로 구축되었습니다. Angular.js와 비교하여 Vue.js는 더 간단하고 이해하기 쉬운 API를 제공하므로 Vue.js를 빠르게 시작하고 사용할 수 있습니다.

지난 호에서는 Vue의 기본 구문에 대해 간략하게 설명했습니다. 이번에는 작은 프로젝트를 수행하고 간단한 라이브러리 관리 플랫폼을 구축하여 이 언어의 놀라운 사용법을 더 깊이 이해할 것입니다.

1. 데모 스타일

먼저 간단한 데모 스타일을 구축해야 합니다. 명확하고 간결한 페이지를 빠르게 구축할 수 있는 부트스트랩을 사용하는 것이 좋습니다.

제 코드 일부를 공유하겠습니다.

<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 인스턴스를 만듭니다.

rreee

데이터에는 마음대로 입력할 수 있는 일부 초기 데이터가 포함되어 있습니다.

3. HTML에 다양한 명령어 추가

Vue의 핵심은 뷰 레이어에 중점을 두고 있다고 말씀드렸으니, 지침이 가장 중요한 단계입니다.

그런데 설명서가 난잡하게 배포되기 때문에 코드를 전부 직접 첨부한 뒤 하나씩 설명을 합니다.

rreee

먼저 ID 앱을 사용하여 vue 인스턴스를 DOM 노드에 마운트합니다. 이러한 기본 내용이 이해되지 않으면 Vue에 대한 기본 지식을 자세히 소개하는 지난 블로그로 이동하세요.

아래 표에서는 vue 인스턴스 데이터의 모든 데이터가 tr에서 v-for 루프를 통해 테이블에 로드됩니다.

주의 깊은 독자라면 내가 v-for 이전에 v-cloak을 썼다는 것을 알아차렸을 것입니다.

Angular 및 Vue와 같은 프레임워크를 사용한 사람들은 {{}}를 사용하여 데이터를 바인딩할 때 페이지를 새로 고칠 때 원본 코드가 깜박인다는 것을 모두 알고 있어야 합니다.

정보의 양이 상대적으로 많으면 이 경험은 의심할 여지 없이 매우 나쁩니다. 이때 v-cloak 명령은 관련 인스턴스가 컴파일될 때까지 요소에 남아 있습니다.

[v-cloak] { display: none }와 같은 CSS 규칙과 함께 사용되는 경우 이 지시문은 인스턴스가 준비될 때까지 컴파일되지 않은 Mustache 태그를 숨깁니다.

이는 새로 고침 시 페이지에 글자가 깨져서 나타나는 문제를 해결합니다.

아래 v-if와 v-else는 다양한 명령어를 연습하기 위한 것이므로 버튼이 생성될 때 두 가지 색상을 차례로 생성할 수 있습니다~

그리고 v-model은 입력에 내용을 입력할 때 입력 내용을 동적으로 획득하는 것입니다.

같은 말인데, 이러한 기본 지침을 모르신다면 제 마지막 블로그에 가서 확인해 보세요.

나쁘지 않아요~ 다음으로 각 기능에 대한 이야기를 시작하겠습니다.

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
 }]
 }
 });

로그인 후 복사

이것은 함수를 추가하는 것입니다. 위로 이동하여 vue 인스턴스의 데이터에 있는 코드를 살펴볼 수 있습니다.

실제로 단 몇 줄의 코드만으로 Vue의 위력은 충분히 발휘되었습니다.

입력 상자에 v-model을 바인딩했기 때문에 입력한 내용은 책 개체와 동적으로 동기화됩니다.

이 함수의 원리는 book 객체의 id에 값을 할당한 후 v-model을 통해 입력 상자에 동적으로 바인딩된 데이터, 즉 우리가 입력한 데이터를 books 배열에 밀어넣는 것입니다.

最后将book对象清空，也就是把我们的输入框清空了。

区区3行代码，信息的录入就完成了，是不是很神奇呢。

哦对了，在vue实例中，this指向的就是本身这个vue实例，对面向对象的概念没有了解的话，建议百度一下this指向问题。

下面看一下删除

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;
  }
  } 
 }

로그인 후 복사

删除的原理是取到当前books数组的长度，当前选中的那一条的下标是它的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对象也就是输入框清空。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！