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