TODOmvc--vue2.0应用解析

TODOMVC是vue官方文档的一个示例,以下的代码来自vue官方

罗列一下这么vue的示例总共有如下交互:

初始状态:↓

$实现--代码引用:通过todoMVC来学vue.js的使用

<section class="todoapp">  // <section> 标签定义了文档的某个区域,更多的是意味着这里面主要有文本元素
    <header class="header">
        <input class="new-todo"
            autofocus autocomplete="off"  // 'off'意味着网页加载的时候不会自动获得焦点,必须用户自己点击这input
            placeholder="What needs to be done?">
    </header>
    <section class="main" >
        <ul class="todo-list">
            <li class="todo">
                <div class="view">
                    <input class="toggle" type="checkbox">
                    <label> </label>  // label元素本身没啥,关键点击了会触发事件,要绑定下面的input.edit呗
                    <button class="destroy"></button>
                </div>
                <input class="edit" type="text">
            </li>
        </ul>
    </section>
    <footer class="footer">
        <span class="todo-count">
            <strong></strong>left                      // 计数用的
        </span>
        <ul class="filters">
            <li><a href="#/all" >All</a></li>            // 提前用到了router路由功能
            <li><a href="#/active" >Active</a></li>
            <li><a href="#/completed">Completed</a></li>
        </ul>
        <button class="clear-completed"> remaining">
            Clear completed
        </button>
    </footer>
</section>

细节:

1:这是纯静态的html,必须包括全部状态下的dom结构,控制这个dom用vuejs,展示dom用css

2:autocomplete(自动完成)表示:
用户在文本框输入前几个字母或是汉字的时候，该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户，供用户选择

这里没有数据库,自然不用自动完成(也是vue作者的良心代码)

3:li.todo为什么要有一个div包裹?因为label双击以后是要好input.edit'重合'的,怎么做到的呢?

那自然是通过给这俩啊,添加css样式:display:none或者display:block来'重叠啦',而且这俩应该是div.view和input.edit

因为编辑的时候自然是不想看到前面的checkbox和叉叉的啊

4:路由功能

这里之所以是用'/#/'来前缀只不过是给js处理的时候能好处理,其实是对后面的字符串赋值给变量,监听这个变量才转换list的状态的

----------------------------------------------------------------------------------------------------------------------------------------------------------

• 书写完new-todo增加至todos以active状态在list(all状态,active状态都有)下展示,此时左下角出现没完成的todo的计数↓

A实现

html:

<input class="new-todo" 
	autofocus autocomplete="off"
	placeholder="What needs to be done?"
	v-model="newTodo"