day1 vue（初识vue） @vue/cli脚手架的安装及vue基础指令

Vue基本概念

---

为什么学vue

vue开发效率更高

大厂 公司企业都在用

掌握技能 拿高薪

vue是什么

是一个javascript渐进式框架

什么是渐进式

逐渐使用 集成更多功能

库和框架的区别

库里面拥有许多属性和方法 可以随意添加修改，规则性没有那么强

框架的规则性很多 是一套拥有自己规则的语法

@vue/cli脚手架

---

@vue/cli脚手架是什么有什么好处

方便开发 不用自己去配置

开箱即用

  0配置webpack

  babel支持

  css, less支持

  开发服务器支持

@vue/cli目录分析

项目入口和各文件关系是什么呢

                                                                                                                                                           

main.js和App.vue, 以及index.html作用和关系

1. main.js – 项目打包主入口 – Vue初始化

2. App.vue – Vue页面主入口

3. index.html – 浏览器运行的文件

4. App.vue => main.js => index.html

eslint检查代码

vue基础指令

---

Vue基础-插值表达式

在dom标签中, 直接插入vue数据变量

MVVM设计模式

Vue指令-v-bind

给标签属性设置Vue变量的值

Vue指令-v-on

给标签绑定事件

  语法

  v-on:事件名=“要执行的少量代码"

  v-on:事件名=“methods中的函数名"

  v-on:事件名=“methods中的函数名(实参)"

 

Vue指令-v-on 事件对象

Vue事件处理函数中, 拿到事件对象

 

  无传参, 通过形参直接接收

  传参, 通过 $event 指代事件对象传给事件处理函数

Vue指令-v-on修饰符

在事件后面.修饰符名 - 给事件带来更强大的功能

  @事件名.修饰符="methods里函数"

  修饰符列表

.stop - 阻止事件冒泡

  .prevent - 阻止默认行为

  .once - 程序运行期间, 只触发一次事件处理函数

Vue指令-v-on按键修饰符

给键盘事件, 添加修饰符, 增强能力

  @keyup.enter - 监测回车按键

  @keyup.esc - 监测返回按键

练习_翻转世界

Vue指令-v-model

value属性和Vue数据变量, 双向绑定到一起

 

 

Vue指令-v-model修饰符

1. .number – 转成数值类型赋予给Vue数据变量

2. .trim – 去除左右两边空格后把值赋予给Vue数据变量

3. .lazy – 等表单失去焦点, 才把值赋予给Vue数据变量

  

Vue指令-v-text和v-html

更新DOM对象的innerText/innerHTML

  v-text="Vue数据变量"

  v-html="Vue数据变量"

 

Vue指令-v-show和v-if

控制标签的隐藏或出现

  v-show="Vue变量"

  v-if="Vue变量"

  原理

  v-show 用的display:none隐藏 (频繁切换使用)

  v-if 直接从DOM树上移除

  高级

  v-else的使用

 

案例_折叠面板

 

Vue指令-v-for

列表渲染, 所在标签结构, 按照数据数量, 循环生成

  语法:

  v-for="(值变量, 索引变量) in 目标结构"

  v-for="值变量 in 目标结构"

  目标结构:

  可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

  注意:

  v-for的临时变量名不能用到v-for范围外