1、Vue 核心技术与实战 day1

最新推荐文章于 2024-05-21 19:09:41 发布

是柚柚耶

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量96

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_51394252/article/details/132162691

版权

Vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

一、Vue 快速上手

1.1 为什么要学习Vue

1.前端必备技能
2.岗位多，绝大互联网公司都在使用Vue
3.提高开发效率
4.高薪必备技能（Vue2+Vue3）

1.2 什么是Vue

概念：Vue (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架
Vue2官网：https://v2.cn.vuejs.org/
优点：大大提升开发效率 (70%↑)
缺点：需要理解记忆规则 → 官网

1.2.1 什么是构建用户界面

基于数据渲染出用户可以看到的界面

1.2.2 什么是渐进式

所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

1.2.2.1 Vue的两种开发方式：

Vue 的两种使用方式：

① Vue 核心包开发
场景：局部模块改造

② Vue 核心包 & Vue 插件工程化开发
场景：整站开发

1.2.3 什么是框架

所谓框架：就是一套完整的解决方案

举个栗子
如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。
我们只需要在“毛坯房”的基础上，增加功能代码即可。

提到框架，不得不提一下库。

库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

框架的特点：有一套必须让开发者遵守的规则或者约束

咱们学框架就是学习的这些规则官网

1.2.4 总结

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

构建用户界面：基于数据动态渲染页面
渐进式：循序渐进的学习
框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则)
规则 → 官网

1.3 创建 Vue 实例，初始化渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        创建Vue实例，初始化渲染
        1. 准备容器（Vue所管理的范围）
        2. 引包（开发版本包/生产版本包）
        3. 创建实例
        4. 添加配置项 => 完成渲染
     -->

     <div id="app">
        <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
        <h1>{{ msg }}</h1>
        {{ 666 }}
     </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 黑马',
                count: 666
            }
        })
     </script>
</body>
</html>

1.3.1 总结

创建 Vue 实例，初始化渲染的核心步骤：

准备容器
引包 (官网) - 开发版本 / 生产版本
创建 Vue 实例 new Vue()
指定配置项 el data => 渲染数据
① el 指定挂载点，选择器指定控制的是哪个盒子
② data 提供数据

1.4 插值表达式 {{ }}

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

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

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

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

3. 注意点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        插值表达式：Vue的一种模板语法
        作用：利用 表达式 进行插值渲染
        语法： {{ 表达式 }}

        注意点：
            1.使用的数据要存在
            2.支持的表达式，不是语句 if for
            3.不能在标签属性中使用{{}}
            <p title="{{ nickname }}">{{ nickname}}</p> 错误

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

4. 总结

插值表达式的作用是什么？
利用表达式进行插值，将数据渲染页面中
语法格式？
{{ 表达式 }}
插值表达式的注意点：
① 使用的数据要存在（data）
② 支持的是表达式，而非语句 if … for
③ 不能在标签属性里面使用

1.5 Vue 核心特性：响应式

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

1.5.1 总结

什么是响应式呢？
数据改变，视图自动更新
使用 Vue 开发 → 专注于业务核心逻辑 即可
如何访问或修改数据呢？
data中的数据, 最终会被添加到实例上
① 访问数据： “实例.属性名”
② 修改数据： “实例.属性名” = “值”

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

（1）通过谷歌应用商店安装（国外网站）
（2）极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件
https://chrome.zzzmh.cn/index

二、 Vue 指令

Vue 会根据不同的 【指令】，针对标签实现不同的 【功能】
指令：带有 v- 前缀 的特殊 标签属性

2.1 总结

什么是 Vue 指令呢？
指令就是带有 v- 前缀 的特殊属性，不同属性对应不同的功能
学习不同指令 → 解决不同业务场景需求
如果需要动态解析标签，可以用哪个指令？语法？
v-html = "表达式 " → 动态设置元素 innerHTML

2.2 Vue 指令 v-show vs 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: false
      }
    })
  </script>

</body>
</html>

2.2 Vue 指令 v-else v-else-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.7.14/dist/vue.js"></script>
  <script>

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

</body>
</html>

运行结果：

2.3 Vue 指令 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 @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>
</body>
</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">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        fn() {
          // 让提供的所有methods中的函数，this都指向当前实例
          // console.log('执行了fn', app.isShow)
          // console.log(app === this)
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>
</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>
  <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="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods: {
        buy(price) {
          this.money -= price
        }
      }
    })
  </script>
