2 Vue基础语法
2.1 node.js和npm的下载和使用介绍
npm install -g npm 自己下载自己
npm i vue --save 安装依赖
npm list 查看所有的环境和插件
2.2 Vue环境搭建和Vue-cli的使用介绍
Vue 多页面应用文件引用
官方拷贝：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
npm安装
Vue-cli 构建SPA应用
npm install -g vue-cli 安装vue-cli
vue init webpack-simple demo 初始化一个单页面应用
vue init webpack demo2 初始化一个完整的webpack项目
注意哦：project name + 小写字母
npm run dev = npm dev
2.3 Vue配置介绍
vue init webpack ImoocMall 构建项目
文件功能讲解：
build 打包的配置文件夹
build.js 打生产包
check-versions.js 检查版本的配置
chalk 对彩色文案和打印日志的设置
semver 版本检查工具valid：检查版本 ，clean：清除空格
webpack.base.conf.js 核心的配置
webpack.prod.conf.js 对核心配置文件的补充（webpack-merge:合并配置文件，继承基本的配置）
config 打包的配置文件
index.js 核心的配置
src 开发项目源码
App.vue 入口主件
main.js 项目入口文件
static 静态资源文件夹（图片……）
babelrc ES6配置文件（ES6语法解析，另外解析ES6语法的方法：在build/webpack.base.conf.js里配置）
editorconfig 编辑器配置文件
gitignore 忽略git提交的配置，里面的文件不会加载
postcssrc.js html添加前缀的配置
index.html 单页面入口页面
package.json 最基础的配置
2.4 Vue基础语法介绍
模板语法
- Mustache语法：{{msg}}
- Html赋值：v-html=" "
- 绑定属性：v-bind:id=" "
- 使用表达式：{{OK？"YES":"NO"}}
- 文本赋值：v-text=" "
- 指令：v-if=" "
- 过滤器：{{message|capitalize}} 和 v-bind:id="rawId | formatId"
Class和Style绑定
- 对象语法：v-bind:class="{active:isActive,'text-danger':hasError}"
- 数组语法：data:{ }
- style绑定-对象语法：v-bind:style="{color:activeColor,fontSize:fontSize+'px'}"
条件渲染
- v-if
- v-else
- v-else-if
- v-show：控制div片段
- v-cloak：不算是条件渲染
Vue 事件处理器
- v-on:click="greet" 或者@click="greet"
- v-on:click.stop（阻止冒泡）、v-on:click.stop.prevent（阻止默认事件）、v-on:click.self（绑定对象的对象本身绑定事件）、v-on:click:once（只生效一次）
- v-on:keyup.enter（捕获键盘时间）
Vue 组件
- 全局组件和局部组件
- 父子组件通讯-数据传递
- Slot