Vue_01学习：详细语法以及代码示例 + 小练习 + 综合案例 （第一期）

2023年8月3日14:56:49

Vue_01_note

Vue是什么？

概念：Vue是一个用于 构建用户界面 的 渐进式 框架

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

01_创建Vue实例

Vue核心包

1. 在线开发版本： 标签引入。

步骤——四步

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

​ 1.准备容器（就是Vue所管理的范围）

​ 2.引包（开发版本包 / 生产版本包）

​ 3.创建实例

​ 4.添加配置项 => 完成渲染

代码示例

  
  <div id="app">
  
  {{ msg }}
  <a href="#"> {{ count }}a>
  div>


  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>

  <script>
     // 一旦引入 VueJs核心包，在全局环境，就有了 Vue 构造函数

     // 第三、创建一个 Vue 实例
     const app = new Vue ({
         // 第四、通过 el 配置一个选择器，指定 Vue 管理的是哪个盒子
         el: '#app',
         // 通过 data 提供数据
         data: {
             msg: 'hello Vue',
             count: 666
         }
     })
  script>

• el ：指定挂载点，选择器指定控制的是哪个盒子
• data ： 提供数据

Vue实例 ：app 管控的范围 仅限于在挂载点指定的那个容器盒子。

---

02_差值表达式

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

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

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

语法

1. 语法： {{ 表达式 }} 双花括号 “只要能求出结果的表达式都可以往里面丢”，但不能使用语句 。可以这样理解：（语句是代码块，表达式是有结果的式子）
2. 注意点：

(1) 使用的数据必须存在（data）

（2） 支持的是表达式、而非语句，例如：if for…

（3） 不能在标签属性中使用{{}} 差值表达式

代码示例

   
   <div id="app">
     
     <span>{{ username }}span><br>
     <span>{{ username.toUpperCase() }}span><br>
     <span>{{ username + '加油'}}span><br>
     <span>{{ age >= 18 ? '成年' : '未成年'}}span><br>
     <span>{{ friend.name }}span>
     <span>{{ friend.desc }}span>
   div>

  
  <script>
     // 这是一个 Vue 实例
     const app = new Vue ({
         el: '#app',
         data: {
             username: 'liubuzhu',
             age: 18,
             friend: {
                 name: 'Mrliu',
                 desc: '热爱学习 Vue'
             }
         }
     })
  script>

---

03Vue 核心特性：响应式

响应式： 数据发生变化，视图自动更新。

​ data中的数据，是会被添加到实例上， 也就是实例对象 app

​ 1.访问数据 :实例.属性名

​ 2.修改数据 :实例.属性名 = 新的值

原理：数据变化了 -> Vue监听到数据修改 —> 自动更新视图（DOM操作）

• 使用 Vue 开发 —> 专注于业务核心逻辑 即可，视图会自动渲染。

---

04 Vue 指令：v-html

Vue 中的指令：特征是 v- 开头 ，注意：他是特殊的 属性 ，和普通的属性不同。

语法

语法：v-指令 === 表达式

• 可以理解为：差值表达式 === innerTEXT v-html === innerHTML

代码示例

 <div id="app">
     
     <div v-html="msg">
         
         

     div>
     <a href="">a>
 div>
 <script>
     const app = new Vue({
         el: '#app',
         data: {
             msg: `
                 黑马程序员
                 
             `
         }
     })
 script>

• 不同的指令——> 解决不同的需求（功能不同）

---

0_5Vue 指令：v-show 和 v-if

作用

1. v-show：控制元素的显示和隐藏 , v-show只是简单的控制隐藏，本质是在display：none属性值而已.
2. v-if：控制元素的显示隐藏（条件渲染）, v-if（是条件渲染）隐藏的时候元素都没有了：本质是判断条件，控制元素的 创建 和 移除.

语法

1. v-show：v-show=“表达式” 注意： 表达式值为： true显示 ， false隐藏。
2. v-if ： v-if=“表达式” 注意： 表达式值 true显示 ，false隐藏。

使用场景及原理

1. 使用场景：v-show适合频繁切换的场景 。 原理：切换display：none。
2. 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>
     // 创建Vue实例

     const app = new Vue({
         el: '#app',
         data: {
             flag: true
         }
     })
script>

---

0_6 Vue 指令 v-else 和v-else-if

作用

1. 作用： 辅助 v-if 进行判断渲染

---

语法

1. 语法： v-else v-else-if=“表达式”

---

注意：v-else需要紧挨着 v-if 一起使用，不能单独使用。

---

代码示例

 <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>
     const app = new Vue({
         el: '#app',
         data: {
             gender: 1,
             score: 10
         }
     })
 script>

---

0_7Vue 指令 v-on 内联语句

作用

1. 作用： 注册事件 = 添加监听 + 提供处理逻辑

