【IMWeb训练营作业】---Vue2.0 学习(一)
来源:互联网 发布:python二分法 编辑:程序博客网 时间:2024/05/22 08:00
vue2.0起步
就不介绍vue 了,大家都知道了,我盗个图先撑个门面
这就是vue的核心思想,传说中的 MVVM
模式自行百度,O(∩_∩)O~!
我使用node.js 的npm进行安装下载,
安装好node.js ,命令 :npm install vue 下载最新稳定版
第一天简单,项目结构也没怎么规划,直接一个index.html + app.js,
自己花了几分钟写一下一个极其简单的demo,勿喷!!!
上图
目前只实现简单的,添加任务,删除任务,后续将继续完善这个todolist,以下是涉及到的代码:
html结构
<div id="app"> <p> <input type="text" @keyup.enter="setList" value="" autofocus placeholder="提示:吃饭,睡觉,打豆豆等任务。。。"> </p> <hr><h2 v-show="!lists.length">暂无事件任务...</h2> <ol> <li v-for="(item,index) in lists">{{item}} <button @click = "removeList(index)">X</button></li> </ol> </div>
js部分
var list = ['吃饭', '睡觉'];new Vue({ el:'#app', data: { lists : [], }, //写个方法 methods: { setList(event) { this.lists.push(event.target.value); event.target.value = '' }, removeList(index) { this.lists.splice(index,1) } }})
以上是第一天学习的内容,欢迎各位老师,各位同学留言指导!!!!
1 0
- 【IMWeb训练营作业】---Vue2.0 学习(一)
- 【IMWeb训练营作业】 Vue2 Select demo
- imweb训练营作业(一)
- IMWeb训练营作业(一) todo-list
- IMWeb训练营作业
- IMweb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- 【IMWeb训练营作业】
- 【IMWeb训练营作业】
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- IMWeb训练营作业
- 数据的导出
- IMWeb训练营作业
- 十分钟学会Fiddler,学不会算我输
- 洛谷 P1550 [USACO08OCT]打井Watering Hole
- openMP编程(上篇)之指令和锁
- 【IMWeb训练营作业】---Vue2.0 学习(一)
- DHT12温湿度传感器STM32驱动IIC
- C++的new
- bzoj3771 Triple
- Android 官方数据绑定框架 Data Binding 简单使用
- 使用Calendar创建可视化日历
- 20170419 关于绘制余弦曲线和直线的一些问题
- js语句出现不能建立Date()
- java 基于TCP的Socket网络通信