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)
}
}
})
以上是第一天学习的内容,欢迎各位老师,各位同学留言指导!!!!