Vue01

￡神魔★判官ぃ 2021-09-25 10:56 174阅读 0赞

# 简介 #

*  本文是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.使用数组: