一、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模式关系图不难理解）
<!DOCTYPE html>
<html>
<head>
<title>Vue.js数据的双向绑定</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=\"请任意输入\" class=\"form-control\">
<p>Message is: {{ message }}</p>
</div>
<script type=\"text/javascript\">
new Vue({ //创建Vue实例
el:\"#app\", //挂载创建Vue实例对象
data: {
message : \"Hello Vue.js\"
},
methods:{}
})
</script>
</body>
</html>
以下楼主直接绕过Vue.js基础语法，对基础语法不了解的可以查阅相关资料，从通过Vue.js优雅实现任务列表操作案例说起，将Vue.js碎片化的知识点模块整合在一块。
接下来一块体验一下Vue.js(读音 /vjuː/，类似于 view) 的小清新的/简洁的写法吧.
二、Vue.js优雅的实现任务列表的操作
Vue.js 优雅实现任务列表效果图预览请点击
三、HTML骨架CSS样式代码
使用BootStrap前端响应式开发框架，HTML骨架及CSS样式Demo如下
<!DOCTYPE html>
<html>
<head>
<title>Vue.js</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\">
<!-- 引入 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\">任务列表</p>
<ul class=\"list-group\">
<li class=\"list-group-item\">
<span title=\"编辑任务\">Vue.js - 是一套构建用户界面的渐进式框架</span>
<button title=\"移除任务\">✗</button>
<button title=\"任务完成\">✔</button>
</li>
</ul>
<form>
<div class=\"form-group\">
<label for=\"exampleInputEmail1\">任务描述</label>
<input type=\"text\" class=\"form-control\" placeholder=\"请输入你要添加的任务\" required>
</div>
<div class=\"form-group\">
<button class=\"btn btn-primary\" type=\"submit\">添加任务</button>
</div>
</form>
<p>已完成的Task</p>
<ol class=\"list-group\">
<li class=\"list-group-item\">
JavaScript高级程序设计
</li>
</ol>
</div>
</body>
</html>
四、实例化Vue及应用Vue指令Directives添加项目中
<div class=\"container\" id=\"app\" v-cloak>
<p v-show=\"remainTask.length>0\">任务列表 ({{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=\"编辑任务\">{{task.text}}</span>
<button v-on:click=\"removeTask(task)\" title=\"移除任务\">✗</button>
<button v-on:click=\"completeTask(task)\" title=\"任务完成\">✔</button>
</li>
</template>
</ul>
<form>
<div class=\"form-group\">
<label for=\"exampleInputEmail1\">任务描述</label>
<input type=\"text\" class=\"form-control\" placeholder=\"请输入你要添加的任务\" v-model=\"newTask\" required>
</div>
<div class=\"form-group\">
<button class=\"btn btn-primary\" type=\"submit\" v-on:click=\"addTask\">添加任务</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({ //创建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
<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: [\'魔兽世界\', \'暗黑破坏神Ⅲ\', \'星际争霸Ⅱ\', \'炉石传说\', \'风暴英雄\',
\'守望先锋\'
],
activeName: \'\'
},
methods: {
selected: function(gameName) {
this.activeName = gameName
}
}
})
以上所述是小编给大家介绍的Vue.js实现列表清单的操作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
© 版权声明
THE END
暂无评论内容