点餐微信小程序开发_Vue.js完成列表清单的操作方

摘要: Vue.js完成目录明细的实际操作方式 Vue.js在设计方案上选用MVVM方式,当View主视图层产生转变时,会全自动升级到ViewModel.接下去根据文中给大伙儿共享Vue.js完成目录明细的实际操作...

Vue.js实现列表清单的操作方法       Vue.js在设计上采用MVVM模式,当View视图层发生变化时,会自动更新到ViewModel.接下来通过本文给大家分享Vue.js实现列表清单的操作方法,需要的朋友参考下吧

一、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="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" 
 script src="vue" /script 
 /head 
 body 
 div id="app" 
 input v-model="message" placeholder="请任意输入" 
 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="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" 
 !-- 引入 vue.js -- 
 script src="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 id="app" 
 p v-show="remainTask.length 0" 任务列表 /p 
 span title="编辑任务" Vue.js - 是一套构建用户界面的渐进式框架 /span 
 button title="移除任务" /button 
 button title="任务完成" /button 
 /li 
 /ul 
 form 
 div 
 label for="exampleInputEmail1" 任务描述 /label 
 input type="text" placeholder="请输入你要添加的任务" required 
 /div 
 div 
 button type="submit" 添加任务 /button 
 /div 
 /form 
 p 已完成的Task /p 
 JavaScript高级程序设计
 /li 
 /ol 
 /div 
 /body 
 /html 

  四、实例化Vue及应用Vue指令Directives添加项目中

 div id="app" v-cloak 
 p v-show="remainTask.length 0" 任务列表 ({{remainTask.length}}) /p 
 template v-for="task in remainTask" 
 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 
 label for="exampleInputEmail1" 任务描述 /label 
 input type="text" placeholder="请输入你要添加的任务" v-model="newTask" required 
 /div 
 div 
 button type="submit" v-on:click="addTask" 添加任务 /button 
 /div 
 /form 
 p 已完成的Task({{filterTask.length}}) /p 
 template v-for="task in filterTask" 
 {{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){ //任务完成状态
 plete = true; //设置任务完成的状态
 //用于计算属性,属性的计算是基于它的依赖缓存(如vue实例中的tasks) 
 //只有当tasks数据变化时,才会重新取值
 computed:{
 remainTask:function(){ //筛选未完成的记录
 return this.tasks.filter(function(task){ //filter过滤器
 return !plete;
 filterTask:function(){ //筛选已完成的记录
 return this.tasks.filter(function(task){
 plete;
 /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数据变化时,才会重新取值

凡科抠图:下面看下使用Vue.js实现列表选中效果

html

 div id="app" 
 div 
 a href="#!" v-for="gameName in gameNames"
 : @click="selected(gameName)" {{gameName}} /a 
 /div 
 /div 

JS

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

总结

以上所述是小编给大家介绍的Vue.js实现列表清单的操作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888

技术支持:公众号小程序