Vue 学习笔记（一） 文章目录

• Vue 学习笔记（一）
• 一、Vue 概述
• 二、 搭建Vue环境
• 三、Vue 知识详解
• • 1. hello 小案例
  • 2. Vue 模板语法
  • • 1. 插值语法
    • 2. 指令语法
    • 3. 数据绑定
  • 3. data 与 el
  • 4. MVVM 模型
  • 5. 数据代理
  • 6. 事件处理
  • • 1. 事件的基本使用：
    • 2. 事件修饰符
    • 3. 键盘事件
    • 4. 鼠标事件
  • 7. 计算属性（computed）
  • 8. 监视属性（watch）
  • 9. 绑定样式
  • 10. 条件渲染
  • 11. 列表渲染
  • • 1. 基本原理
    • 2. key的原理
    • 3. 列表过滤
    • 4. 列表排序
    • 5. 更新时的一个问题
    • 6. Vue监测数据改变的原理_对象
    • 7. 模拟一个数据监测
    • 8. Vue.set的使用
    • 9. Vue监测数据改变的原理_数组
    • 10. 总结Vue数据监测

一、Vue 概述 【前端|Vue 学习笔记（一）】Vue 官网
Vue 一套用于构建用户界面的渐进式JavaScrip 框架。Vue 可以自底向上逐层的应用

• 简单应用：只需一个轻量小巧的核心库。
• 复杂应用：可以引入各式各样的 Vue 插件。

Vue 的特点：

1. 采用组件化模式，提高代码的复用率，且让代码更好维护。（如下图：三个模块类似三个组件，我们修改只需在对应的组件里修改Html或JS文件即可）
   
   文章图片
   
   
2. 声明式编码，让编码人员无需直接操作 DOM ，提高开发效率。
   
   文章图片
   
   
3. 使用虚拟DOM + 优秀的Diff 算法，尽量复用 DOM 节点。
   

二、 搭建Vue环境 下载Vue
Vue分为开发版本（比较大的，会有很多警告和调试模式）和min版本的（体积小，适合用于生产环境的）。

文章图片

下载Vue开发者工具（便于调试Vue）：它是浏览器的扩展程序

文章图片

浏览器安装程序后：

文章图片


文章图片

三、Vue 知识详解 1. hello 小案例

hello,{{name}}

• Vue.config.productionTip = false 在我们访问页面的时候，会出现提示：
  
  文章图片
  

增加该注解后该提示后就能去除。
访问效果
案例总结：

