Vue学习day01：追风记事本

向右看齐 2024-02-18 10:07 41阅读 0赞

#### 文章目录 ####

*  一、插值表达式
 *  二、Vue常用指令
 *   *  2.1 内容渲染指令
     *  2.2 条件渲染指令
     *  2.3 事件绑定指令
     *  2.4 属性绑定指令
     *  2.5 列表渲染指令
     *  2.6 双向绑定指令
 *  三、案例：追风记事本

## 一、插值表达式 ##

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

插值表达式是一种Vue的模板语法，我们可以用插值表达式**渲染出Vue提供的数据**。

**1、以下的情况都是表达式：**

money + 100
    money - 100
    money * 10
    money / 10 
    price >= 100 ? '真贵':'还行'
    obj.name
    arr[0]
    fn()
    obj.fn()

**2、插值表达式语法：\{ \{ 表达式 \}\}**

<h3>{
        {
        title}}<h3>
    <p>{
        {
        nickName.toUpperCase()}}</p>
    <p>{
        {
        age >= 18 ? '成年':'未成年'}}</p>
    <p>{
        {
        obj.name}}</p>
    <p>{
        {
        fn()}}</p>

**3.错误用法**

1.在插值表达式中使用的数据 必须在data中进行了提供
    <p>{
        {
        hobby}}</p>  //如果在data中不存在 则会报错
    2.支持的是表达式，而非语句，比如：if   for ...
    <p>{
        {
        if}}</p>
    3.不能在标签属性中使用 {
        {
          }} 插值 (插值表达式只能在标签中间使用)
    <p title="{
        {username}}">我是P标签</p>

## 二、Vue常用指令 ##

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

vue 中的指令按照不同的用途可以分为如下 6 大类：

*  内容渲染指令（v-html、v-text）
 *  条件渲染指令（v-show、v-if、v-else、v-else-if）
 *  事件绑定指令（v-on）
 *  属性绑定指令（v-bind）
 *  双向绑定指令（v-model）
 *  列表渲染指令（v-for）

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

### 2.1 内容渲染指令 ###

内容渲染指令用来**渲染 DOM 元素的文本内容**，常用的内容渲染指令有如下2个：  
![在这里插入图片描述][3cbd7e90782849078455d59f6e28d076.png]  
从下图可以知道，这两个指令都会覆盖标签中的内容。

![在这里插入图片描述][86a45c8e0a1649e88626cc470ac164f3.png]

### 2.2 条件渲染指令 ###

条件判断指令，用来控制 DOM 的**显示与隐藏**。条件渲染指令有如下2个：

![在这里插入图片描述][fd2c330202db4845a0d348dbe6c88f39.png]

如下图代码，flag为true时，才会在网页上渲染数据。

![在这里插入图片描述][5c9150096fc74a6681dd54ebf719a00a.png]  
下图是v-else-if、v-else的使用：当gender为1时，页面显示男，否则页面显示女；当score大于等于90时，页面显示成绩评定A，依次类推。

![在这里插入图片描述][66d4ef2c25374440a6a7928a5a716ac5.png]

### 2.3 事件绑定指令 ###

使用Vue时，为DOM注册事件，极其的简单，语法如下：  
![在这里插入图片描述][ef4e95482c0c4cecb23d4a5b03f096ee.png]  
**内联语句：** 通过点击加减来控制数值大小。

![在这里插入图片描述][3244546cf2f346f8a077ebf36cf47f38.png]  
**事件处理函数传参：** 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象；如果传递了参数，则实参表示事件对象，固定用法。  
![在这里插入图片描述][87b1dfc0714846918eeb15571c7a7df3.png]

### 2.4 属性绑定指令 ###

![在这里插入图片描述][d805177bd6cd4006b082733f76c5fc68.png]  
如下图所示，通过属性绑定，可以在页面上显示可爱的图片。

![在这里插入图片描述][1e11fc5ce5af4aba903a61d728e9fc56.png]

### 2.5 列表渲染指令 ###

Vue提供了 v-for 列表渲染指令，用来基于一个数组来循环渲染一个列表结构。  
![在这里插入图片描述][7bfd1fc479294d9193467dd74c2ec542.png]  
如下图，通过点击删除事件，页面会删除对应数据，需要注意del()的写法。

![在这里插入图片描述][00c7481e57024e23a193b4fe16bfec32.png]

**v-for中的key：**

![在这里插入图片描述][0c7dafc1f95b4a4ea3afb23d965502b0.png]

*  key 的值只能是字符串或数字类型  
    key 的值必须具有唯一性  
    推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

### 2.6 双向绑定指令 ###

