VUE基础day01
1.vue为何学
- 开发更快速，更高效
- 企业开发都在使用
- 前端工程师必备技能，高薪 2. vue是什么 渐进式javascript框架，一套拥有自己规则的语法
3.库和框架
库： 封装的属性和方法 例如：Jquery.js
框架：拥有自己的规则和元素，比库大得多 例如：vue.js
4.脚手架
1.快速搭建项目结构
2.在代码里的体现, 就是一套固定标准的, 文件夹+文件+webpack配置
- 开箱即用
- 0配置webpack
- babel支持
- css, less支持
- 开发服务器支持
- 准备脚手架 全局安装@vue/cli模块包 yarn global add @vue/cli
用Vue命令, 创建一个脚手架项目, 并启动webpack开发服务器 vue create vuecli-demo
终端切换脚手架项目下, 启动内置的webpack热更新开发服务器 cd vuecil-demo
yarn serve 4. 脚手架-目录分析
5.VUE语法
-
Vue指令-插值表达式
又叫: 声明式渲染/文本插值/大胡子语法
语法: {{ 表达式 }}
2.## MVVM设计模式
设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)
-
MVVM，一种软件架构模式，决定了写代码的思想和层次
- M： model数据模型 (data里定义)
- V： view视图 （页面标签）
- VM： ViewModel视图模型 (vue.js源码)
-
MVVM通过
数据双向绑定让数据自动地双向同步 不再需要操作DOM- V （修改视图） -> M（数据自动同步）
- M（修改数据） -> V （视图自动同步）
3.## Vue指令-v-bind动态属性
vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头
每个指令, 都有独立的作用
- 语法：
v-bind:属性名="vue变量" - 简写：
:属性名="vue变量"
4.## Vue指令-v-on事件绑定
-
语法
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
-
简写: @事件名="methods中的函数"
5.## Vue指令-v-on事件对象
- 无传参, 通过形参直接接收
- 传参, 通过$event指代事件对象传给事件处理函数
6.## Vue指令-v-on修饰符
@事件名.修饰符="methods里函数"
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
7.Vue指令 v-on按键修饰符
给键盘事件绑定修饰符
@keyup.enter - 监测回车按键
@keyup.esc - 监测返回按键
8.vue指令 -V-model双向绑定
-
语法: v-model="vue数据变量"
-
双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
注意：暂时只能用在表单标签上
9.## Vue指令-v-model修饰符
语法:
-
v-model.修饰符="vue数据变量"
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在change时触发而非inupt时
10.## Vue指令-v-show和v-if 控制标签显示或者隐藏
- 语法:
- v-show="vue变量"
- v-if="vue变量"
-
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除
-
高级
- v-else使用
11.## Vue指令-v-for
-
语法
- v-for="(值变量, 索引变量) in 目标结构"
- v-for="值变量 in 目标结构"
-
目标结构:
- 可以遍历数组 / 对象 / 数字 / 字符串
-
注意:
v-for的临时变量名不能用到v-for范围外
同级标签的key值不能重复