---

语法

1. v-on:事件名=“内联语句”
2. 简写方式：v-on: === @ ==> @click="处理逻辑"

---

• 什么是内联语句呢？

  按钮

• v-on:事件名字是可以自己决定的，不单单一个。

---

代码示例

 
 <div id="app">
     
     <button v-on:click="count--">-button>
     <span> {{ count }}span>
     
     <button v-on:mouseenter="count++">+button>
 div>

 <script>
     // 创建一个 Vue 实例 app
     const app = new Vue({
         el: '#app',
         data: {
             count: 100
         }

     }) 
 script>

---

0_8 Vue 指令 v-on methods中的函数名

---

作用

1. 作用：注册事件 = 添加监听 + 提供处理逻辑

---

语法

1. 语法：v-on :事件名=“methods中的函数名”
2. 简写： @事件名 -

---

在 Vue 实例对象中 ：data 提供数据 那么methods 给我们提供方法

---

在methods中的所有函数，this指向的都是当前 Vue 的实例对象。

---

代码示例

<div id="app">
 <button @click="fn">点击切换显示隐藏button>
 <h1 v-show="isShow"> Vue.Jsh1>
div>

<script>
 const app = new Vue({
     el: '#app',
     data: {
         isShow: true
     },
     methods: {
         fn () {
             // methods里面的所有函数this指向的都是Vue实例
             this.isShow = !this.isShow
         }
     }
 }) 

• 切记： methods里面的所有函数this指向的都是Vue实

---

0_9 Vue 指令 v-on 调用传参

---

语法

1. 语法： -

---

代码示例

 
 <div id="app">
     <h3>小黑自动售货机h3>
     <button @click="buy(5)" class="btn1">可乐5元button>
     <button @click="buy(10)" class="btn2">咖啡10元button>
     
     <span>银行卡余额为： {{ money }}元span>
 div>


 <script>
     // 创建Vue实例
     const app = new Vue({
         el: '#app',
         data: {
             money: 100
         },
         methods: {
             buy (price) {
                 this.money = this.money - price
             }
         }

     })

 script>

• 切记methods里面的this指向实例对象

---

10_Vue 指令 v-bind

---

作用

1. 作用： 动态的设置HTML的标签属性 -> src url title …

---

语法

1. 语法： v-bind：属性名=“表达式”
2. 简写： v-bind:src === :src 省略了v-bind

---

代码示例

     
     <div id="app">
         <img :src="imgUrl":title="msg" alt="">
     div>

     <script>
         // 创建一个 Vue 实例对象
         const app = new Vue({
             el: '#app',
             data: {
                 imgUrl: './imgs/10-01.png',
                 msg: 'hello 波仔'
             }
         })
     script>

---

11_切换图片案例

---

需求：点击上一张或下一张进行图片的更换

---

核心思路

1. 将图片数据存放在数组中。
2. 准备好一个数组下标变量，初始值为0 。
3. 使用 v-bind 指令动态的修改 src 的内容。
4. 解决晓得bug，当图片位于第一张和最后一张的时候，需要将对应的按钮进行隐藏，由于需要频繁显示隐藏的，我们使用 v-show来实现。
5. 我们将v-show表达式的值设置为 数组 下标 > 0 ，意思就是当下标大于0 就显示，否则隐藏。
6. 反之，当数组下标 < 数组.length - 1 就显示，否则隐藏。

---

代码示例

 
 <div id="app">
     <button v-show="count > 0" @click="count--">上一页button><br>
     <img :src="arrUrl[count]" alt=""><br>
     <button v-show="count < arrUrl.length - 1" @click="count++">下一页button>
 div>

 
 <script>
     const app = new Vue({
         el: '#app',
         data: {
             // 2、准备数组下标
             count: 0,
             // 1、将图片存于数组中
             arrUrl: [
                 './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>

---

12_Vue 指令 v-for

作用

1. 作用：基于数据循环，多次渲染整个元素 -> 数组、对象、数字…

---

语法

1. 语法： v-for=“(item，index) in 数组”

   1. item : 每一项 （当只有一个参数的时候，可以省略小括号）
   2. index 下标 （不需要下标的时候可以省略）

2. 高阶语法都有个特性：就是会根据数据来操作的，例如数据元素有几个我就遍历几次。

---

代码示例

 
 <div id="app">
     <h3>小黑水果店h3>
     <ul>
         <li v-for="(item,index) in list">
             {{ item }} - {{ index }}
         li>
     ul>
 div>

 
 <script>
     const app = new Vue({
         el: '#app',
         data: {
             list: ['西瓜','苹果','鸭梨','榴莲']
         }
     })
 script>

• 里面可以通过插值表达式来跟新内容哦

---

13_小黑的书架案例

需求：通过 v-for指令 遍历数组中的数据到书架中，然后动态的进行渲染，并且能够实现删除功能（注意 Vue 是数据驱动，数据变化，视图自动更新）。

核心思路

1. 通过v-for将数据动态的渲染到容器中
2. 使用插值表达式将数据跟换
3. 使用methods方法，创建点击删除函数
4. 当我们点击删除，通过 v-for里面的 item得到 item.id拿到当前元素的id
5. 然后将id通过v-on参数传递给我们methods方法里面的del函数
6. 最后通过数组过滤器 filter方法过滤满足条件的元素，并返回新数组，记得重新给原数组赋值。

代码示例

 
 <div id="app">
     <h3>小黑的书架h3>
     <ul>
         <li v-for="(item,index) in booksList" :key="item.id">
             <span>{{ item.name }}span>
             <span> {{ item.author }} span>
             <button @click="del(item.id)">删除button>
         li>
     ul>
 div>


 
 <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)
                 // 使用filter过滤器过滤符合条件的，并返回新数组。
                 this.booksList = this.booksList.filter(item => item.id !== id)
             }
         }
     })
 script>