![在这里插入图片描述][c9ad14a571d74810931534ac5ecd2745.png]  
如下图，当我们把username和password进行双向数据绑定的时候，我们可以快速的获取或者设置表单元素内容。

![在这里插入图片描述][fdd57cc450ba4aac8ca75f154fceaf88.png]

## 三、案例：追风记事本 ##

**分析：**  
`@keyup.enter="add" v-model="todoName"`：当我们按下回车键时，会触发add事件，用v-model完成双向数据绑定。

`del()`用来删除任务、`add()`用来新增任务，如果输入框没有任何内容，则提示"请输入任务名称"；`this.list.unshift()`用来把任务数据放入list数组中，以时间戳为id值，todoName为name值；`delAll()`用来重置数组为空。

![在这里插入图片描述][8d7472daee5e46ae9ef21266bd722384.png]

**完整代码如下：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="./css/index.css" />
      <title>记事本</title>
    </head>
    
    <body>
      
      <section id="app">
        
        <header class="header">
          <h1>追风记事本</h1>
          <input @keyup.enter="add" v-model="todoName" placeholder="请输入任务" class="new-todo" />
          <button class="add" @click="add">添加任务</button>
        </header>
        
        <section class="main">
          <ul class="todo-list">
            <li class="todo" v-for="(item, index) in list" :key="item.id">
              <div class="view">
                <span class="index">{
       {index+1}}.</span> <label>{
       {item.name}}</label>
                <button class="destroy" @click="del(item.id)"></button>
              </div>
            </li>
          </ul>
        </section>
        
        <footer class="footer" v-show="list.length > 0">
          
          <span class="todo-count">合 计:<strong>{
       {list.length}}</strong></span>
          
          <button class="clear-completed" @click="delAll">
            清空任务
          </button>
        </footer>
      </section>
    
      
      <script src="../vue.js"></script>
      <script>
        const app = new Vue({
          
          el: '#app',
          data: {
          
            todoName: '',
            list: []
          },
          methods: {
          
            del(id) {
          
              this.list = this.list.filter(a => a.id !== id)
            },
            add() {
          
              if (this.todoName.trim() === '') {
          
                alert('请输入任务名称')
                return
              }
              this.list.unshift({
          
                id: +new Date(),
                name: this.todoName
              })
              this.todoName = ''
            },
            delAll() {
          
              this.list = []
            }
          },
        })
      </script>
    </body>
    
    </html>

**运行效果：**  
![在这里插入图片描述][c410052821bb4881a3f6b94d2aa085dd.png]

[3cbd7e90782849078455d59f6e28d076.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/851ef2b3acd64bfa881327ced08c2b79.png
[86a45c8e0a1649e88626cc470ac164f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/93957510c35d4ecda6ee3d01f4c2ac7c.png
[fd2c330202db4845a0d348dbe6c88f39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/5c1c69a5611e481bbb71d3fc728cbe5a.png
[5c9150096fc74a6681dd54ebf719a00a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/f83566fe337f47cfb5215d96433a8921.png
[66d4ef2c25374440a6a7928a5a716ac5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/99a0dbb0476648889792b8e6cf2005ec.png
[ef4e95482c0c4cecb23d4a5b03f096ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/69cbff0d0bb443909bdb7e4b764674e8.png
[3244546cf2f346f8a077ebf36cf47f38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/28e2e43a9cb14c659e2ecdddf792ad26.png
[87b1dfc0714846918eeb15571c7a7df3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/0fb22441745d44b89b1c5a88c7b046c1.png
[d805177bd6cd4006b082733f76c5fc68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/bb049b1d43ae428ea40aaab7326e163b.png
[1e11fc5ce5af4aba903a61d728e9fc56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/831479cd41e64dd5a87e4525f44f56df.png
[7bfd1fc479294d9193467dd74c2ec542.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/fa29ef3799f740c9a844593c831521ce.png
[00c7481e57024e23a193b4fe16bfec32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/71662c6274a44bcda72e72d6c58f139b.png
[0c7dafc1f95b4a4ea3afb23d965502b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/3f471bf1307b4cb998c85891ada1fa5f.png
[c9ad14a571d74810931534ac5ecd2745.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/87eef50a2a334e02a502c396fe32b39f.png
[fdd57cc450ba4aac8ca75f154fceaf88.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/d6d9905bf2df486c813d605f0ad392ee.png
[8d7472daee5e46ae9ef21266bd722384.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/2375bc0b908a4d27909b7d47d84238fa.png
[c410052821bb4881a3f6b94d2aa085dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/20e6c251f29f4947a933c6a189079736.png