2023年8月3日14:56:49

Vue_01_note

Vue是什么？

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

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

01_创建Vue实例

Vue核心包

在线开发版本： <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> 标签引入。

步骤——四步

创建Vue实例，初始化渲染

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

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

3.创建实例

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

代码示例

  <!-- 第一、创建一个Vue容器 --><div id="app"><!-- 这里将来会编写一些用于渲染的代码逻辑 -->{{ msg }}<a href="#"> {{ count }}</a></div><!-- 第二、引入开发版本的包 （这包含注释个警告）--><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/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) 使用的数据必须存在（data）

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

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

代码示例

   <!-- 这是一个 Vue 容器 --><div id="app"><!-- 使用差值表达式-> 将data中的数据渲染出来 --><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"><!-- {{ msg }}      插值表达式不具备解析标签的能力 --><!-- 差值表达式 === innerTEXT    v-html === innerHTML --></div><a href=""></a></div><script>const app = new Vue({el: '#app',data: {msg: `<a href="http://www.itheima.com">黑马程序员</a>`}})</script>

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

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

作用

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

语法

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

使用场景及原理

使用场景：v-show适合频繁切换的场景。原理：切换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>// 创建Vue实例const app = new Vue({el: '#app',data: {flag: true}})
</script>

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

作用

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

语法

语法： 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 内联语句

作用

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

语法

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

什么是内联语句呢？

<button v-on:click="count++">按钮</button>
v-on:事件名字是可以自己决定的，不单单一个。

代码示例

 <!-- 创建容器 --><div id="app"><!-- 这里鼠标点击触发事件 --><button v-on:click="count--">-</button><span> {{ count }}</span><!-- 这里鼠标划入触发事件 --><button v-on:mouseenter="count++">+</button></div><script>// 创建一个 Vue 实例 appconst app = new Vue({el: '#app',data: {count: 100}}) </script>

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

作用

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

语法

语法：v-on :事件名=“methods中的函数名”
简写： @事件名 <button @click="fn">-</button>

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

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

代码示例

<div id="app"><button @click="fn">点击切换显示隐藏</button><h1 v-show="isShow"> Vue.Js</h1>
</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 调用传参

语法

语法： <button @click="fn（实参）">-</button>

代码示例

 <!-- 创建一个Vue容器 --><div id="app"><h3>小黑自动售货机</h3><button @click="buy(5)" class="btn1">可乐5元</button><button @click="buy(10)" class="btn2">咖啡10元</button><!-- <button @click="buy(8)" class="btn2">牛奶8元</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

作用

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

语法

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

代码示例

     <!-- 创建Vue容器 --><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_切换图片案例

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

核心思路

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

代码示例

 <!-- 创建 Vue 容器--><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><!-- 创建 Vue 实例对象 --><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

作用

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

语法

语法： v-for=“(item，index) in 数组”
1. item : 每一项（当只有一个参数的时候，可以省略小括号）
2. index 下标（不需要下标的时候可以省略）
高阶语法都有个特性：就是会根据数据来操作的，例如数据元素有几个我就遍历几次。

代码示例

 <!-- 创建容器 --><div id="app"><h3>小黑水果店</h3><ul><li v-for="(item,index) in list">{{ item }} - {{ index }}</li></ul></div><!-- 创建Vue实例对象 --><script>const app = new Vue({el: '#app',data: {list: ['西瓜','苹果','鸭梨','榴莲']}})</script>

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

13_小黑的书架案例

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

核心思路

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

代码示例

 <!-- 创建Vue容器 --><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><!-- 创建 Vue  实例 --><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

语法

语法： :key属性=“唯一标识符”
<li v-for="(item,index) in xxx" :key="唯一值"></li>

作用

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

注意点

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

15_ Vue指令 v-model

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

作用

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

语法

语法： v-model=“变量” <input type="text" v-model="变量">

代码示例

 <!-- 创建 Vue 容器 --><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><!-- 创建Vue实例 --><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指令实现）

核心功能以及步骤

列表渲染：
- v-for key的设置 {{ }} 差值表达式的使用
删除功能：
- v-on 调用传参 filter过滤器的使用覆盖修改原数组
添加功能：
- v-model绑定 unshift修改数组进行添加
底部统计和清空重置：

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

代码示例

<link rel="stylesheet" href="./css/notepad.css" />
<title>记事本</title>
</head><body><!-- 主体区域 -->
<!-- Vue容器 -->
<section id="app"><!-- 输入框 --><header class="header"><h1>Notepad</h1><!-- @keyup.enter="add"  为指令修饰符  键盘事件 --><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>
// 添加功能
// 1、v-model 绑定输入框，实时获取表单元素数据的内容
// 2、点击按钮，进行新增，就是往数组里面添加元素
//------------------------------------------------------------------------------------------------------------
const app = new Vue({el: '#app',data: {todoName: '',list: [{id: 1, name: '跑步一公里'},{id: 2, name: '跳绳100次'},{id: 3, name: '打篮球1小时'}]},methods: {// 删除功能del (id) {// 判断当前元素的id是否与给定的id不相等。如果满足该条件，则保留该元素；否则，将其过滤掉。this.list = this.list.filter(item => item.id !== id)},// 添加功能add () {// 输入为空，则提示并且退出事件程序if (this.todoName === '') {alert(`请输入任务名称`)return}this.list.unshift({id: +new Date,// Date.now()写这个也行name: this.todoName})// 重置输入框文字this.todoName = ''},clear () {this.list = []}}
})
// 功能需求： 1、列表渲染 2、删除功能 3、添加功能 4、底部统计 和 清空
</script> --><!-- 创建Vue实例对象 -->
<script>const app = new Vue({el: '#app',data: {todoName: '',list: [{ id: 1, name: '打篮球1小时' },{ id: 2, name: '跑步1小时' }]},methods: {// 得到iddel(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>