ToDoList | 易学教程

Vue（五）Vue规范

阅读更多关于 Vue（五）Vue规范

代码规范很重要 1.组件名应该始终是多个单词的，根组件 App 除外。 2.组件的 data 必须是一个函数。 // In a .vue file export default { data () { return { foo: 'bar' } } } 3.Prop 定义应该尽量详细。【包含了类型、校验】 // 更好的做法！ props: { status: { type: String, required: true , validator: function (value) { return [ 'syncing' , 'synced' , 'version-conflict' , 'error' ].indexOf(value) !== -1 } } } 类型有：单向数据流：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。 4.总是用 key 配合 v-for <ul> < li v - for ="todo in todos" :key ="todo.id" > {{ todo.text }} </li> </ul> 5.永远不要把 v-if 和 v-for 同时用在同一个元素上。 6.对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的

天天加班996，看完这3点，立刻提升工作效率

阅读更多关于天天加班996，看完这3点，立刻提升工作效率

在工作中，你是否经常因为赶项目而加班？或者因为领导突然安排了一些zz任务而打乱了原先的计划？又或者因为新出了一部电视剧《长安十二时辰》而控制不住自己去刷剧，却把还没有完成的工作、作业放在了一边？以上这些情况我都有…… 这些情况的解决方案其实有很多，知乎上也能一搜一大堆。但今天我要讲的是自己亲测有效的，起码在我身上是可以马上看到效果的方法：提升有效工作时间。故事的开始…… 上上周四跑个客户，原本计划下午就在客户那呆到下班。后来老婆和我说可以去她那坐坐，反正也没人管。我心想那就去坐坐吧。关注我的老读者都知道我在年前离职创业了，所以除了跑客户，参加大会讲片子外，就是在家办公了。那天也不知道是不是我太久没有进办公楼工作的关系了，还是他们楼确实高大上，我还没到他们公司那层楼呢，在路上就自己笑起来了…… 这怎么描述呢，可能就是干柴烈火。。？小别胜新欢。。？进了办公室，坐下来，环顾四周，这特么是办公室啊！我坐在了办公工位上了啊！关键是他们的办公位确实比我上家公司的要大。然后就开始工作了呗，到晚上5点和老婆一起下班了。下班的时候我突然发现一件事情，今天下午好像做了很多事情。在一看自己的todolist，真的可以勾掉好多。我和老婆说“我发现在你们公司上班，效率很高，我下周还要来……” 说到这里，就把故事说大半了，剩下的一点就是上周因为要跑客户就去了2天。这两天工作效率也是及其的高。

vuex实现todoList实例

阅读更多关于 vuex实现todoList实例

这是一个vuex的项目用例；旨在分割管理项目中的 data ,以组件为单位，利用 vuex 提供的 module 属性，进行项目 store 的加载管理；最大限度的把逻辑分离出去，让模版文件专一作模版，让 store 专心作数据管理。 src/store/index.js import Vue from 'vue' import Vuex from 'vuex' import TodoList from '../components/todoList/store'; Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules: { todoList: TodoList } }) todoList/index.vue <template> <div> <div> <input type="text" :placeholder="state.placeholder" v-model="state.inputValue"> <button type="button" @click="handleAddClick">添加</button> </div> <ul> <li v-for="(item, index) in state.list" @click=

Vue入门到TodoList练手

阅读更多关于 Vue入门到TodoList练手

