Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记

卡皮巴拉

已于 2023-08-29 10:27:41 修改

阅读量3k

点赞数 14

分类专栏： Vue学习文章标签：学习笔记前端 vue.js

于 2023-08-21 20:16:49 首次发布

本文链接：https://blog.csdn.net/upgrade_bro/article/details/132383469

版权

如今网络学习资源丰富，编程教育机构所制课程五花八门，层出不穷，

大字号的封面广告、响口号写的是一学就会……

看得叫人目不暇接、眼花缭乱，不知如何选择。

希望能直接筛选出最优质课程？渴求一条龙服务的零基础入门到学有所成的绝佳资源？

这些问题没有标准答案，没有最好只有更好；彼之蜜糖，汝之砒霜；一千个人眼中有一千个哈姆雷特……

笔者认为，应以平常心看待，如今百花齐放，百家争鸣，各有特色，干货多多，

可随笔者“货比三家”、“各学其长”，以达成我们的学习目的（这才是最重要的！！！）。

所以，本次学习的是黑马程序员官方认证账号发布在b站的

“2023新版Vue2+Vue3基础入门到实战项目全套教程”

—— Capybara与诸位共勉。

day01

Vue快速上手

Vue是什么

概念：Vue是一个构建用户界面（基于数据渲染出用户看到的页面）的渐进式（循序渐进）框架（一套完整的项目解决方法）

创建实例

核心步骤 4步:

1.准备容器

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

Vue2官方文档

起步 —> 安装 —> #CDN—> 通过script标签引入开发版本

3.创建 Vue 实例 new Vue()

一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数

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

①el指定挂载点

②data提供数据

const app = new Vue({
    // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
    el: '#app',
    // 通过 data 提供数据
    data: {
      msg: 'Hello World',
      count: 666
    }
  })

完整代码如下：

<!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>

<!-- 
  创建Vue实例，初始化渲染
  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染
-->

<!-- 不是Vue管理的范围 -->
<div class="box2">
  box2 -- {
  { count }}
</div>
<div class="box">
  box -- {
  { msg }}
</div>
-----------------------------------------------------
<!-- Vue所管理的范围 -->
<div id="app">
  <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
  <h1>{
  { msg }}</h1>
  <a href="#">{
  { count }}</a>
</div>

<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
  // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
  const app = new Vue({
    // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
    el: '#app',
    // 通过 data 提供数据
    data: {
      msg: 'Hello World',
      count: 666
    }
  })

</script>

  
</body>
</html>

效果：（可见，没有被Vue管理的盒子，没有渲染对应的数据）

插值表达式

插值表达式 { { }}

插值表达式是一种 Vue 的模板语法

<!-- 不是Vue管理的范围 -->
<div class="box2">
  box2 -- {
  { count }}
</div>
<div class="box">
  box -- {
  { msg }}
</div>
-----------------------------------------------------
<!-- Vue所管理的范围 -->
<div id="app">
  <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
  <h1>{
  { msg }}</h1>
  <a href="#">{
  { count }}</a>
</div>

1. 作用: 利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

2. 语法：{ { 表达式 }}

3. 注意点：

（1）使用的数据必须存在（data）

（2）支持的是表达式，而非语句，比如：if for ...

（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>

  
<!-- 
  插值表达式：Vue的一种模板语法
  作用：利用 表达式 进行插值渲染
  语法：{
  { 表达式 }}

  注意点：
    1. 使用的数据要存在
    2. 支持的是表达式，不是语句  if  for
    3. 不能在标签属性中使用 {
  { }}
 -->
<div id="app">
  <p>{
  { nickname }}</p>
  <p>{
  { nickname.toUpperCase() }}</p>
  <p>{
  { nickname + '你好' }}</p>
  <p>{
  { age >= 18 ? '成年' : '未成年' }}</p>
  <p>{
  { friend.name }}</p>
  <p>{
  { friend.desc }}</p>

  <!-- ----------------------- -->
  <!-- <p>{
  { hobby }}</p> -->
  <!-- <p>{
  { if }}</p> -->
  <!-- <p title="{
  { nickname }}">我是p标签</p> -->
</div>

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

  const app = new Vue({
    el: '#app',
    data: {
      nickname: 'tony',
      age: 18,
      friend: {
        name: 'jepson',
        desc: '热爱学习 Vue'
      }
    }
  })


</script>

</body>
</html>

效果：

响应式特性

Vue 核心特性：响应式

我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作。
比如：数据的响应式处理 → 响应式：数据变化，视图自动更新

如何访问 or 修改？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">
  {
  { msg }}
  {
  { count }}
</div>

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

<script>

  const app = new Vue({
    el: '#app',
    data: {
      // 响应式数据 → 数据变化了，视图自动更新
      msg: '你好，世界',
      count: 100
    }
  })

  // data中的数据，是会被添加到实例上
  // 1. 访问数据  实例.属性名
  // 2. 修改数据  实例.属性名 = 新值

</script>

</body>
</html>

代码效果：

在浏览器控制台直接修改数据

页面自动更新

在浏览器控制台直接修改数据(count++)

页面自动更新

总结：

数据改变，视图会自动更新

聚焦于数据 → 数据驱动视图

使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

开发者工具

安装 Vue 开发者工具：装插件调试 Vue 应用

（1）通过谷歌应用商店安装（国外网站）

（2）极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件

极简插件

重新打开浏览器，打开写的Vue应用：

可修改数据（不经过浏览器控制台console）：

Vue指令

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

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

v-html:
作用：设置元素的 innerHTML
语法：v-html = "表达式 "

注意：插值表达式并不能解析标签（仍把它当做字符串）

<!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">
    <div v-html="msg"></div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        msg: `
          <h3>前端~学起来！</h3>
        `
      }
    })

  </script>

</body>
</html>

效果：

还有哪些指令？

见于官网Vue.js

常用的：

总结：

不同指令的目的：解决不同业务场景需求

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

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

指令-v-show和v-if

v-show

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

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

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

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

v-if

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

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

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

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

v-show底层原理：切换 css 的 display: none 来控制显示隐藏

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>
  <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>

  <!-- 
    v-show底层原理：切换 css 的 display: none 来控制显示隐藏
    v-if  底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）
  -->

  <div id="app">
    <div v-show="flag" class="box">我是v-show控制的盒子</div>
    <div v-if="flag" class="box">我是v-if控制的盒子</div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: true
      }
    })
  </script>

</body>
</html>

效果（flag为true时）：

当flag为false时，两个盒子均不显示（隐藏），

在浏览器中查看元素如下：

指令 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 >= 70">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

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

</body>
</html>

修改数据前：

修改gender数据为1：

页面变化：

指令-v-on-01-语法1-内联语句

Vue 指令 v-on

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

2. 语法：

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

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

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="count--">-</button>
    <span>{
  { count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>
</body>
</html>

效果：

指令-v-on-02-语法2-methods处理函数

Vue 指令 v-on

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

2. 语法：

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

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

3. 简写：@事件名

4. 注意：methods函数内的 this 指向 Vue 实例

data的数据已经挂到Vue实例上

而methods中的函数，this都指向当前实例，

所以在methods内的函数中，我们可以通过this.的方式访问数据。

还可以通过app.的方式访问数据，但app作为变量，名字可能会被修改，如此访问代码可维护性不高，推荐使用this访问。

实操代码：

<!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"

最低0.47元/天解锁文章