Vue小黑记事本

小黑记事本

使用到的 vue 指令

• v-model

  数据双向绑定

• v-for

  生成列表结构，和数据绑定，响应式

• v-on

  绑定事件、事件修饰符 . 使用点

• v-show

  频繁切换显示 display

• v-if

  移除（隐藏）添加回来（显示）

使用到的 vue 实例配置

• el

  选择挂载的元素

• data {}

  Vue 使用到的数据

• methods {}

  自定义方法配置

---

1. 先创建基本页面结构

引入 Vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

静态资源

---

1. 创建 html 容器

<!-- 容器 -->
<section id="todoapp">
    <!-- 头部输入框 -->
    <!-- 列表区域 -->
    <!-- 统计和清空 -->
</section>

---

2. 添加头部元素

html 代码 </>

• + v-model="inputValue"
  • 数据双向绑定至 input.value 获取用户输入。
• + v-on:keyup.enter="add"
  • input 绑定按键抬起事件 ，使用事件修饰符，限定为 enter 键

<header class="header">
    <h1>小黑记事本</h1>
    <input v-model="inputValue" v-on:keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
    class="new-todo" />
</header>

javascript 代码 </>

• + inputValue
• + add:function(){}

// 创建 Vue 实例
let vm = new Vue({
    el:"#todoapp",
    data:{
        // +
        inputValue:"打代码"
    },
    methods:{  
        // +   
        add:function(){
            let data = this.inputValue.trim()
            if (data != "")
                this.list.push(this.inputValue);
            else
                console.log("null");
        },
    }
    
})

---

3. 列表区域

html 代码 </>

• + v-for="(item, index) in list"

  • 生成列表的元素，遍历数组 list

• + {{index + 1}}

  • 展示元素的索引：使用插值语法 ，拿到遍历出的 index 的值 + 1

• + {{item}}

  • 展示内容：插值语法获取遍历出来的 item

• + @click

  • 删除功能：按钮绑定点击事件、调用方法：remove(index)，并传入索引值

 <!-- 列表区域 -->
<section class="main">
    <ul class="todo-list">
        <li class="todo" v-for="(item, index) in list">
            <div class="view">
                <span class="index">{{ index + 1 }}.</span>
                <label>{{ item }}</label>
                <button @click="remove(index)" class="destroy"></button>
            </div>
        </li>
    </ul>
</section>

javascript 代码 </>

• + list []
• + remove: function (index){}

// 创建 Vue 实例
let vm = new Vue({
    el:"#todoapp",
    data:{
        inputValue:"打代码",
        // +
        list: ["吃饭饭", "睡觉觉", "打代码"],
    },
    methods:{     
        add:function(){
            let data = this.inputValue.trim()
            if (data != "")
                this.list.push(this.inputValue);
            else
                console.log("null");
        },
        // +
        remove: function (index)
        {
            console.log("remove", index);
            this.list.splice(index, 1);
        },
    }
    
})

---

4. 统计和清空

html 代码 </>

• + v-if="list.length"

  • 显示和隐藏列表：判断列表内容是否为 0

• + {{ list.length }}

  • 获取列表里的元素个数，插值语法

• + v-on:click="clear"

  • 清除所有

• + v-show="list.length"

  • 清除按钮显示隐藏

<footer class="footer">
    <span v-if="list.length" class="todo-count">
        <strong>{{ list.length }}</strong> todo items
    </span>
    <button v-show="list.length" v-on:click="clear" class="clear-completed">
        Clear
      </button>
</footer>

javascript 代码 </>

• + clear: function ()

// 创建 Vue 实例
let vm = new Vue({
    el:"#todoapp",
    data:{
        inputValue:"打代码",
        list: ["吃饭饭", "睡觉觉", "打代码"],
    },
    methods:{     
        add:function(){
            let data = this.inputValue.trim()
            if (data != "")
                this.list.push(this.inputValue);
            else
                console.log("null");
        },
        remove: function (index)
        {
            console.log("remove", index);
            this.list.splice(index, 1);
        },
        // +
        clear: function ()
        {
            this.list = [];
        }
    }
})

---

引入 js 代码

<script src="./js/example.js"></script>

完成效果

---