---

14_ Vue指令 v-for中的key

语法

1. 语法 ： :key属性=“唯一标识符”

---

作用

1. 作用： 给列表添加唯一的标识。便于 Vue 进行列表项的正确排序复用。
2. • 可以理解为：当加了key，id就是唯一标识符，删除了id也得删除掉（位置），但是不加key，删除了，这个id（位置）只是换了数据而已。
3. • 使用v-for一定要加上key属性

---

注意点

1. key的值只能是 字符串 或 数字
2. key的值必须具有唯一性
3. 推荐使用id作为key（唯一），不推荐使用index作为key(会变化，不对应)

---

15_ Vue指令 v-model

• 双向数据绑定：视图变化了，数据自动更新，数据变化了，视图自动更新。

作用

1. 作用：给表单元素使用， 双向数据绑定 ——> 可以快速 获取 或 设置 表单元素内容。

---

语法

1. 语法： v-model=“变量”

---

代码示例

 
 <div id="app">
     账户：<input type="text" v-model="username"><br>
     密码：<input type="password" v-model="password"><br>
     <button @click="login">登录button>
     <button @click="reset">重置button>
 div>

 
 <script>
     const app = new Vue({
         el: '#app',
         data: {
             username: '',
             password: ''
         },
         methods: {
             login () {
                 console.log(this.username,this.password)
             },
             reset () {
                 this.username = ''
                 this.password = ''
             }
         }
     })
 script>

• 数据变化，视图自动更新
• 视图变化，数据自动更新

---

综合案例-记事本功能实现

需求：对记事本的增删进行操作、实现统计、和重置（要求使用Vue指令实现）

核心功能以及步骤

1. 列表渲染：

   • v-for key的设置 {{ }} 差值表达式的使用

2. 删除功能：

   • v-on 调用传参 filter过滤器的使用 覆盖修改原数组

3. 添加功能 ：

   • v-model绑定 unshift修改数组进行添加

4. 底部统计 和 清空重置：

• 统计数组长度
• 覆盖数组清空列表
• v-show控制底部的显示和隐藏

---

代码示例

<link rel="stylesheet" href="./css/notepad.css" />
<title>记事本title>
head>

<body>



<section id="app">
 
 <header class="header">
   <h1>Notepadh1>
   
   <input v-model="todoName" placeholder="请输入任务" class="new-todo" />
   <button @click="add" class="add">添加任务button>
 header>
 
 <section class="main">
   <ul class="todo-list">
     <li class="todo" v-for="(item,index) in list" :key="item.id">
       <div class="view">
         <span class="index">{{ item.id }}span> <label>{{ item.name }}label>
         <button @click="del(item.id)" class="destroy">button>
       div>
     li>
   ul>
 section>
 
 <footer v-show="list.length > 0" class="footer">
   
   <span class="todo-count">合 计:<strong>{{list.length }}strong>span>
   
   <button @click="empty" class="clear-completed">
     清空任务
   button>
 footer>
section>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>




<script>
 const app = new Vue({
   el: '#app',
   data: {
     todoName: '',
     list: [
       { id: 1, name: '打篮球1小时' },
       { id: 2, name: '跑步1小时' }
     ]
   },
   methods: {
     // 得到id
     del(id) {
       // console.log(id)
       // 过滤符合条件的重新赋值给数组
       this.list = this.list.filter(item => item.id !== id)
     },
     add() {
       if (this.todoName.trim() === '') {
         alert('请输入任务名称')
         return
       }
       this.list.unshift({
         id: +new Date(),
         name: this.todoName
       })
       this.todoName = ''
     },
     empty() {
       this.list = []
     }
   }
 })
script>

---