Vue.js实现列表清单的操作方法


Posted in Javascript onNovember 15, 2017

一、Vue.js简要说明

Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时,会自动更新到ViewModel.反之亦然,View与ViewModel之间通过数据双向绑定(data-binding)建立联系,如下图所示

Vue.js实现列表清单的操作方法

Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦),因此我们只需关心数据的操作,DOM的视图的更新等一系列事情,Vue会帮我们自动搞定。

Vue.js实现列表清单的操作方法

如通过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 优雅实现任务列表效果图预览请点击

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实现列表清单的操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
js日期时间补零的小例子
Mar 05 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 #Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 #Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 #Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 #Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 #Javascript
JavaScript函数绑定用法实例分析
Nov 14 #Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 #Javascript
You might like
PHP $_SERVER详解
2009/01/16 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python文件处理
2016/02/29 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
Python读取stdin方法实例
2019/05/24 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
jupyter notebook清除输出方式
2020/04/10 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
煤矿班组长的职责
2013/12/25 职场文书
小学语文教学反思范文
2016/03/03 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
python实现简单的聊天小程序
2021/07/07 Python