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

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

  

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

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

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

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

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

可随笔者“货比三家”、“各学其长”,以达成我们的学习目的(这才是最重要的!!!)。

所以,本次学习的是黑马程序员官方认证账号发布在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/vue@2.7.14/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/vue@2.7.14/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/vue@2.7.14/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" con
### 零基础前后端项目实战教程 对于零基础学习者来说,选择合适的前后端项目实战教程至关重要。以下是几个推荐的资源: #### 1. **《安装包管理后台》从零搭建开发** 这个专栏专注于个具体的项目——《安装包管理后台》,旨在通过实际操作帮助学习者掌握从前端到后端的整体流程[^1]。 #### 2. **uni-app 全面掌握** 该系列课程带领学员从入门实战全面掌握 uni-app 的使用方法。整个项目的功能点设计简单明了,逻辑清晰易懂,非常适合初学者练习。此外,该项目的技术栈覆盖广泛,能够有效提升综合技能[^2]。 #### 3. **千锋前端 JavaScript 教程** 这是套完整的 JavaScript 学习资料,不仅包含了理论知识讲解,还提供了大量实例供读者动手实践。特别是其中关于前后端交互的部分,可以帮助理解如何构建现代 Web 应用程序[^3]。 #### 4. **SpringBoot + Vue 实战笔记** 这份笔记记录了个基于 Spring Boot 和 Vue.js 构建的企业级应用案例。虽然难度稍高些,但对于有定编程经验的人来说是非常好的参考资料。代码片段展示了 RESTful API 设计模式的实际运用场景[^4]。 ```java @RestController @RequestMapping("/menu") public class MenuController { @Autowired private IMenuService menuService; @GetMapping public Result<?> getAllMenu() { List<Menu> menuList = menuService.getAllMenu(); return Result.success(menuList); } } ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值