• 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
• root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
• root容器里的代码被称为【Vue模板】。
• Vue 容器和实例时一一对应的。
• 真实开发中只有一个Vue实例，并且会配合着组件一起使用。
• {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。

注意：new Vue 一个实例只能接管一个容器

hello,{{name}}hello,{{name}}

效果：只能接管到匹配到的第一个容器

文章图片

一个容器也只能被一个Vue实例操作，当出现多个实例时，会报错：

hello,{{name}}，{{adress}}

文章图片

实例中的 data 属性，我们也可以进行设置层级，如：

文章图片

效果如下：

文章图片

2. Vue 模板语法 1. 插值语法

文章图片

2. 指令语法
功能：

• 用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
• 比如 v-bind:href=https://www.it610.com/article/“xxx” 或者 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
• Vue有很多指令，且形式都是：v-。此处我们只是拿v-bind举个栗子。

v-bind:[ 属性 ] = :[ 属性 ]

文章图片

页面效果：

文章图片

3. 数据绑定
Vue有两种数据绑定：

1. 单向绑定（v-bind）：数据只能从data流向页面。
2. 双向绑定：数据不仅能从data流向页面，还可以从页面流向data。

注：

1. 双向绑定一般都应用在表单类元素上（如input，select 等）。
   
2. v-model:value 可以简写为 v-model，因为v-model 默认收集的就是value值。
   初识Vue 单向数据绑定:
   双向数据绑定:
   

   单向数据绑定:
双向数据绑定:
你好啊

   
   

文章图片

3. data 与 el data 的两种写法：

1. .new Vue 时候配置el属性
2. 先创建Vue实例，随后在通过vm.$mount(’#root’) 指定el的值。

data 的两种写法：

1. 对象式
2. 函数式

如何原则 data 的写法呢，目前两种写法都可以，以后学习到组件时，data 必须使用函数式，否则会报错。
注意： 由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是 Vue 实例了。

hello,{{name}}

4. MVVM 模型

• M：模型（Model）：对应data 中的数据
• V：试图（View）：模板
• VM：试图模型（ViewModel）：Vue实例对象。
  
  文章图片
  
  虽然没有完全遵循MVVM模型，但是Vue的设计也收到了它的启发。因此在文档中经常会使用（ViewModel的缩写），这个变量名表示Vue实例。
  
  文章图片
  
  探索发现：

1. data中所有的属性，最后都出现在了vm身上。
2. vm 身上所有的属性 及 Vue原型上所有的属性，在Vue模板中都可以直接使用。
   
   文章图片
   
   
   文章图片
   

5. 数据代理 Object.defineProperty： 可以动态的个对象绑定属性并赋予值。

hello,{{name}}

数据代理： 通过一个对象代理对另一个对象中属性的操作（读/写），就给简单的小栗子：

hello,{{name}}

Vue 中的数据代理：

文章图片

• Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
• Vue 中数据代理的好处：更加方便的操作data中的数据
• 基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性

就比如：

hello,{{name}},{{adress}}

其中 {{name}} 和 {{adress}} 读取的是 vm 中的_data.name 和 _data.adress。通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性
6. 事件处理 1. 事件的基本使用：

1. 使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名。
2. 事件的回调需要配置在methods对象中，最终会在vm上。
3. methods 中配置的函数，不要用箭头函数，否则 this 就不是 vm 了。
4. methods 中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或 组件实例对象。
5. @click=‘demo’ 和 @click=“demo($event)” 效果一致，但后者可以传参。

代码：

hello,{{name}}点我提示信息(不传参) 点我提示信息(传参)

2. 事件修饰符
Vue中的事件修饰符：

1. prevent：阻止默认事件（常用）；
   
2. stop：阻止事件冒泡（常用）；
   
3. once：事件只触发一次（常用）；
   
4. capture：使用事件的捕获模式；
   
5. self：只有event.target是当前操作的元素时才触发事件；
   
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
   事件修饰符

3. 键盘事件
Vue中常用的按键别名：

1. 回车 => enter
2. 删除 => delete (捕获“删除”和“退格”键)
3. 退出 => esc
4. 空格 => space
5. 换行 => tab (特殊，必须配合keydown去使用)
6. 上 => up
7. 下 => down
8. 左 => left
9. 右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：tab、ctrl、alt、shift、meta

1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
2. .配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键（不推荐）

Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

欢迎来到{{name}}学习

4. 鼠标事件
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

1. .left
   
2. .right
   
3. .middle
   事件的基本使用 欢迎来到{{name}}学习 点我提示信息1（不传参）

7. 计算属性（computed） 姓名案例_插值语法实现：

姓：

名：

全名：{{firstName.slice(0,3)}}-{{lastName}}

姓名案例_methods实现：

姓：

名：

全名：{{fullName()}} //fullName带括号表示将函数的返回值展示出来

计算属性：

1. 定义： 要用的属性不存在，要通过已有属性(Vue实例中的属性)计算得来。
2. 原理： 底层借助了Object.defineproperty方法提供的getter和setter。
3. 计算属性最终会出现在vm上，直接读取使用即可。不能写fullName.get（），没有这种写法。
4. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

计算属性里的get函数什么时候会执行呢？

1. 初次读取时会执行一次。
2. 当依赖的数据发生改变时会被再次调用。

计算属性优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
举个栗子：

姓：

名：

测试：

全名：{{fullName}}

全名：{{fullName}}

全名：{{fullName}}

全名：{{fullName}}

8. 监视属性（watch） 监视属性watch：

• 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
• 监视的属性必须存在，才能进行监视！！

监视的两种写法：

1. new Vue时传入watch配置
2. 通过vm.$watch监视

深度监视：

1. Vue中的watch默认不监测对象内部值的改变（一层）。因为watch 如果监视的是对象，则对象地址改变时才会触发，对象里某个值改变是不是触发监听的，但是深度监视开启则可以触发监听。
2. 配置deep:true可以监测对象内部值改变（多层）。

注意：

1. .Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
2. 使用watch时根据数据的具体结构，决定是否采用深度监视。

举个栗子：

今天天气很{{info}} {{x}}切换天气 切换天气深度监视按钮： a的值是:{{numbers.a}}
点我让a+1 b的值是:{{numbers.b}}
点我让b+1 {{numbers.c.d.e}}

computed和watch之间的区别：

1. computed能完成的功能，watch都可以完成。
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。computed不可以，因为computed依赖返回值得到结果。而watch则是得到属性改变的结果。

两个重要的小原则：

1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

举个栗子：

姓：

名：

全名：{{fullName}}



9. 绑定样式

1. css 样式
   写法:class=“xxx” xxx可以是字符串、对象、数组。
   字符串写法适用于：类名不确定，要动态获取。
   数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。
   对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
   
2. style样式
   :style="{fontSize: xxx}“其中xxx是动态值。
   :style=”[a,b]"其中a、b是样式对象。
   

栗子：

.basic { width: 400px; height: 100px; border: 1px solid black; }.happy { border: 4px solid red; ; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg, yellow, pink, orange, yellow); }.sad { border: 4px dashed rgb(2, 197, 2); background-color: gray; }.normal { background-color: skyblue; }.atguigu1 { background-color: yellowgreen; }.atguigu2 { font-size: 30px; text-shadow: 2px 2px 10px red; }.atguigu3 { border-radius: 20px; } {{name}}

{{name}}

{{name}}

{{name}}

{{name}}

10. 条件渲染

1. 1.v-if
   写法：
   (1).v-if=“表达式”
   (2).v-else-if=“表达式”
   (3).v-else=“表达式”
   适用于：切换频率较低的场景。
   特点：不展示的DOM元素直接被移除。
   

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2. v-show
   写法：v-show=“表达式”
   适用于：切换频率较高的场景。
   特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉，display：none
   
3. 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
   条件渲染

11. 列表渲染 1. 基本原理

人员列表（遍历数组）

• {{p.name}}-{{p.age}}

汽车信息（遍历对象）

• {{k}}-{{value}}

测试遍历字符串（用得少）

• {{char}}-{{index}}

测试遍历指定次数（用得少）

• {{index}}-{{number}}

2. key的原理

人员列表（遍历数组） 添加一个老刘

• {{p.name}}-{{p.age}}

3. 列表过滤

人员列表

• {{p.name}}-{{p.age}}-{{p.sex}}

4. 列表排序

人员列表 年龄升序 年龄降序 原顺序

• {{p.name}}-{{p.age}}-{{p.sex}}

5. 更新时的一个问题

人员列表 更新马冬梅的信息

• {{p.name}}-{{p.age}}-{{p.sex}}

6. Vue监测数据改变的原理_对象

学校名称：{{name}} 学校地址：{{address}}

7. 模拟一个数据监测

8. Vue.set的使用

学校信息 学校名称：{{school.name}} 学校地址：{{school.address}} 校长是：{{school.leader}}学生信息 添加一个性别属性，默认值是男 姓名：{{student.name}} 性别：{{student.sex}} 年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}} 朋友们

