记录学习进程新手学vue——todolist

最新推荐文章于 2022-07-07 11:21:21 发布
最新推荐文章于 2022-07-07 11:21:21 发布
阅读量194 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35180430/article/details/79813519
版权

教程在此 https://www.imooc.com/video/12304

由于用coding构建环境之后老是莫名出现很多错误，所以就用<script>引用了vue

接下来 放代码

<!DOCTYPE html >
< html >
< head >
< meta charset= "utf-8" />
< meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
< title >Page Title </ title >
< meta name= "viewport" content= "width=device-width, initial-scale=1" >
< script src= "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" > < / script >

</ head >
< body >
< div id= "app" >
< h3 v-text= "title" ></ h3 >
< input type= "text" v-model= "newItem" @ keyup. enter= "addNew" />
< ul >
< li v-for= "item in items" : class= "{finished:item.isFinished}" @ click= "togglFinish(
item)" >{{item.label}} </ li > //v-for v-bind v-click
</ ul >
</ div >

</ body >

< script >
var vm= new Vue({
el: '#app',
data(){
return{
title: 'this is a todolist',
items:[
// {
// label:'work',
// isFinished:false
// },{
// label:'study',
// isFinished:true
// }
],
newItem: ''
}
},
methods:{
togglFinish : function( item) {
item. isFinished=! item. isFinished;//将isFinish值切换
},
addNew : function(){
this. items. push({
label: this. newItem,
isFinished: false
})                    //push方法 将newItem双向绑定
this. newItem= '' //输完newItem 为空
}
}
})
< / script >

< style >
.finished{
text-decoration: underline;

}
< / style >
</ html >



当然我自己可能对vue理解不深，有标注不清或错误，希望大家可以和我一起讨论哦。

qq_35180430
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现todolist笔记
weixin_45732235的博客
03-19 3208
文章目录前言一、静态页面二、初始化列表三、添加演示四、勾选演示五、删除演示六、底部统计演示七、底部交互演示所有代码总结 前言 使用Vue实现简单的todo-list案例 🌴学习Vue只用通过不断的练习，和使用代码才能够熟记，我跟着视频敲了一遍后，想着要自己再敲一遍，捋一下逻辑，让自己记得更熟。 一、静态页面 🌾首先已经有了todolist的静态页面的html以及css文件，想办法用组件来实现就要进行拆分，看着静态页面思考一下拆分几个子组件，最后都放入父组件App.vue 🌾分好之后，确定哪个组件包含其
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
02-09
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
Vue学习过程
weixin_44500533的博客
09-17 170
1.安装node.js 2.安装Vue cli
学习Vue的历程
qq_51066068的博客
07-07 1187
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
vue学习进度记录
.zz的博客
11-27 700
HTML是大小写不敏感的，HTML中的属性@addList会被解析为@addlist，js再用@addList去找，是找不到的。 2017-11-27 vue的demo vue的数据绑定 el属性 v-model与data选项 vue声明周期 created mounted beforeDestroy 插值与表达式 最基本的文本插值方法：{{}}
vue学习过程记录(2)
qq_38274008的博客
07-05 272
上图是基本vue项目的框架,我们操作的主要是index.html ,src,config,在index.html中可以引入一些js,可以全局使用;src自己创建要显示的vue模板页面在这里,我这个项目是将所有接口都放到api的js里,方便调用;assets下是项目的图片,样式,引入的外部js;components下是模板页面了,页面简单,但要实现单页面的跳转用到路由routerl例如这个,我想跳转...
vue-todolist
04-08
vue-todolist-v3 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
软件工程毕业设计—基于java+vue的todolist待办事项关联系统前端+后端源码.zip
06-28
软件工程毕业设计—基于java+vue的todolist待办事项关联系统前端+后端源码.已获高分通过项目。 软件工程毕业设计—基于java+vue的todolist待办事项关联系统前端+后端源码.已获高分通过项目。软件工程毕业设计—基于...
Vue实现todolist
07-13
利用vue框架，实现todolist MVC DEMO，基本实现必备功能，其中使用到了element-ui
vue学习过程笔记
weixin_43102756的博客
09-10 98
箭头函数与this作用域 问题：箭头函数中的this是如何查找的？ 答案：向外层作用域中，一层层查找this，直到有this定义 const obj { aaa() { setTimeout(function () { setTimeout(function () { console.log(this); //window 该格式下的函数调用时用call，并将window作为第一个参数传入 }) setTimeout(() => { console.lo
记录几个不错的学习网站
lovejava5的博客
11-03 568
http://www.luocs.com/ 陆续添加
最近想打算开发一个用于记录个人学习的博客，记录下进程。
weixin_34174422的博客
12-20 92
2019独角兽企业重金招聘Python工程师标准>>> ...
Linux下SpringBoot和VUE项目后台、运行停用、查看
qq_35238997的博客
02-21 1401
springBoot运行 在应用Unix/Linux时，我们一般想让某个程序在后台运行，于是我们将常会用 & 在程序结尾来让程序自动运行。 比如我们要运行mysql在后台： /usr/local/mysql/bin/mysqld_safe –user=mysql &。 可是有很多程序并不想mysqld一样，这样我们就需要nohup命令。 1.运行jar包 nohup java...
新手入门指导：Vue 2.0 的建议学习顺序
weixin_33939843的博客
10-26 1120
起步 1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。 2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具，就只用最简单的 &lt;script&gt;，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。 3. 照着官网上的示例，自己想一些类似的例子，模仿着实现来练...
如何杀死vue进程(windows)
zero_person_xianzi的博客
05-19 2561
一个vue脚手架项目,进行一系列操作之后默认会打开8080端口 操作 cnpm run dev / npm run dev 这个时候如果你是使用git，输入红字部分的命令行会产生一个进程 如果你关闭了git,重新输入红字部分内容,可能又会产生新的进程，如8081端口进程/8082端口进程 如果你产生了，又不想生成8081/8082端口，只想生成8080端口，请往下看 打开cmd,输入命...
手把手教你如何在生产环境检查 Vue 应用程序
粉丝们务必加入微信粉丝群
11-24 968
主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: 作者：Damian Mullins, 译者：前端小智 来源：damimullins 点赞再看，养成习惯 本文 G.
中国石油大学(北京)克拉玛依校区在广东2021-2024各专业最低录取分数及位次表.pdf
最新发布
09-08
全国各大学在广东省2021~2024年各专业最低录取分数及位次
浙江越秀外国语学院在广东2021-2024各专业最低录取分数及位次表.pdf
09-08
全国各大学在广东省2021~2024年各专业最低录取分数及位次
Vue框架学习笔记：从Hello World到TodoList
"这篇学习笔记主要介绍了前端主流框架Vue.js的基础知识，包括如何创建第一个Vue应用（Hello World）以及通过Todo List的例子展示了Vue的数据绑定和基本操作。作者指出Vue吸收了其他框架如Knockout、Angular、React和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值