Dead simple implement of Vuejs
JavaScript HTML
Switch branches/tags
Nothing to show
Latest commit d9e430a Nov 10, 2017 @lihongxun945 lihongxun945 update readme
Failed to load latest commit information.
imgs update readme Oct 30, 2017
src rm unused code Oct 30, 2017
.babelrc init Oct 13, 2017
.gitignore init Oct 13, 2017 update readme Nov 10, 2017 update readme Nov 10, 2017
index.html finish directives Oct 30, 2017
package.json init Oct 13, 2017
webpack.config.js init Oct 13, 2017
yarn.lock init Oct 13, 2017


What is this?


There is several detailed articles show how to write tiny-vue (in Chinese) Write tiny-vue in 8 hours

A dead simple implement of vuejs, use to learn the source code of vuejs (v1.0.28). Vuejs source code is very elegant, but it's difficult for beginner to understand. You can try to learn this project, it will be very helpful to understand vuejs. Most of lifecycle, modular and function name is same to vuejs, but all the code is rewrited (except dep.js and very few function implements)

There are two main part:

  1. state: reactive state, listen to state's change, State -> Observer -> Dep -> Watcher
  2. directive: support directive, you can add your own directives: Compile -> Directive -> directives

You can use it ike this:

<div id="a">
	<input v-model="message" />
	<button v-on:click="increase">Increase</button>
	<p v-text="message"></p>
	new Vue({
		el: "#a",
		data: {
			message: 1
		methods: {
			increase () {
				this.message += 1

Supported Features

  1. reactive data.
  2. interal directives: v-on:click, v-text, v-model
  3. two-way data binding
  4. more feature is coming


1 2 3 4

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.