</body>
</html>

运行程序：

2.4 Vue 指令 v-bind

<!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">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-01.png',
        msg: 'hello,波仔'
      }
    })

  </script>
</body>
</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">
    <button v-show="index > 0" @click="index--">上一页</button>
    <div>
      <img :src="list[index]" alt="">
    </div>
    <button v-show="index < list.length - 1" @click="index++">下一页</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index: 0,
        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',
        ]
      }
    })
  </script>
</body>
</html>

2.5 图片切换案例-波仔学习之旅

核心思路分析：
① 数组存储图片路径 → [ 图片1，图片2，图片3， … ]
② 准备下标 index，数组[下标] → v-bind 设置 src 展示图片 → 修改下标切换图片

<!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-show="index > 0" @click="index--">上一页</button>
    <div>
      <img :src="list[index]" alt="">
    </div>
    <button v-show="index < list.length - 1" @click="index++">下一页</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index: 0,
        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',
        ]
      }
    })
  </script>
</body>
</html>

2.6 Vue 指令 v-for

<!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 list">{{ item }}</li>
    </ul>
    
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨']
      }
    })
  </script>
</body>
</html>

2.7 图书管理案例 - 小黑的书架

<!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, index) in booksList" :key="item.id">
        <span >{{ item.name}}</span>
        <span >{{ item.author }}</span>
        <!-- 注册点击事件 → 通过id进行删除数组的对应项  -->
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/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: {
        del(id) {
          // console.log('删除', id)
          // 通过id进行删除数组中的对应项 → filter(不会改变原数组)
          // filter :根据条件，保留满足条件的对应项，得到一个新数组
          // console.log(this.booksList.filter(item => item.id !== id))
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>
</html>

2.8 v-for 中的 key

语法：key属性 = “唯一标识”
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

v-for 的默认行为会尝试 原地修改元素（就地复用）

2.9 Vue 指令 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">
    <!-- 
      v-model 可以让数据和视图，形成双向数据绑定
      （1）数据变化，视图自动更新
      （2）试图变化，数据自动更新
      可以快速获取或设置表单元素的内容
     -->
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password:''
      },
      methods:{
        login () {
          console.log(this.username, this.password)
        },
        reset () {
          this.username = ''
          this.password = ''
        }
      }
    })
  </script>
</body>
</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" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>小黑记事本</h1>
    <input placeholder="请输入任务" class="new-todo" v-model="todoName"/>
    <button class="add" @click="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main"> 
    <ul class="todo-list">
      <li class="todo" v-for="(item, index) in list" :key="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 @click="clear" class="clear-completed">
      清空任务
    </button>
  </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  // 添加功能
  // 1.通过v-model绑定输入框 → 实时获取表单元素的内容
  // 2.点击按钮，进行新增，往数组的最前面加 unshift

  const app = new Vue({
    el: '#app',
    data: {
      list: [
        {id: 1, name: '跳绳'},
        {id: 2, name: '跳舞'}
      ],
      todoName: ''
    },
    methods: {
      del(id){
        // console.log(id) => filter 保留所有不等于该id的项
        this.list = this.list.filter(item => item.id !== id )
      },
      add() {
        // 如果想要自动过滤用户输入的首位空白字符，可以给v-model添加trim修饰符
        if (this.todoName.trim() === '') {
          alert('请输入任务名称')
          return
        } 
        this.list.unshift({
          id: +new Date(),
          name: this.todoName
        })
        this.todoName = ''
      },
      clear() {
        this.list = []
      }
    }
  })

</script>
</body>
</html>

是柚柚耶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
1、Vue 核心技术与实战 day1

一、Vue 快速上手1.1 为什么要学习Vue1.前端必备技能2.岗位多，绝大互联网公司都在使用Vue3.提高开发效率4.高薪必备技能（Vue2+Vue3）1.2 什么是Vue概念：Vue (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架Vue2官网：https://v2.cn.vuejs.org/优点：大大提升开发效率 (70%↑)缺点：需要理解记忆规则 → 官网1.2.1 什么是构建用户界面基于数据渲染出用户可以看到的界面1.2.2 什么是渐进式所谓渐
复制链接

扫一扫