学习资料慕课网 - vue2.5入门基础语法示例代码1 <div id="root"> <h1>hello {{msg}}</h1> </div> <script> new Vue({ el: "#root", template: '<h1>hello {{msg}}</h1>', data: { msg: "world" } }) </script> 挂载点：vue实例绑定的dom节点模板：挂载点输出的内容，可以直接在挂载点内部编写，也可以通过template属性实现。示例代码1中div标签内部的 <h1>hello {{msg}}</h1> 和vue中的 template: '<h1>hello {{msg}}</h1>' 效果一致实例 : 指定挂载点、指定模板、绑定数据后可以自动结合模板、数据生成最终要展示的内容，并放到挂载点之中插值表达式：两个花括号包裹一个变量 {{msg}} 就是一个插值表达式示例代码2 <div id="root"> <div v-html="msg" v-on:click="handleClick"></div> </div> <script> new Vue({ el: "#root", data: { msg: "<h1>hello</h1>" }, methods: { handleClick: function () {

Vue.js 基础知识

阅读更多关于 Vue.js 基础知识

一、Vue起步 Vue：构建用户界面的渐进式框架。 1.helloworld < div id ="app" > {{content}} </ div > 原生方法： <script> var dom = document.getElementById('app' ); dom.innerHTML = 'helloworld' ; </script> Vue 方法： <script> // 创建Vue实例 var app = new Vue({ // el项：Vue实例接管的区域 el: "#app" , // 定义数据 data: { content: "helloworld!" } }); </script> 2.两秒后修改文字 < div id ="app" > {{content}} </ div > 原生方法： var dom = document.getElementById('app' ); dom.innerHTML = 'helloworld' ; setTimeout( function () { dom.innerHTML = 'byeworld' ; }, 2000) Vue 方法： var app = new Vue({ el: "#app" , data: { content: "helloworld!" } }); setTimeout(

Vue TodoList 入门 Demo

阅读更多关于 Vue TodoList 入门 Demo

// TodoList 实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>This is todo List</title> <style type="text/css"> .isFinshed{font-size: 20px; font-weight: 800; color: red;} </style> </head> <body> <div id="app"> <input type="text" v-model="message" @keyup.enter="itemsPush"> <ol> <todo-item v-for="(item, index) in items" :key="index" :content="item.label" :index="index" @delete="todoListDelete" :class="{isFinshed: item.isFinshed}"></todo-item> </ol> </div> </body> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <script type="text/javascript"> Vue

angularcli 第七篇（service 服务）

阅读更多关于 angularcli 第七篇（service 服务）

在组件中定义的信息是固定的，假设另外一个组件也需要用到这些信息，这时候就用到服务，实现共享数据和方法组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。 Service 可以从任何地方获取数据：Web 服务、本地存储（LocalStorage）或一个模拟的数据源 1、创建服务到指定目录下： ng g service services / storage 2、app.module.ts里面引入创建的服务 import { StorageService } from '. /service / storage.service'; @NgModule里面的providers依赖注入服务 provides: [ StorageService ] , 3、使用的页面引入服务、注册服务 import { StorageService } from '../. /service / storage.service'; private storage : StorageService 注入到构造函数到这里todolist 组件就可以使用 storage.service 服务里的数据了例：上节todolist实现的功能（一输入就有数据，更改状态，删除数据）；　　现在要实现刷新之后输入的数据还在

Vue.js 入门：从零开始做一个极简 To-Do 应用

阅读更多关于 Vue.js 入门：从零开始做一个极简 To-Do 应用

Vue.js 入门：从零开始做一个极简 To-Do 应用写作时间：2019-12-10<br />版本信息：Vue.js 2.6.10<br />官网文档： https://cn.vuejs.org/ <a name="sGmoJ"></a> 前言学习 Vue 的最佳方式之一是「请立刻查阅 Vue.js 的官方文档」，简单看一下「基础」部分，配合本文食用更佳。在开始写代码之前，首先去 BootCDN 上找一下目前最新版本完整版的 Vue.js 的链接： https://cdn.bootcss.com/vue/2.6.10/vue.js ，与压缩版（vue.min.js）不同，它（vue.js）包含完整的警告和调试模式。为了尽可能地保持简单，本文不使用 Vue CLI 来构建项目，而是像用 jQuery 开发那样，直接在 HTML 文件里引入 Vue.js 文件。如果文章中的代码有不明白的地方，我的建议是：直接抄代码，看效果，看文档，改代码，看效果，如此循环往复。 <a name="JART7"></a> 声明式渲染了解一下 Vue 官网的基础部分的「声明式渲染」部分，我们可以创建如下代码：此时预览 index.html 文件，会看到页面上出现 Hello, Vue.js! 的文字。 <a name="VcXQO"></a> 组件结构我们把要做的 To-Do

原生JavaScript以及jQuery实现轻量级的记事工具(todolist)--适应手机端

阅读更多关于原生JavaScript以及jQuery实现轻量级的记事工具(todolist)--适应手机端

前言:在看了TODOlist这个记事列表后,我们通过JavaScript以及jQuery来进行实现这个轻量的记事本。原工具连接： www.todolist.cn ,我们进行实现的工具链接: www.jcsy.work 此项目未能进行本地存储数据效果图: 目录: 一.思路分析: 二.简单实现: 1.HTML: 2.CSS: 3.JS以及jQuery: 一.思路分析: 由于考虑到手机端的问题,所以我们的计算单位采用 rem ; 主需的标签有 a , input , li ; 需要进行节点的操作,使用 createElement ; 判断键盘按下的事件,按下的键使用: onkeyup ; 二.简单实现: 1.HTML: 想要做好一个项目,布局是关键,布好了局才知道怎么做,我们一起来看看: < body > < div class = " action " > < div class = " bx menu " > < span > < a href = " javascript:; " > JCSYList </ a > </ span > < input type = " text " placeholder = " 添加WillDO " title = " 请输入记事内容 " > </ div > </ div > < div class = " bx ongoing ing "

Vue3 系统入门与项目实战完整无密

阅读更多关于 Vue3 系统入门与项目实战完整无密

下载： Vue3 系统入门与项目实战完整无密谁说为0基础准备的课，就一定浅薄？本课程带你轻松入门、深度掌握 Vue3，夯实前端硬技能。课程从 Vue3 基础语法，到组件原理，动画，代码设计，再到新语法扩展，由浅入深，全面、系统地梳理 Vue 知识点。在学习过程中，还有老师多年的“避坑经验”倾囊相授，并在最后带你按照企业级别代码质量和工程开发流程完成“京东到家”应用，实现对框架的彻底掌握。适合人群想要从零开始彻底入门 Vue 的同学；想要了解清楚 Vue3 原理和新语法的同学；希望扩展前端知识面，寻求升职加薪机会的同学技术储备要求熟悉JS基础语法；了解Npm开发环境；了解Webpack基本操作第1章 Vue 语法初探试看本章中，将会通过编写实际例子，带你对Vue的语法有个粗浅的认知，让大家结合例子，有一些自己的疑问，从而带着问题继续学习，以便于更好的理解和掌握后面的知识点。共 5 节 (57分钟) 收起列表 1-1 课前须知，这里有你需要了解的一切 (04:34) 试看 1-2 初学编写 HelloWorld 和 Counter (14:41) 1-3 编写字符串反转和内容隐藏小功能 (09:32) 1-4 编写TodoList 小功能，了解循环和双向绑定 (11:18) 试看 1-5 组件概念初探，对 TodoList 进行组件代码拆分 (16:47)

订阅 ToDoList