Vue快速入门

最新推荐文章于 2024-09-12 11:43:08 发布

小张后端开发

最新推荐文章于 2024-09-12 11:43:08 发布

阅读量78

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Mount_Fuji/article/details/134948811

版权

1.vue简介

Vue 是一个用于构建用户界面的渐进式框架

1. 构建用户界面：基于数据动态渲染页面

2. 渐进式：循序渐进的学习

3. 框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则 )

规则 → 官网

2.vue使用

创建 Vue 实例，初始化渲染

核心步骤 4步：

1. 准备容器

2. 引包 (官网) - 开发版本 / 生产版本

3. 创建 Vue 实例 new Vue()

4. 指定配置项 → 渲染数据

① el 指定挂载点

② data 提供数据

<!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">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <h1>{{msg}}</h1>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      }
    })
  </script>
</body>

</html>

3.差值表达式

1. 插值表达式的作用是什么？

利用表达式进行插值，将数据渲染页面中

2. 语法格式？

3. 插值表达式的注意点：

① 使用的数据要存在（data）

② 支持的是表达式，而非语句 if ... for

③ 不能在标签属性里面使用

4.Vue核心特性：响应式

1. 什么是响应式呢？

数据改变，视图自动更新

使用 Vue 开发 → 专注于业务核心逻辑即可

2. 如何访问或修改数据呢？

data中的数据, 最终会被添加到实例上

① 访问数据： "实例.属性名"

② 修改数据： "实例.属性名" = "值"

5.Vue指令

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

指令：带有 v- 前缀的特殊标签属性

<!-- Vue指令：v-前缀的-->
<div v-html="src"></div>

<!-- 普通标签属性 -->
<div class="box">...</div>
<div title="小张">...</div>

1. 什么是 Vue 指令呢？

指令就是带有 v- 前缀的特殊属性，不同属性对应不同的功能

学习不同指令 → 解决不同业务场景需求

2. 如果需要动态解析标签，可以用哪个指令？语法？

v-html = " 表达式 " → 动态设置元素 innerHTML

<!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">
  <title>Document</title>
</head>

<body>

  <div id="app" v-html="msg">

  </div>

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

    const app = new Vue({
      el: '#app',
      data: {
        msg: `
          <a href="http://www.itcast.cn">学it, 来黑马</a>
        `
      }
    })

  </script>

</body>

</html>

v-show

1. 作用：控制元素显示隐藏

2. 语法： v-show = " 表达式 " 表达式值 true 显示， false 隐藏

3. 原理：切换 display:none 控制显示隐藏

4. 场景：频繁切换显示隐藏的场景

v-if

1. 作用：控制元素显示隐藏（条件渲染）

2. 语法： v-if = " 表达式 " 表达式值 true 显示， false 隐藏

3. 原理：基于条件判断，是否创建或移除元素节点

4. 场景：要么显示，要么隐藏，不频繁切换的场景

<!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">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      line-height: 100px;
      margin: 10px;
      border: 3px solid #000;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #ccc;
    }
  </style>
</head>

<body>

  <div id="app">
    <div class="box" v-show="!flag">我是v-show控制的盒子</div>
    <div class="box" v-if="flag">我是v-if控制的盒子</div>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })
  </script>

</body>

</html>

v-else v-else-if

1. 作用：辅助 v-if 进行判断渲染

2. 语法： v-else v-else-if = "表达式"

3. 注意：需要紧挨着 v-if 一起使用

<!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">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <p v-if="gender==='1'">性别：♂ 男 </p>
    <p v-else>性别：♀ 女</p>
    <hr>
    <p v-if="score>=90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score>=80">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score>=70">成绩评定C：奖励零食礼包</p>
    <p v-else="score<70">成绩评定D：惩罚一周不能玩手机</p>
  </div>

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

    const app = new Vue({
      el: '#app',
      data: {
        gender: '1',
        score: 90
      }
    })
  </script>

</body>

</html>

v-on

1. 作用：注册事件 = 添加监听 + 提供处理逻辑

2. 语法：

① v-on:事件名 = "内联语句"

<!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">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button v-on:click="num--">-</button>
    <span>{{num}}</span>
    <button v-on:click="num++">+</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        num: 1
      }
    })
  </script>
</body>

</html>

② v-on:事件名 = "methods中的函数名"

<!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">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button v-on:click="Fn">切换显示隐藏</button>
    <h1>黑马程序员</h1>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      },
      methods: {
        Fn() {
          console.log("函数执行了...");
        }
      }
    })
  </script>
</body>

</html>

3. 简写： @事件名

<!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">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="Fn">切换显示隐藏</button>
    <h1>黑马程序员</h1>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      },
      methods: {
        Fn() {
          console.log("函数执行了...");
        }
      }
    })
  </script>
</body>

</html>

v-on 调用传参

<!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">
  <title>Document</title>
  <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }

    h3 {
      margin: 10px 0 20px 0;
    }

    p {
      margin: 20px;
    }
  </style>
</head>

<body>

  <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
    </div>
    <p>银行卡余额：{{money}}元</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 1000
      },
      methods: {
        // 给按钮绑定点击事件
        buy(price) {
          this.money -= price;
        }
      }
    })
  </script>
</body>

</html>

v-bind

1. 作用：动态的设置html的标签属性 → src url title ...

2. 语法： v-bind :属性名 ="表达式"

3. 注意：简写形式 :属性名="表达式"

<!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">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="index--">上一页</button>
    <div v-if="index>=0&&index<list.length">
      <img :src="list[this.index]" alt="">
    </div>
    <button @click="index++">下一页</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ],
        index: 0
      }
    })
  </script>
</body>

</html>

v-for

v-for = "( item, index ) in 数组 "

item 每一项， index 下标

省略 index: v-for = " item in 数组 "

语法： key属性 = "唯一标识"

作用： 给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

<!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">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <h3>小黑的书架</h3>
    <ul>
      <li v-for="item in booksList" :key="item.id">
        <span>{{item.name}}</span>
        <span>{{item.author}}</span>
        <button @click="deletebook(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods: {
        deletebook(id) {
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>

</html>

key作用：

给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。

注意点：

1. key 的值只能是字符串或数字类型

2. key 的值必须具有唯一性

3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

v-model

1. 作用: 给表单元素使用, 双向数据绑定 → 可以快速获取或设置表单元素内容

① 数据变化 → 视图自动更新

② 视图变化 → 数据自动更新

2. 语法: v-model = '变量'

<!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">
  <title>Document</title>
</head>

<body>

  <div id="app">
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button>登录</button>
    <button>重置</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      }
    })
  </script>
</body>

</html>