1、Vue 核心技术与实战 day1

最新推荐文章于 2024-08-23 14:49:37 发布

是柚柚耶

最新推荐文章于 2024-08-23 14:49:37 发布

阅读量117

点赞数

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

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

版权

本文介绍了Vue的核心技术，包括快速上手Vue的原因、Vue的定义及其渐进式特性，以及创建Vue实例和插值表达式。详细讲解了Vue的响应式系统，并指导安装Vue开发者工具。此外，文章还探讨了Vue的各种指令，如v-show、v-if、v-on、v-bind、v-for和v-model，并通过实际案例进行了应用。

摘要由CSDN通过智能技术生成

一、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++"

最低0.47元/天解锁文章

是柚柚耶

关注

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 什么是渐进式所谓渐
复制链接

扫一扫

专栏目录