Skip to content
Vue.js 学习示例及笔记
HTML JavaScript Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
simple-vue2-webpack-project
.editorconfig
.gitignore
README.md

README.md

Vue.js 学习示例及笔记

快速示例

一个简单的 TODO APP

todo app

组件

使用 vue-cli 脚手架生成示例项目

安装 vue-cli 之后,可以使用快捷命令生成 vue 示例项目。

# 请根据项目需求选择 `webpack` 或 `webpack-simple` 命令来创建示例项目或初始化新项目
vue init webpack my-project
vue init webpack-simple my-project

上面命令会生成基于 webpack 配置的项目,其中带 simple 的命令提供更简单配置和更少的依赖(后续 browserify-simple 命令亦是如此)。当然,您也可以生成基于 browserify 配置的项目,使用下面命令即可。

# 请根据项目需求选择 `browserify` 或 `browserify-simple` 命令来创建示例项目或初始化新项目
vue init browserify my-project
vue init browserify-simple my-project

更多请参考 vuejs-templates 组织相关代码库。

本仓库使用 vue init webpack-simple simple-vue2-webpack-project 命令生成了一个示例项目。

组件 prop

事件

事件名不存在任何自动化的大小写转换,推荐你始终使用 kebab-case 风格的事件名。

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时,你可以使用 v-on.native 修饰符:

<base-input v-on:focus.native="onFocus"></base-input>

.sync 修饰符使用,可以参考上节示例或者官方文档。

动态组件与异步组件

这一部分的内容有一定的难度,请参考官方文档 动态组件 & 异步组件 学习。

成熟的开发方案

You can’t perform that action at this time.