todo项目实现及总结

1

.搭建界面，主要用到了css，和less

1.当时想要用的是sass实现鼠标放在item上，就会出现X，但是不知道为什么sass引入一直报错，后来，从百度上找到了解决方案，可以引入了，但是还是用不了，然后就用了less实现了
2.由于组合选择器比id选择器优先级高，所以我当时active样式一直加不进去，后来改成了标签选择器

css选择器优先级从大到小： id>class>标签>子代>后代>伪类
组合选择器优先级最高

实现功能

1.input框输入，添加一个item，addTodo

定义方法
<input
        class="new-todo"
        @keyup.enter="addTodo"
        placeholder="What needs to be done?"
      />

methods方法
addTodo(event) {
   
      let content = event.target.value.trim();//获取输入框里值，并且去除空格
      if (content) {
   
        this.todos.unshift({
   
          id: ++this.id,
          content: content,
          completed: false,
        });
        event.target.value =