1、vue的介绍：
----HTML能写网页, CSS能让网页更好看, JS赋予网页交互效果, node可以提供动态数据。
2、脚手架：
前言：
工程化开发方式：在webpack环境中开发Vue
2.1、@vue/cli全局包：用来生成项目框架
2.2、生成脚手架步骤：
1、npm install -g @vue/cli----下载全局包，全局包只需要下载一次即可
2、vue -V----查看脚手架版本，看看vue框架是否下载成功
3、vue create 项目名----新建一个项目框架，注意项目名不能用中文和特殊符号以及大写英文。
4、cd 目录----返回指定目录
5、npm run serve----启动内置的热更新本地服务器,在项目根目录运行。保存自动更新网页。
2.3、框架结构目录
目录全解：
注意： vue.config.js里可以修改脚手架的配置，例如：修改端口号等。
3、代码运行流程
4、修改vue配置--现自定义服务器配置devServer
port为端口号，可以修改；open为保存自动打开页面。
5、eslint检查代码---默认会开启。
lintOnSave表示是否开启代码检测工具，true为开启。
6、单vue文件讲解
7、@vue/cli 欢迎界面清理
8、vue指令
8.1、插值表达式----在标签里生成内容，把表达式内容放到指定位置
8.2、v-bind---创建标签属性
- 语法：
v-bind:属性名="vue变量" - 简写：
:属性名="vue变量"
8.3、v-on----给标签绑定事件
语法：
- v-on:事件名="要执行的==少量代码=="
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
简写: @事件名="methods中的函数"
注意：事件之后的代码可以写回调函数也可以写表达式。
8.4、v-on事件对象：阻止默认行为
语法:
-
无传参, 通过形参直接接收
-
传参, 通过$event 指代事件对象传给事件处理函数，$event不能随便取。
8.5、修饰符：
8.5.1、on事件修饰符
语法:
-
@事件名.修饰符="methods里函数"
-
.stop - 阻止事件冒泡
-
.prevent - 阻止默认行为
-
.once - 程序运行期间, 只触发一次事件处理函数
-
8.5.2、按键修饰符
语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键
延申：写需求要先静态结构 , 再考虑动态效果。
8.6、v-model：把value属性和vue数据变量, 双向绑定到一起
- 语法: v-model="vue数据变量"
- 双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
8.6.1 v-model修饰符：让v-model拥有更强大的功能
语法:
- v-model.修饰符="vue数据变量"
- .number 以parseFloat转成数字类型
- .trim 去除一段文字首尾的空白字符
- .lazy 在change时触发而非inupt时,也就是失去焦点才更新数据
8.7、v-for：列表渲染, 所在标签结构, 按照数据数量, 循环生成
-
语法
- v-for="(值, 索引) in 目标结构"
- v-for="值 in 目标结构"
-
目标结构:
- 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
-
注意:
v-for的临时变量名不能用到v-for范围外
遍历数组：
遍历对象、字符串、数字：