• {{f.name}}--{{f.age}}

9. Vue监测数据改变的原理_数组

学校信息 学校名称：{{school.name}} 学校地址：{{school.address}} 校长是：{{school.leader}}学生信息 添加一个性别属性，默认值是男 姓名：{{student.name}} 性别：{{student.sex}} 年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}} 爱好

• {{h}}

朋友们

• {{f.name}}--{{f.age}}

10. 总结Vue数据监测

button{ margin-top: 10px; } 学生信息 年龄+1岁
添加性别属性，默认值：男
修改性别
在列表首位添加一个朋友
修改第一个朋友的名字为：张三
添加一个爱好
修改第一个爱好为：开车
过滤掉爱好中的抽烟
姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}
爱好：

• {{h}}

朋友们：

• {{f.name}}--{{f.age}}

推荐阅读

• 

  Docker容器下快速搭建Hyperf框架在Windows系统的本地开发环境
• 

  u盘启动快捷键u盘启动快捷键
• 

  吃了止痛药能打新冠疫苗吗
• 

  FGO魔伊复刻流程攻略 魔法少女纪行复刻活动流程推荐
• 

  随性写的
• 

  高三学生经商有前途吗？
• 

  让你的打印机重获新生 益普生打印机废墨清零软件下载
• 

  3000元价位手机怎么选好 3000元价位手机怎么选
• 

  安乐什么意思 安乐是什么意思
• 

  王者荣耀狂铁所有皮肤 王者荣耀狂铁战令皮肤怎么样
• 

  代理服务器出了什么问题？ 代理服务器不能怎么回事
• 

  纵向沟通与横向沟通有何不同 横向沟通与纵向沟通各有哪些优缺点
• 

  吃南瓜子能减肥吗
• 

  圆的面积和底面积一样吗? 圆的面积和底面积一样吗
• 

  手机cpu怎么设置最佳性能
• 

  宫腔镜|不知道宫腔镜有何优势？给你列出这3点，可别小瞧了
• 

  急脾气的妈妈怎么对待慢性子的孩子
• 

  粉扑拿回来要洗吗 粉扑用完怎么放置
• 

  的哥马上要交班，却闯祸又丢工作
• 

  mysql查询前三名 mysql查询第三到第五

• 前端|RuoYi-Cloud 若依微服务版启动教程（保姆级）
• 前端|JavaScript基础大总结
• 前端|npm ERR code ENOENT npm ERR syscall open npm ERR path CUserspackage.jsonnpm ERR code ENOENT n
• 前端|一个简单炫酷的前端小项目（html+css+js）----3D图片演示
• 安卓源码探究|android源码学习-目录
• 程序员|Android面试题精选——再聊Android-Handler机制-2，android实战教程
• Vue中使用watch同时监听多个值的实现方法
• ng-alain安装
• 面试|三流面试聊技术，二流面试聊框架，一流面试…