vue-class-component - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

example/example.js

example/webpack.config.js

index.js

		var Vue = require('vue')

		var internalHooks = [
		'data',
		'el',
		'init',
		'created',
		'ready',
		'beforeCompile',
		'compiled',
		'compiled',
		'beforeDestroy',
		'destroyed',
		'attached',
		'detached'
		'attached',
		'detached',
		'activate'
		]

		function decorator (Component) {
		var capture = new Component(false)
		var options = {}
		// instance properties are data
		var fields = Object.keys(capture)
		if (fields.length) {
		options.data = function () {
		return clone(capture)
		}
		}
		// prototype props.
		@@ -59,16 +55,2 @@ var proto = Component.prototype

		function clone (val) {
		if (typeof val !== 'object') {
		return val
		} else if (Array.isArray(val)) {
		return val.map(clone)
		} else {
		var res = {}
		Object.keys(val).forEach(function (key) {
		res[key] = clone(val[key])
		})
		return res
		}
		}

		module.exports = decorator

package.json

		{
		"name": "vue-class-component",
		"version": "1.0.0",
		"version": "2.0.0",
		"description": "ES7/TypeScript class decorator for Vue components",
		@@ -26,5 +26,2 @@ "main": "index.js",
		"homepage": "https://github.com/vuejs/vue-classy#readme",
		"peerDependencies": {
		"vue": "^0.12.3"
		},
		"devDependencies": {
		@@ -34,5 +31,5 @@ "babel-core": "^5.6.7",
		"node-libs-browser": "^0.5.2",
		"vue": "^0.12.3",
		"vue": "^1.0.4",
		"webpack": "^1.9.12"
		}
		}

README.md

		# vue-class-component

		> Experimental ES7 / TypeScript decorator for class-style Vue components.
		> Experimental ES2016/TypeScript decorator for class-style Vue components.

		### Example Usage with Babel stage=0:

		Note:

		1. `data`, `el` and all Vue lifecycle hooks can be directly declared as class member methods, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.

		2. For all other options, declare them as static properties.

		``` js
		import component from 'vue-class-component'
		import VueComponent from 'vue-class-component'

		@component
		@VueComponent
		export default class Component {
		@@ -17,13 +23,28 @@
		<input v-model="msg">
		<p>prop: {{propMessage}}</p>
		<p>msg: {{msg}}</p>
		<p>computed msg: {{computedMsg}}</p>
		<button v-on="click:greet">Greet</button>
		<button @click="greet">Greet</button>
		</div>
		`

		// data
		msg = 'hello'
		// props
		static props = {
		propMessage: String
		}

		// return initial data
		data () {
		return {
		msg: 123
		}
		}

		// lifecycle hook
		ready () {
		this.greet()
		}

		// computed
		get computedMsg() {
		get computedMsg () {
		return 'computed ' + this.msg
		@@ -33,16 +54,6 @@ }
		// method
		greet() {
		greet () {
		alert('greeting: ' + this.msg)
		}

		// lifecycle hook
		ready() {
		this.greet()
		}
		}

		// mount
		new Component({
		el: '#el'
		})
		```
		@@ -49,0 +60,0 @@

example/example.es7.js

example/example.html

Sorry, the diff of this file is not supported yet

New alerts