詳解Vue.js如何實作清單清單

本文主要來跟大家分享Vue.js實作清單清單的操作方法，Vue.js在設計上採用MVVM模式，當View視圖層改變時，會自動更新到ViewModel。需要的朋友參考下吧，希望能幫助大家。

一、Vue.js簡單說明

Vue.js (讀音 /vjuː/，類似 view) 是一套建構使用者介面的漸進式框架。與前端框架Angular一樣， Vue.js在設計上採用MVVM模式，當View視圖層發生變化時，會自動更新到ViewModel.反之亦然，View與ViewModel之間透過資料雙向綁定(data-binding)建立聯繫，如下圖所示

Vue.js透過MVVM模式將視圖與資料分成兩部分(或者說視圖程式碼與業務邏輯的解耦)，因此我們只要關心資料的操作，DOM的視圖的更新等一系列事情，Vue會幫我們自動搞定。

如透過v-model指令實現資料的雙向綁定，使用者在輸入框中輸入任意的值，即時顯示使用者輸入message的值（對應上述MVVM模式關係圖不難理解）

nbsp;html>


  <title>Vue.js数据的双向绑定</title>
  <meta>
  <!-- 引入 Bootstrap -->
  <link>
  <script></script>


  <p>
    <input>
    </p><p>Message is: {{ message }}</p>
  
  <script>
    new Vue({ //创建Vue实例
      el:"#app", //挂载创建Vue实例对象
      data: {
        message : "Hello Vue.js"
      },
      methods:{}
    })
  </script>

以下樓主直接繞過Vue.js基礎語法，對基礎語法不了解的可以查閱相關資料，從透過Vue.js優雅實現任務列表操作案例說起，將Vue.js碎片化的知識點模組整合在一塊。

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

    二、Vue.js優雅的實現任務列表的操作

Vue.js 優雅實現任務清單效果圖預覽請點選

    三、HTML骨架CSS樣式程式碼

#使用BootStrap前端響應式開發框架，HTML骨架及CSS樣式Demo如下

 nbsp;html>
 
 
   <title>Vue.js</title>
   <meta>
   <!-- 引入 Bootstrap -->
   <link>
   <!-- 引入 vue.js -->
   <script></script>
   <style>
     .list-group button { 
       background: none;
       border: 0;
       color: red;
       outline: 0;
       float: right;
       font-weight: bold;
       margin-left: 5px;
     }
   </style>
 
 
   <p> 
     </p><p>0">任务列表</p>
     

        
•           Vue.js - 是一套构建用户界面的渐进式框架           ✗           ✔         
     

     

       

        任务描述                 

       

           添加任务        

     

     

已完成的Task

     

       
1.           JavaScript高级程序设计        
     

       

    四、實例化Vue及應用Vue指令Directives新增專案中

<p>
     </p><p>0">任务列表 ({{remainTask.length}})</p>
     

            

     

       

        任务描述                 

       

           添加任务        

     

     

已完成的Task({{filterTask.length}})

     

             

       <script> var app = new Vue({ //创建Vue对象实例 el:"#app", //挂载DOM元素的ID data: { tasks : [ { text : "Vue.js - 是一套构建用户界面的渐进式框架", complete:false}, { text : "Bootstrap 响应式布局", complete:false }, { text : "Webpack前端资源模块化管理和打包工具", complete:false}, { text : "Yarn 中文手册Yarn 是一个快速、可靠、安全的依赖管理工具", complete:true}, { text : "JavaScript语言精粹", complete:false}, { text : "JavaScript高级程序设计", complete:true} ], newTask:"程序员的修炼之道" //默认值 }, methods:{ addTask:function(event){ //添加任务 event.preventDefault(); this.tasks.push({ text: this.newTask, complete: false }); this.newTask = ""; }, editTask:function(task){ //编辑任务 //移除当前点击task this.removeTask(task); //更新vue实例中newTask值 this.newTask = task.text; }, removeTask: function(task){ //删除任务 //指向Vue实例中的tasks _tasks = this.tasks; //remove _tasks.forEach(function(item, index){ if(item.text == task.text){ _tasks.splice(index, 1); } }) }, completeTask: function(task){ //任务完成状态 task.complete = true; //设置任务完成的状态 } }, //用于计算属性，属性的计算是基于它的依赖缓存(如vue实例中的tasks) //只有当tasks数据变化时,才会重新取值 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 主要解決頁面初始化慢，亂碼的問題(如顯示頁面顯示Vue取值表達式)；

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

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

v-on:dblclick, v-on:click 頁面事件的綁定

(如v-on:dblclick(task) 方法名稱dblclick() 參數task 是的目前點擊的tasks數組中的某一個物件

v-for 迭代指令循環遍歷陣列filter 主要用於篩選符合條件的資料/日期格式化等

computed用於計算屬性，屬性的計算是基於它的依賴快取(如vue實例中的tasks) 只有當tasks資料變化時,才會重新取值

PS:下面看下使用Vue.js實作清單選取效果

html

<p>
 </p><p>
  <a>{{gameName}}</a>
 </p>

JS

new Vue({
 el: "#app",
 data: {
  gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',
   '守望先锋'
  ],
  activeName: ''
 },
 methods: {
  selected: function(gameName) {
   this.activeName = gameName
  }
 }
})

##大家學完本文都掌握了Vue.js實作清單清單的操作方法了嗎？的圖文詳解

自訂清單項目list-style 使用小結

JavaScript如何實作Select清單內容自動捲動方法介紹

以上是詳解Vue.js如何實作清單清單的詳細內容。更多資訊請關注PHP中文網其他相關文章！