一、项目启动前的配置准备
1.插件
?2.目录结构
?3.服务器
同 Express, 为了便于开发 所以 脚手架生成的vue项目包已经集成了自带热更新和热编译的 服务器
Vue开发必须使用项目包自带的服务器
启动服务器, 在项目包目录下执行: npm run serve
?直接访问服务器, 默认显示的是 静态文件夹public 下的 index.html
?
?4.项目启动的流程
?启动流程
localhost:8080? -> index.html -> main.js ->App.js
二、初识VUE
页面上真正显示的内容都在App.vue文件中书写，使用 http://localhost:8080/ 地址查看（确保服务器是开启的状态），所以在书写之前，先将自动生成的代码全部删除，然后使用 ‘<+回车’或者‘vbase+回车’，自动生成基础代码，建议使用‘vbase+回车’，格式更完整。
注意：在Vue2中要求，根元素div只能有一个，我将这个div看做html中的body。
| 模块化的旧语法： | ES6的模块化语法 |
| --导出 module.exports ={} --导入 const express=require('express') | --导出export default{} --导入import express from 'express' |
ES6的模块化导出export default{}语法中的{ }里，书写配置项：
| data:放数据的 | methods:放函数/放方法 |
| vdata--生成data基础代码 | vmethods--生成methods基础代码 |
 |  |
?变化 ：以前data:{}值是对象类型，现在data的值是函数，其返回值是对象 -- 和复用性有关
?三、key
导入：当我们在vue文件中书写for循环，出现了波浪线报错，是vscode 觉得你错误，但是实际没有错。
有三种解决方案，方案1：不解决，忍耐；方案2：在设置里，关闭vetur的template报错功能，但这一方法会影响其他代码不推荐 ；方案3：添加key属性。
?
?需要注意的是：
1.names数组如果后面没有增删需求，key没有任何性能提升作用?
2.key的值不允许重复，唯一标识?
3.理论上说，不能用序号做标识，因为序号会因为序号的增删而变化，用数据本身自带的唯一标识，例如数据库查询出来的 主键id
这也是面试常考问题：key属性的作用是什么？----加标记
有key和没有key要在数组内容有变化的前提时加以区分：
| 没有key | 有key |
| 尽量复用已存在的DOM元素, 按照顺序修改其变化的属性 | 如果唯一标识相同的元素, 则直接复用. 对于不存在的元素 再生成. 提高复用效率 |
| 例子: 把瓶子的水都倒掉, 挨个装新的 | 例子: 标签相同的就直接喝.. 对于新增的才去开瓶新的 |
四、数据双向绑定
v-pre：让标签内容原样输出，不做解析
 |  |
?v-model：双向数据绑定
方向1：数据会绑定到元素上 ；方向2：用户修改元素的值，会更新到相关的数据上
在表单元素（单选.多选.下拉.文本.. 用户可以操作）中用的比较多
没有定义value值的单选框返回布尔值，有value的值返回value，多选框返回的值的需要用数组来存。
?
?五、动态class
新语法，动态class，书写格式 :class="{样式名：true/false}"，实际就是通过赋予标签class，以更改样式，值是对象类型，true就生效，false就不生效 。
?
?练习：当输入框失去焦点时，检查输入框内容是否为手机号码格式，如果不正确则显示错误信息
?练习：邮箱练习
?
页数??作者赋予for循环 直接遍历数字的能力?
v-for, 支持直接遍历数字 v-for="n in 数字"
?六、计算属性
新的配置项: computed, 凡是书写在这个配置项中的方法, 都会被自动转换成计算属性. ?使用时不需要() 就能自动触发；注意: 不适合绑定给事件. ?因为事件需要手动触发。
?
?
?
?
总结
-
脚手架生成的项目包用法
- 项目包必须用 单独的vscode 开启. 否则会影响代码提示
- 需要安装插件 才会有相关提示
- 启动方式:
npm run serve - 通过在浏览器中输入地址来访问服务器
localhost:8080
-
指令
-
v-pre: 原样输入标签中的内容
-
v-model: 双向数据绑定, 适合表单元素
- 方案1: 数据绑定给元素
- 方向2: 用户操作元素后, 会自动更改绑定的数据
-
-
动态class
:class="{样式名: true/false}"真生效, 假不生效 -
v-for, 支持直接遍历数字
v-for="n in 数字" -
计算属性: computed
- 放在这里的方法, 会自动添加 get , 变化为计算属性. 使用时不需要
() - 注意: 不适合事件绑定的方法, 因为这些方法不是自动触发 需要事件触发
- 放在这里的方法, 会自动添加 get , 变化为计算属性. 使用时不需要
?