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