day01

• day01
  • 渐进式
    • Vue 的两种开发方式：
    • 框架
  • 创建 Vue 实例
  • 插值表达式 {
    • 作用：利用表达式进行插值，渲染到页面中
    • 语法
    • 注意
  • 响应式特性
    • 访问和修改 data 中的数据
  • Vue 中的常用指令
    • 内容渲染指令
    • 条件渲染指令
    • 事件绑定指令
    • 属性绑定指令
    • 列表渲染指令
      • v-for 中的 key
    • 双向绑定指令
      • 关于 v-model 修饰符

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

渐进式

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

Vue 的两种开发方式：

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