利用vue写todolist单页应用

前端之家收集整理的这篇文章主要介绍了利用vue写todolist单页应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

网上有很多关于vue的todolist小程序。大多是利用vue-cli脚手架工具开发的,这个官网的文档也不支持新手从单文件开始学习。所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习。

1、vue是啥?

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的 渐进式框架。简单说是一个模板引擎,做过后端的应该很清楚,以前靠服务器端渲染的dom,放在浏览器端端渲染,vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的,数据驱动,数据双向绑定,赋予了用户很好的体验,以及快速的开发,应用的项目的益于维护等。。

2、下面开始代码吧,提前引入vue.js,以及bootstrap。由于没采用vue单文件开发。所以只有一个html文件.

3、为了方便你可以使用cdn来引入你需要的文件。demo使用了localstorage来存放数据。所以你必须开启web端口来浏览。未了方便你可以使用webstorm来开发。否则你直接打开静态页是不能存取数据的。当然这些数据你可以换成从数据库来处理

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1"> vue版todolist
{{title}}
添加任务事项
      <a href="#" v-for="item in items" class="list-group-item" v-on:click="toogleFinsih(item)"&gt;
        <span class="itemcount"&gt;{{item.id}}</span>
        {{item.lable}}
        <span class="badge" v-bind:class="{isFinish:item.isFinish}"&gt;√</span>
      </a>

    </div>
  </form>
</div>
<div class="col-md-5"&gt;
  <div class="panel panel-default"&gt;
    <div class="panel-heading"&gt;任务计划:</div>
    <div class="panel-body"&gt;
      请在一周内完成这些计划!
    </div>
    <div class="panel-footer text-right"&gt;
      <button class="btn btn-info btn-sm" @click="clearItem"&gt;清空任务计划</button>
    </div>
  </div>
</div>

github:nofollow" target="_blank" href="https://github.com/HelTi/vue-study-demo">demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/43523.html

猜你在找的Vue相关文章