🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

vue-class-component

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-class-component - npm Package Compare versions

Comparing version

1.0.0
to
2.0.0

example/example.js

8

example/webpack.config.js
module.exports = {
entry: './example/example.es7.js',
entry: './example/example.js',
output: {

@@ -9,3 +9,7 @@ path: './example',

loaders: [
{ test: /\.es7\.js$/, loader: 'babel?stage=0' }
{
test: /\.js$/,
exclude: /node_modules|vue\/src/,
loader: 'babel?stage=0'
}
]

@@ -12,0 +16,0 @@ },

32

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

7

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"
}
}

47

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