Vue.js快速入门及示例

前言

最近因为工作需要，参与了用于App中H5活动页的项目，之前只有h5、css、js基础，但是没有开发过商用的前端项目。关于前端框架的选取，决定直接上手Vue.js，并用脚手架的方式创建了项目，经过一段时间的学习，项目已经成功上线。现在回过头来，补习Vue基础。此为学习Vue官网基础的笔记，主要为知识点目录，具体示例代码见demo，建议下载博客后面的demo，并对着该博客学习Vue基础。后续会记录学习Vue进阶的笔记。

0 介绍

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。

特点:
1. 易用：会了HTML,CSS,JavaScript，即刻阅读指南开始构建应用
2. 灵活：简单小巧的核心，但又可以应付任何规模的应用。
3. 性能：20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化

兼容性:
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。

官网：https://cn.vuejs.org/

1 安装

脚手架方式安装Vue并创建项目(如果只是学习Vue基础，可跳过这一节)：

# 最新稳定版
$ npm install vue

# 全局安装vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

2 语法基础

2.1 文本插值：{{}}

2.2 标签绑定到数据：v-bind

2.3 条件渲染：v-if

2.4 循环：v-for

2.5 事件监听： v-on

2.6 双向绑定：v-model

2.7 组件：component

2.8 父组件向子组件传值： props

2.9 Vue构造器

2.10 Vue生命周期

2.11 Vue的属性： data

2.12 Vue的方法：methods

2.13 一次性插值：v-once

2.14 过滤器：filters

2.15 计算属性：computed

2.16 监听变量改变：watch

2.17 绑定class对象语法：v-bind:class

2.18 复杂条件渲染：v-if v-else-if v-else

2.19 用key管理可复用的元素

2.20 v-if和v-show，v-if和v-for

2.21 列表渲染：v-for

2.22 数组使用

2.23 事件修饰符和键值修饰符

3 组件的使用

3.1 注册组件

3.2 组件间通信：props down,events up

3.3 动态props

3.4 单向数据流

3.5 props验证

3.6 非props属性

3.7 自定义事件

3.8 .sync修饰符

3.9 非父子组件通信

3.10 Slot分发

3.11 具名Slot

3.12 作用域插槽

3.13 动态组件

3.14 索引：ref

4 项目中遇到的坑

4.1 Android浏览器文本垂直居中

4.2 路由hash和history模式

4.3 路由or跳转新的webview

4.4 两个单独的H5数据交互，以及H5和原生App交互

4.5 手机适配问题，eg:部分手机不支持visibilityChanged事件

4.6 App版本兼容问题，比如协议的支持

4.7 非父子组件通信

4.8 v-if和v-show问题

4.9 this不指向Vue对象

4.10 手机锁屏时倒计时不走

5 Demo

链接:https://gitee.com/josan24/vuedemo

欢迎指正错误，欢迎留言探讨。