day01

day01

目录

  • Vue 是一套构建用户界面的渐进式框架

渐进式

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

Vue 的两种开发方式：

image-20231216160052051

  1. Vue 核心包开发

    场景：局部模块改造

  2. Vue 核心包 & Vue 插件 & 工程化

    场景：整站开发

框架

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

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

    • 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts 等

  • 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可

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

创建 Vue 实例

  • html 页面里

  • 核心步骤（4步）：

  1. 准备容器 <div id="app"> xxx </div>

  2. 引包（官网） — 开发版本 / 生产版本

    • 到 v2 官网找版本下载
    • 或是用代码：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  3. 创建 Vue 实例，如：const app = new Vue({ })

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

    1. el: 指定挂载点（是渲染管理的哪个盒子：id="app" 的 div 盒子）
    2. data: 提供数据
    <script>
  const app = new Vue({
    el: '#app',
    data: {
      msg: 'xxxx'
    }
  })
</script>

插值表达式 {

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

  • 我们可以用插值表达式渲染出 Vue 提供的数据

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

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

语法

插值表达式语法：{{ 表达式 }}

<h3>{{title}}<h3>
<p>{{nickName.toUpperCase()}}</p>
<p>{{age >= 18 ? '成年':'未成年'}}</p>
<p>{{obj.name}}</p>
<p>{{fn()}}</p>

注意

  • 在插值表达式中使用的数据必须在 data 中进行了提供
  • 支持的是表达式，而非语句，比如：if、for ...
  • 不能在标签属性中使用 {{ }} 插值（插值表达式只能标签中间使用）

响应式特性

  • 响应式简单理解就是数据变，视图对应变

访问和修改 data 中的数据

  • data 中的数据，最终会被添加到实例上，最简单的就是在 F12 的 Console 里可以输入查看

    • 访问数据：直接输入 " 实例.属性名 " 回车，就打印出数据了

    • 修改数据：直接输入 "实例.属性名" = "值" 回车，页面数据就更改了

Vue 中的常用指令

  • 概念：指令（Directives）是 Vue 提供的带有 v- 前缀的特殊标签属性

  • vue 中的指令按照不同的用途可以分为如下 6 大类：

    • 内容渲染指令（v-html、v-text）

    • 条件渲染指令（v-show、v-if、v-else、v-else-if）

    • 事件绑定指令（v-on）

    • 属性绑定指令 （v-bind）

    • 双向绑定指令（v-model）

    • 列表渲染指令（v-for）

内容渲染指令

  • 内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下两个：

    • v-text（类似 innerText）

      • 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
      • 类似 innerText，使用该语法，会覆盖 p 标签原有内容，即 hello 就无了

    • v-html（类似 innerHTML）

      • 就能够解析 HTML 的标签，将标签的样式呈现出来

        <p v-html="intro">hello</p>

data:{
	intro:'<h2>这是一个<strong>非常优秀</strong>的xxx<h2>'
}

条件渲染指令

  • 条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

  1. v-show

    • 作用：控制元素显示隐藏
    • 语法：v-show = "表达式" 表达式值为 true 显示， false 隐藏
    • 原理：切换 css 的 display:none 控制显示隐藏
    • 场景：频繁切换显示隐藏的场景

  2. v-if

    • 作用：控制元素显示隐藏（条件渲染：false 的话就移除标签）
    • 语法：v-if= "表达式" 表达式值 true 显示，false 隐藏
    • 原理：基于条件判断，是否创建或移除元素节点
    • 场景：要么显示，要么隐藏，不频繁切换的场景
      • 如给未登录的显示 “ 请登录 ”，已经登录的就不加以显示

  3. v-else 和 v-else-if

    • 作用：辅助 v-if 进行判断渲染
    • 语法：v-else、v-else-if = "表达式"
    • 需要紧接着 v-if 的后面使用，不能单独用

事件绑定指令

  • 注册事件 = 添加监听 + 提供处理逻辑

  • 使用 Vue 时，如需为 DOM 注册事件，及其的简单，语法如下：

    • <button v-on:事件名="内联语句">按钮</button>

      • 内联语句：可视化代码，如：@click="count--"

    • <button v-on:事件名="处理函数">按钮</button>

    • <button v-on:事件名="处理函数(实参)">按钮</button>

    • v-on: 简写为 @

      • 点击事件：@click
      • 鼠标滑动事件：@mouseenter

  1. 事件处理函数

    • 注意：
      • 事件处理函数应该写到一个跟 data 同级的配置项（methods）中
    • methods 中的函数内部的 this 都指向 Vue 实例
      • 例：this.data 值 使用

  2. 给事件处理函数传参

    • 如果不传递任何参数，则方法无需加小括号；methods 方法中可以直接使用 e 当做事件对象

      handleClick(e) {
  console.log('点击事件对象:', e);
}

    • 如果传递了参数：<button @click="handleClick('Hello', $event)">Click me</button>，则实参 $event 表示事件对象（占位）

      handleClick(message, e) {
  console.log(message); // 输出: Hello
  console.log('点击事件对象:', e);
}
      • 可打印出 e 内容，找自己需要的部分

属性绑定指令

  • 作用：动态设置 html 的标签属性，比如：src、url、title

  • 语法：v-bind:属性名=“表达式”

    • v-bind 可以简写成 :

  • 比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储，则可以这样设置属性值：

    • <img v-bind:src="url" /> 同 <img :src="url" />
    • url 为 data 里一个照片的路径的变量名

列表渲染指令

  • Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构

  • v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

    • item：数组中的每一项

    • index：每一项的索引，不需要可以省略

      • (item) in arr 或 item in arr

    • arr：被遍历的数组

  • 此语法也可以遍历对象和数字

  • 实例代码：

    <ul>
  <li v-for="(item, index) in xxList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.price }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

<!--  筛选删除：  -->
this.xxList = this.xxList.filter(item => item.id !== 传来的id)
    • filter 是收集新数据到新数组，而不会改变原数组

v-for 中的 key

  • 语法：key="唯一值"

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

    • 上述代码 <li v-for="(item, index) in xxList" :key="item.id"> 里的 :key="item.id"，在这里去掉 key 并不会报错，但是失去了唯一标识，在日后进行渲染的时候很可能出问题

  • 为什么加 key：Vue 的默认行为会尝试原地修改元素（就地复用）

    • 就例如，xxList 数组的每一列的例的样式不同 " 红橙黄绿 "，然而不加 key 确实是删除了那一个 xxList 内容，但是 vue 的就地复用没有删除对应的例，即对应的样式仍保留了（没有 key 唯一标识上），所以不管删除哪一个元素，例的样式都是保留着 " 红橙黄 "，再删一个就是保留 " 红橙 "

    • 即：每次删除最后的一个例，然后取 xxList 内容放到剩余例的样式上，并没有把想要删的那个例样式和内容一起删去

    • 就是例和 xxList 的内容没有 key 唯一，就成了分离开的两大块了，每次显示的时候现场拼合

  • 注意：

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

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

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

双向绑定指令

  • 所谓双向绑定就是：

    1. 数据改变后，呈现的页面结果会更新

    2. 页面结果更新后，数据也会随之而变

  • 作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

  • 语法：v-model="变量"

关于 v-model 修饰符

  • v-model.trim：去除首位空格
  • v-model.number：转为数字
    • 要是输入的是 abc 也不会强转成数字，就是 "abc" 了
posted @ 2024-02-19 22:46  朱呀朱~  阅读(6)  评论(0)  编辑  收藏  举报