Vue01

简介

• 本文是2021/06/16整理的笔记
• 赘述可能有点多，还请各位朋友耐心阅读
• 本人的内容和答案不一定是最好最正确的，欢迎各位朋友评论区指正改进

1.Vue 是最火的前端框架,是一套用于构建用户界面的渐进式框架,只关注视图层，它不仅易于上手，还便于与 第三方库或既有项目整合

2.MVVM 前端分成三个部分：Model、View、ViewModel Model：保存页面中的数据 View：HTML 结构 ViewModel：是调用者 是 MVVM 思想核心 注意：MVVM 实现双向的数据绑定

3.helloWorld

1.引入 vue.js
2.html 结构 div id {{msg}}
3.script 写创建 vue 对象 var vm=new Vue({ el:’#app’, data:{ msg:‘hello’ } })

4.插值表达式、v-html 指令、v-text 指令 共同点：将数据显示在 html 结构中 不同点： 位置不同：插值表达式直接在文本中，v-html 指令、v-text 指令写在标签里 效果不同： 对于原有的内容影响不同，插值表达式不会覆盖原来的内容。但是 v-html 指令、v-text 指令会覆盖原来 的内容v-html 指令和 v-text 指令不同，v-html 指令识别标签，v-text 指令不识别标签

5.v-bind 指令绑定属性 （一）作用 绑定标签的属性 （二）使用方式 方式 1 v-bind:属性名 = “名” 方式 2 语法糖 :属性名 = “名”

6.v-on 指令绑定事件

（一）使用方式: 方式 1 v-on:事件名=”函数名” 方式 2 语法糖 @事件名=”函数名”
（二）在 vue 实例中如何定义函数 methods:{ //函数定义方式 1 方法名：function(){ }//函数定义方式 6 在 ES6 中可以使用的方式，ES6 语法的目的主要让 js 更适合去做企业级的开发 方法名(){ }}

7.跑马灯

8.事件修饰符

1.stop 阻止冒泡
2.prevent 阻止默认行为
3.self 只有点击自己时才触发回调
4.capture 给谁加 capture 谁就先冒;都加从外往里冒泡
5.once 只调用一次

9 双向数据绑定 v-model M<->V

10 v-if 显示/隐藏 每次销毁重建 v-show 显示/隐藏 display 样式控制

11.v-for

1.普通数组: v-for="(item,i) in list" :key=“item.id” 2.对象数组: v-for="(item,i) in list" :key=“item.id” 3.对象: v-for="(value,key,i) in person"

12.增删改查:操作数组的增删改查

1.计算属性和普通方法的区别

1.计算属性包在 computed,方法包在 methods 里
2.计算属性当做属性用(不能加括号),方法不加括号可以,也能加括号,能带参数
3.计算属性值没有发生变化的时候从缓存取,方法不会从缓存取,调用一次就执行一次

2.绑定 class 样式

1.使用数组:

2.使用数组带三目运算符:

3. 在 数 组 使 用 对 象 代 替 三 目 运 算 符 :

4. 使用对象形式:

变种: 使用对象形式:

data:{ objClass:{‘样式类名 1’:true,‘样式类名 2’:true} }