- vue是JavaScript渐进式框架,采用的是MVVM的设计模式
- Vue官方提供了脚手架, 一套标准的文件夹+文件结构+webpack配置，快速搭建项目基本环境,零配置，开箱即用，基于它快速搭建项目基本开发环境
一.创建脚手架-启动服务
vue create 项目名
yarn serve 启动本地热更新开发服务器
- 脚手架-主要文件介绍以及作用:
- node_modules - 都是下载的包
- public/index.html - 浏览器运行的网页
- src/main.js - webpack打包的入口
- src/App.vue - Vue页面入口
- package.json - 项目配置信息
- 脚手架-代码和结构解析
- main.js - 项目打包入口 - Vue初始化
- App.vue - Vue页面入口
- index.html - 浏览器运行的文件
- App.vue => main.js => index.html
- 脚手架-自定义配置
- 项目根目录下的vue.config.js就是自定义配置文件
- 脚手架-eslint 1.eslint是代码检查工具，违反规定就报错 1.在vue.config.js中设置lintOnSave为false重启服务器即可关闭检查
- 脚手架-单vue文件
- 独立作用域，不再担心变量重名问题
- template里只能有一个根标签
- webpack打包后, 插入到index.html显示
- Vue语法-插值表达式 1.双大括号{{}}，可以把Vue变量直接显示在标签内
- Vue指令-v-bind动态属性
- :属性名="Vue变量"
- Vue指令-v-on事件绑定
- @事件名="methods里的函数名"
- @事件名="methods里的函数名(实参)"
- 完整写法:
- --------set接收要赋予的值
- --------get里要返回给这个计算属性具体值
- Vue指令-v-on事件对象
- 无实参，直接用第一个形参接收
- 有实参，手动传入$event
- Vue指令-v-on修饰符
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- Vue指令-v-on按键修饰符
- .enter - 匹配回车键
- .esc - 匹配取消键
- Vue指令-v-model
- 可以用在表单上面
- 把Vue的数据变量和表单的value属性双向绑定在一起
- 下拉菜单的v-model写在select上,value写在option上,vue变量关联value属性的值
- v-model用在复选框时:非数组-关联的是checked属性 数组-关联的是value属性 Vue变量初始值会影响到表单的默认状态,因为双向绑定数据相互影响
- Vue指令-v-model修饰符
- .number- 转成数值类型后再赋予给Vue数据变量
- .trim - 去除两边空格后把值赋予给Vue数据变量
- .lazy - 等表单失去焦点,才把值赋予给Vue数据变量
- Vue指令-v-html
- 可以设置标签显示的内容
- 插值表达式把值当成普通字符串显示
- v-html把值当成标签进行解析显示
- Vue指令-v-show和v-if问题
- v-show或v-if，给变量赋予true/false，显示/隐藏
- v-show是用css方式显示/隐藏标签
- v-if直接从DOM树上添加/移除
- v-if可以配合v-else
- Vue指令-v-for
- 可以遍历数组/对象/固定数字/字符串格
- 谁想循环就把v-for写谁身上
- 值变量和索引变量不能用到v-for范围以外
- v-for="(值变量, 索引变量) in Vue变量" - 一定要注意in两边必须有空
- v-for更新监测
- 改变原数组后会导致v-for更新页面
- 拿返回的新数组, 直接替换旧数组可以解决v-for不更新页面的问题
- this.$set()方法更新某个值
- v-for就地更新
1.循环出新的DOM结构, 和旧的DOM结构对比, 尝试复用标签就地更新内容
- v-for中key作用 1.无key, 就地更新,有key, 按照key比较 1.唯一不重复的字符串或者数值 1.有id用id, 无id用索引 1.可以提高更新的性能
- vue_动态class
1.:class=“{类名: 布尔值}”, true使用, false不用
- vue_动态style
1.:style="{css属性名: 值}"
- vue_侦听器
- 监听某个变量值的改变
- 使用watch配置项, key是要侦听的data/计算属性名
- vue_深度侦听和立即侦听
- 监听一个对象/数组的改变
- 把侦听器写成对象形式, 给handler方法和deep:true
