Vue.js實(shí)現(xiàn)列表清單的操作方法

發(fā)布時(shí)間：2020-09-11 15:27:41 來源：腳本之家閱讀：227 作者：Avenstar 欄目：web開發(fā)

一、Vue.js簡(jiǎn)要說明

Vue.js (讀音 /vjuː/，類似于 view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與前端框架Angular一樣， Vue.js在設(shè)計(jì)上采用MVVM模式，當(dāng)View視圖層發(fā)生變化時(shí)，會(huì)自動(dòng)更新到ViewModel.反之亦然，View與ViewModel之間通過數(shù)據(jù)雙向綁定(data-binding)建立聯(lián)系，如下圖所示

Vue.js通過MVVM模式將視圖與數(shù)據(jù)分成兩部分(或者說視圖代碼與業(yè)務(wù)邏輯的解耦)，因此我們只需關(guān)心數(shù)據(jù)的操作，DOM的視圖的更新等一系列事情，Vue會(huì)幫我們自動(dòng)搞定。

Vue.js實(shí)現(xiàn)列表清單的操作方法

如通過v-model指令實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，用戶在輸入框中輸入任意的值，實(shí)時(shí)顯示用戶輸入message的值（對(duì)應(yīng)上述MVVM模式關(guān)系圖不難理解）

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js數(shù)據(jù)的雙向綁定</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div class="container" id="app">
    <input v-model="message" placeholder="請(qǐng)任意輸入" class="form-control">
    <p>Message is: {{ message }}</p>
  </div>
  <script type="text/javascript">
    new Vue({ //創(chuàng)建Vue實(shí)例
      el:"#app", //掛載創(chuàng)建Vue實(shí)例對(duì)象
      data: {
        message : "Hello Vue.js"
      },
      methods:{}
    })
  </script>
</body>
</html>

以下樓主直接繞過Vue.js基礎(chǔ)語法，對(duì)基礎(chǔ)語法不了解的可以查閱相關(guān)資料，從通過Vue.js優(yōu)雅實(shí)現(xiàn)任務(wù)列表操作案例說起，將Vue.js碎片化的知識(shí)點(diǎn)模塊整合在一塊。

接下來一塊體驗(yàn)一下Vue.js(讀音 /vjuː/，類似于 view) 的小清新的/簡(jiǎn)潔的寫法吧.

二、Vue.js優(yōu)雅的實(shí)現(xiàn)任務(wù)列表的操作

Vue.js 優(yōu)雅實(shí)現(xiàn)任務(wù)列表效果圖預(yù)覽請(qǐng)點(diǎn)擊

Vue.js實(shí)現(xiàn)列表清單的操作方法

三、HTML骨架CSS樣式代碼

使用BootStrap前端響應(yīng)式開發(fā)框架，HTML骨架及CSS樣式Demo如下

 <!DOCTYPE html>
 <html>
 <head>
   <title>Vue.js</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 引入 Bootstrap -->
   <link  rel="stylesheet">
   <!-- 引入 vue.js -->
   <script src="https://unpkg.com/vue"></script>
   <style type="text/css">
     .list-group button { 
       background: none;
       border: 0;
       color: red;
       outline: 0;
       float: right;
       font-weight: bold;
       margin-left: 5px;
     }
   </style>
 </head>
 <body>
   <div class="container" id="app"> 
     <p v-show="remainTask.length>0">任務(wù)列表</p>
     <ul class="list-group">
        <li class="list-group-item">
          <span title="編輯任務(wù)">Vue.js - 是一套構(gòu)建用戶界面的漸進(jìn)式框架</span>
          <button title="移除任務(wù)">✗</button>
          <button title="任務(wù)完成">✔</button>
        </li>
     </ul>
     <form>
       <div class="form-group">
        <label for="exampleInputEmail1">任務(wù)描述</label>
        <input type="text" class="form-control" placeholder="請(qǐng)輸入你要添加的任務(wù)" required>
       </div>
       <div class="form-group"> 
         <button class="btn btn-primary" type="submit">添加任務(wù)</button>
       </div>
     </form>
     <p>已完成的Task</p>
     <ol class="list-group">
       <li class="list-group-item"> 
        JavaScript高級(jí)程序設(shè)計(jì)
       </li>
     </ol>
   </div>
 </body>
 </html>

四、實(shí)例化Vue及應(yīng)用Vue指令Directives添加項(xiàng)目中

<div class="container" id="app" v-cloak>
     <p v-show="remainTask.length>0">任務(wù)列表 ({{remainTask.length}})</p>
     <ul class="list-group">
      <template v-for="task in remainTask">
        <li class="list-group-item">
          <span v-on:dblclick="editTask(task)" title="編輯任務(wù)">{{task.text}}</span>
          <button v-on:click="removeTask(task)" title="移除任務(wù)">✗</button>
          <button v-on:click="completeTask(task)" title="任務(wù)完成">✔</button>
        </li>
      </template>
     </ul>
     <form>
       <div class="form-group">
        <label for="exampleInputEmail1">任務(wù)描述</label>
        <input type="text" class="form-control" placeholder="請(qǐng)輸入你要添加的任務(wù)" v-model="newTask" required>
       </div>
       <div class="form-group"> 
         <button class="btn btn-primary" type="submit" v-on:click="addTask">添加任務(wù)</button>
       </div>
     </form>
     <p>已完成的Task({{filterTask.length}})</p>
     <ol class="list-group">
       <template v-for="task in filterTask">
         <li class="list-group-item"> 
           {{task.text}}
         </li>
       </template>
     </ol>
   </div>
   <script type="text/javascript">
     var app = new Vue({  //創(chuàng)建Vue對(duì)象實(shí)例
       el:"#app", //掛載DOM元素的ID
       data: {
         tasks : [
           { text : "Vue.js - 是一套構(gòu)建用戶界面的漸進(jìn)式框架", complete:false},
           { text : "Bootstrap 響應(yīng)式布局", complete:false },
           { text : "Webpack前端資源模塊化管理和打包工具", complete:false},
           { text : "Yarn 中文手冊(cè)Yarn 是一個(gè)快速、可靠、安全的依賴管理工具", complete:true},
           { text : "JavaScript語言精粹", complete:false},
           { text : "JavaScript高級(jí)程序設(shè)計(jì)", complete:true}
         ],
         newTask:"程序員的修煉之道" //默認(rèn)值
       },
       methods:{
         addTask:function(event){ //添加任務(wù)
           event.preventDefault();
           this.tasks.push({
             text: this.newTask,
             complete: false
           });
           this.newTask = "";
         },
         editTask:function(task){ //編輯任務(wù)
           //移除當(dāng)前點(diǎn)擊task
           this.removeTask(task);
 
           //更新vue實(shí)例中newTask值
           this.newTask = task.text;
         },
         removeTask: function(task){ //刪除任務(wù)
           //指向Vue實(shí)例中的tasks
           _tasks = this.tasks;
           //remove
           _tasks.forEach(function(item, index){
             if(item.text == task.text){
               _tasks.splice(index, 1);
             }
           })
         },
         completeTask: function(task){ //任務(wù)完成狀態(tài)
           task.complete = true; //設(shè)置任務(wù)完成的狀態(tài)
         }
       },
       //用于計(jì)算屬性，屬性的計(jì)算是基于它的依賴緩存(如vue實(shí)例中的tasks) 
       //只有當(dāng)tasks數(shù)據(jù)變化時(shí),才會(huì)重新取值
       computed:{
         remainTask:function(){ //篩選未完成的記錄
           return this.tasks.filter(function(task){ //filter過濾器
             return !task.complete;
           })
         },
         filterTask:function(){ //篩選已完成的記錄
           return this.tasks.filter(function(task){
             return task.complete;
           })
         }
       }
     });
   </script>

v-cloak 主要解決頁(yè)面初始化慢，亂碼的問題(如顯示頁(yè)面顯示Vue取值表達(dá)式)；

v-show 指令簡(jiǎn)單的CSS屬性的切換，適合頻繁的切換 CSS屬性從display的切換)

v-if 指令決定頁(yè)面是否插入，相對(duì)v-show切換開銷比較大

v-on:dblclick, v-on:click 頁(yè)面事件的綁定

(如 v-on:dblclick(task) 方法名dblclick() 參數(shù)task 是的當(dāng)前點(diǎn)擊的tasks數(shù)組中的某一個(gè)對(duì)象

v-for 迭代指令循環(huán)遍歷數(shù)組 filter 主要用于篩選符合條件的數(shù)據(jù)/日期格式化等

computed用于計(jì)算屬性，屬性的計(jì)算是基于它的依賴緩存(如vue實(shí)例中的tasks) 只有當(dāng)tasks數(shù)據(jù)變化時(shí),才會(huì)重新取值　

PS:下面看下使用Vue.js實(shí)現(xiàn)列表選中效果

html

<div id="app">
 <div class="collection">
  <a href="#!" class="collection-item"
    v-for="gameName in gameNames"
    :class="{active: activeName == gameName}"
    @click="selected(gameName)">{{gameName}}</a>
 </div>
</div>

new Vue({
 el: "#app",
 data: {
  gameNames: ['魔獸世界', '暗黑破壞神Ⅲ', '星際爭(zhēng)霸Ⅱ', '爐石傳說', '風(fēng)暴英雄',
   '守望先鋒'
  ],
  activeName: ''
 },
 methods: {
  selected: function(gameName) {
   this.activeName = gameName
  }
 }
})

總結(jié)

以上所述是小編給大家介紹的Vue.js實(shí)現(xiàn)列表清單的操作，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問一下細(xì)節(jié)

Vue.js實(shí)現(xiàn)列表清單的操作方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