Vue.js實(shí)現(xiàn)列表清單的操作方法
一、Vue.js簡要說明
Vue.js (讀音 /vjuː/，類似于 view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與前端框架Angular一樣， Vue.js在設(shè)計上采用MVVM模式，當(dāng)View視圖層發(fā)生變化時，會自動更新到ViewModel.反之亦然，View與ViewModel之間通過數(shù)據(jù)雙向綁定(data-binding)建立聯(lián)系，如下圖所示
Vue.js通過MVVM模式將視圖與數(shù)據(jù)分成兩部分(或者說視圖代碼與業(yè)務(wù)邏輯的解耦)，因此我們只需關(guān)心數(shù)據(jù)的操作，DOM的視圖的更新等一系列事情，Vue會幫我們自動搞定。
如通過v-model指令實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，用戶在輸入框中輸入任意的值，實(shí)時顯示用戶輸入message的值（對應(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 rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div class="container" id="app">
<input v-model="message" placeholder="請任意輸入" 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í)例對象
data: {
message : "Hello Vue.js"
},
methods:{}
})
</script>
</body>
</html>
以下樓主直接繞過Vue.js基礎(chǔ)語法，對基礎(chǔ)語法不了解的可以查閱相關(guān)資料，從通過Vue.js優(yōu)雅實(shí)現(xiàn)任務(wù)列表操作案例說起，將Vue.js碎片化的知識點(diǎn)模塊整合在一塊。
接下來一塊體驗(yàn)一下Vue.js(讀音 /vjuː/，類似于 view) 的小清新的/簡潔的寫法吧.
二、Vue.js優(yōu)雅的實(shí)現(xiàn)任務(wù)列表的操作
Vue.js 優(yōu)雅實(shí)現(xiàn)任務(wù)列表效果圖預(yù)覽請點(diǎ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="請輸入你要添加的任務(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高級程序設(shè)計
</li>
</ol>
</div>
</body>
</html>
四、實(shí)例化Vue及應(yīng)用Vue指令Directives添加項目中
<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="請輸入你要添加的任務(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對象實(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 中文手冊Yarn 是一個快速、可靠、安全的依賴管理工具", complete:true},
{ text : "JavaScript語言精粹", complete:false},
{ text : "JavaScript高級程序設(shè)計", 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)
}
},
//用于計算屬性，屬性的計算是基于它的依賴緩存(如vue實(shí)例中的tasks)
//只有當(dāng)tasks數(shù)據(jù)變化時,才會重新取值
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取值表達(dá)式)；
v-show 指令簡單的CSS屬性的切換，適合頻繁的切換 CSS屬性從display的切換)
v-if 指令決定頁面是否插入，相對v-show切換開銷比較大
v-on:dblclick, v-on:click 頁面事件的綁定
(如 v-on:dblclick(task) 方法名dblclick() 參數(shù)task 是的當(dāng)前點(diǎn)擊的tasks數(shù)組中的某一個對象
v-for 迭代指令 循環(huán)遍歷數(shù)組 filter 主要用于篩選符合條件的數(shù)據(jù)/日期格式化等
computed用于計算屬性，屬性的計算是基于它的依賴緩存(如vue實(shí)例中的tasks) 只有當(dāng)tasks數(shù)據(jù)變化時,才會重新取值
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>
JS
new Vue({
el: "#app",
data: {
gameNames: ['魔獸世界', '暗黑破壞神Ⅲ', '星際爭霸Ⅱ', '爐石傳說', '風(fēng)暴英雄',
'守望先鋒'
],
activeName: ''
},
methods: {
selected: function(gameName) {
this.activeName = gameName
}
}
})
總結(jié)
以上所述是小編給大家介紹的Vue.js實(shí)現(xiàn)列表清單的操作，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vuejs router history 配置到iis的方法
今天小編就為大家分享一篇vuejs router history 配置到iis的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue router 配置路由的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue3封裝自動滾動列表指令(含網(wǎng)頁縮放滾動問題）
本文主要介紹了Vue3封裝自動滾動列表指令(含網(wǎng)頁縮放滾動問題），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
elementui中el-row的el-col排列混亂問題及解決
這篇文章主要介紹了elementui中el-row的el-col排列混亂問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
詳解基于element的區(qū)間選擇組件校驗(yàn)(交易金額)
這篇文章主要介紹了詳解基于element的區(qū)間選擇組件校驗(yàn)(交易金額)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue+webpack 打包文件 404 頁面空白的解決方法
下面小編就為大家分享一篇vue+webpack 打包文件 404 頁面空白的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue-router實(shí)現(xiàn)組件間的跳轉(zhuǎn)（參數(shù)傳遞）
這篇文章主要為大家詳細(xì)介紹了vue-router實(shí)現(xiàn)組件間的跳轉(zhuǎn)，參數(shù)傳遞方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue項目如何獲取本地文件夾絕對路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue實(shí)現(xiàn)權(quán)限控制路由(vue-router 動態(tài)添加路由)
今天小編就為大家分享一篇vue實(shí)現(xiàn)權(quán)限控制路由(vue-router 動態(tài)添加路由)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue項目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10