官方文档： https://cn.vuejs.org/v2/guide/
一.概况
1.Vue概况
- Vue本身并不是一个框架
- Vue结合周边生态构成一个灵活的、渐进式框架
- 声明式渲染
- 组件系统
- 客户端路由
- 状态管理
- 构建工具
2.Vue核心思想：数据驱动、组件化
3.Vue和React对比
Vue
- 模板和渲染函数的弹性选择
- 简单的语法及项目构建
- 更快的渲染速度和更小的体积
React
- 更适用大型应用和更好的可测试性
- 同时适用于Web端和原生App
- 更大的生态圈带来的更多支持和工具
Vue和React相同点
利用虚拟DOM实现快速渲染
轻量级
响应式组件
服务器端渲染
易于集成路由工具，打包工具以及状态管理工具
优秀的支持和社区
4.Vue环境搭建
- Vue多页面应用文件引用
<script src="http://unpkg.com/vue/dist/vue.js"></script> - vue-cli构建单页面应用
- npm install -g vue-cli（vue-cli3安装npm install -g @vue/cli）点我跳转官方文档
- vue init webpack-simple demo（简单demo）
- vue init webpack demo（复杂demo）
5.MVVM
二.基础常用语法
1.模板语法
- Mustache语法：
- Html赋值：v-html = “ “
- 绑定属性：v-bind：id = “ “
- 使用表达式：
- 文本赋值：v-text = “ “
- 指令：v-if = “ “
- 过滤器：和v-bind：id = “ rawId | formatId “
2.计算属性和侦听器
- computed
- watch
3.Class和Style绑定
- 对象语法：
1 | v-bind：class = "{ active：isActive, 'text-danger'：hasError }" |
- 数组语法：
1 | <div v-bind：class = "[activeClass,errorClass]"> |
2 | data：{ |
3 | activeClass：'active', |
4 | errorClass：'text-danger' |
5 | } |
- style绑定–对象语法：
1 | v-bind：style = "{ color：activeColor, fontSize：fontSize + 'px' }" |
4.条件渲染
- v-if
- v-else
- v-else-if
- v-show
- v-cloak
5.列表渲染
- v-for
6.事件处理
- v-on：click = “greet”或者@click = “greet”
- 事件修饰符v-on：click.stop（.prevent、.self、.once）
- v-on：keyup
- 事件修饰符v-on：keyup.enter（.tab、.delete、.esc、.space、.up、.down、.left、.right）
7.表单输入绑定
- v-model
8.Vue组件
- 全局组件和局部组件
- 父子组件通讯–数据传递
- Slot插槽