Vue 学习笔记

Vue.js

---

第一部分 Vue起步

---

1. 初识Vue

1.1 MVVM框架

1.2 为什么学vue

1.3 简单认识vue

• 渐进式框架
• 解耦视图和数据
• 可复用组件
• 前端路由技术
• 状态管理
• 虚拟DOM

1.4 学习基础

• 基础的 HTML，css，JavaScript
• 会node 更好

1.5 安装

• CDN 安装
• 下载安装
• npm安装

---

2. Vue初体验

2.1 第一个vue demo -> mustache

2.2 vue的列表显示 -> v-for

2.3 案例1 计数器 -> methods & click

2.4 Vue中的MVVM

2.5 Vue中传入的options

• el:绑定的元素。
• data:引用的数据。
• computed:计算属性。
• methods:引用的方法。
• filter:过滤器。(Vue3 弃用)
• 生命周期函数

2.6 vue的生命周期

• 生命周期
• 生命周期函数
• 开发者的方法和函数
  • 全局范围称为函数
  • 对象中的函数称为方法

---

3. 插值语法

3.1 Vue的tempete模板

3.2 插值操作，插值表达式 ->mustache

• v-once：这个指令表示元素和组件只渲染一次，不会随数据的改变而改变。
• v-html:这个指令后面跟一个字符串类型，然后将字符串用html方式解析和渲染
• v-text:将表达式的内容显示在界面上。
• v-pre:用于跳过这个元素和他子元素的编译过程，然后显示出原本的mustache语法。
• v-cloak:在某些情况下，我们浏览器里会显示出未编译的mustache语法。

4. 绑定属性 -> v-bind（缩写 ：）

4.1 对象语法

4.2 数组语法

4.3 v-bind:将内容动态绑定的属性

• src
• herf

4.4 v-bind: 动态绑定 class (对象语法方式&数组语法方式)

4.5 v-bind: 动态绑定 style (对象语法方式&数组语法方式)

---

5. 计算属性（computed）

5.1 案例一 ： 连接字符串

5.2 案例二 ： books的总价格

5.3 计算属性的本质

• fullname:{set(),get()}

5.4 计算属性的缓存(computed 和 methods 的对比)

• 计算属性使用时只调用一次
• 有缓存

---

6. 事件监听

6.1 v-on

• 作用：事件监听器
• 缩写：@
• 参数：event

6.2 v-on 参数传递

• 如果方法不需要给我阐述，那么后面的括号可以省略 -> btnClick/btnClick()
• 如果方法本身有一个参数，那么会将默认的event参数传递进去 -> btnClick(event)
• 如果传入event的同时需要传入其他参数，那就要将event改为$event -> btnClick(abc,event) -> $event

6.3 v-on 修饰符

• .stop -> event.stopPropagation()
• .prevent -> event.preventDefault()
• .{keyCode|keyAlias} -> 当事件从特定键触发时才触发回调
• .enter
• .native -> 监听组件根元素的原生事件
• .once -> 只触发一次回调

---

7. 条件判断

7.1 作用：根据条件渲染DOM的元素或组件

7.2 指令

• v-if:使用此指令时，DOM中元素不存在。
• v-else
• v-else-if

7.3 v-show

• v-show:区别于v-if,使用这个指令时，元素仍存在DOM中。
• 使用频率较多时选择v-show，当只有一次切换时使用v-if

---

8. 循环遍历

8.1 v-for

8.2 索引

8.3 遍历数组

8.4 遍历对象

• 只取一个值时，默认选择 Value。
• 获取多个值时顺序为 Value key index。

<li v-for="item in arr" key="item">{{ item }}li>
<li v-for="(item,index) in arr" key="item">{{ index + 1 }}-{{ item }}li>
<li v-for="(value,key,index) in obj" key="item">{{ index + 1 }}-{{ item }}li>

8.5 组件的key属性

8.6 哪些数组的方法是响应式

- push(...nums) //-> 插入到最后一个位置
- pop(...nums) //-> 删除最后一个元素
- shift(...nums) //-> 删除第一个元素
- unshift(...nums) //-> 添加到第一位
- splice(start , deleteNumber , ...insert) //-> 插入、删除、替换元素
- sort() //-> 排序
- reverse() //-> 翻转数组
- //直接用索引改变数组没有响应式(set()方法可以实现

<div id="app">
    <ul>
        <li v-for="(item,index) in arr" key="item">{{ index + 1 }}-{{ item }}li>
        <button @click="liClick()">按钮button>
    ul>
div>
<script>
  const app = new Vue({
      el: '#app',
      data: {
        arr: ['A', 'B', 'C', 'D', 'E']
      },
      methods: {
        liClick() {
          // return this.arr.push('a')
          // return this.arr.pop('A')
          // return this.arr.splice(3,0 ,'x','y','z')
          // return this.arr.reverse()
        }
      }
    }
  )
script>

---

9. 表单绑定

9.1 高阶函数

• filter()
• map()
• reduce()

9.1 v-model

• 作用：实现表单元素和数据的双向绑定
• 内部原理：
  • v-bind绑定value属性
  • v-on 指令绑定input事件

9.2 v-model的应用

• 单选框 radio
• 复选框 CheckBox(多个选项存入数组)
• 下拉选择框 select

9.3 修饰符

• .lazy
  在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
• .number
  如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
• trim
  如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

---

第二部分 组件化开发

---

1. 组件化

1.1 什么是组件(Component)

1.2 注册组件

• 创建组件构造器(语法糖可以忽略) -> Vue.entend()
• 注册组件 -> Vue.component(TagName,{options})
  • 全局注册
  • 局部注册
• 在Vue势力范围内使用组件

2. 父组件和子组件

2.1 组件和模板分离

```html
1. 

2.