用vue做todolist】的更多相关文章

<template> <div class="hello"> <div style="height:25px;line-height:25px;color:#a26777">This is Todos</div> <input type="text" style="width: 100%;height: 30px;border: 1px solid #a26777;padding:…
目录结构 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <bo…
公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周知,单页面程序优点是在页面初始化时加载相应的HTML.JavaScript 和 CSS,一旦页面加载完成了,就不用再做其他的加载和跳转了,极大的提升了页面的流畅性,提供良好的用户体验.那么问题来了,把所有东西都放在初始化的时候做,就造成了页面首次加载需要更长的等待时间.而对于那些作为app内嵌的页面…
用vue做应用最好的还是组件的复用上次做饿了吗的app封装了一个评分star的组件只要引入组件传入size大小和score分数就行了,这次做豆瓣直接就就用上了不用重复写代码.不过vue做单页应用全部挂在app.vue组件上并不能真正的实现多页面跳转这种假跳转比原生app差.我开始在app.vue里面写了个导航选择 热门电影 和 高评分 结果在弄详情页的时候直接设z-indx覆盖是没用的那两个导航栏直接无视z-index穿透显示出来,还有我开始发现router-link跳转居然能传对象我把主页的电…
使用vue做项目需要用到node.js的npm来管理包 所以我们需要先下载node.js然后通过node的npm来管理包  安装完 nodejs后 我们需要执行 npm install vue-cli -g 来安装一个全局的客户端的的vue 然后可以查看node的版本 node -v 然后安装一个webpack npm install webpack -g -g都是全局安装 然后初始化webpack并建立我们的项目文件夹 vue init webpack +项目文件夹 按照上面的来安装 然后如果…
html <input type='text' v-model="todoItem" v-on:keyup.enter='addItem'> <ul> <li v-for="(item,index) in items" is="todo-list" v-bind:info="item" v-on:remove="removeItem(index)"></li>…
Vue 做项目经验 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index.js文件port 改变首页面在main.js const routes = [{ path: '/', component: gnlb } 大概在100行 编辑代码时的一些经验和坑 Vue相关经验 1. 引入自己编写的标签需要在当前页面import标签名from文件路径,注入进来之后再下面的 co…
Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计等有基础的了解的话,可以跳过下面这部分. 源码目录设计 Vue.js 的源码都在 src 目录下,其目录结构如下. src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc #…
最近做了两个vue项目,算上之前做的两个项目,总共有四个vue项目的经验了,但是总体来说写的代码质量不是很高,体现在以下几点 1.代码没有高效的复用 自从使用vue做项目之后,以前使用面向过程变成的习惯随之被面向对象取代了,这是一个很好的转变,让代码看起来不是那么混乱了,但是不混乱并不代表质量高,比如实现一个检验输入是否有效的功能写的代码很长,而且重复代码很多例如: function checkInput(data) {let isTrue;if(!data.date) { this.$mess…
vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指定内容(v-on+splice索引) 统计:统计信息个数(v-text+length) 清空:点击删除所有信息(v-on) 隐藏:没有数据时,隐藏元素(v-show/v-if+数组非空) <template> <div id="app"> <div id=&q…