- lib/components/calendar
|- calendar.css
|- calendar.js
|- calendar.html

class People {
constructor (name, age, gender){
this.name = name
}
sayName (){
return this.name
}
}

class Student extends People {
constructor (name, age, gender, skill){
super(name, age, gender)
this.skill = skill
}
saySkill (){
return this.skill
}
}

let tom = new Student('tom', 16, 'male', 'computer')

tom.sayName() // => 'tom'
tom.saySkill() // => 'computer'

tom.__proto__ == Student.prototype // => true
Student.__proto__ == People // => true

var arr = [];
for (let i = 0; i < 10; i ++){
arr[i] = function (){
return i
}
}

arr[6]() // => 6

//Èç¹ûÓÃvarÉùÃ÷i£¬ÎÞÂÛ¶àÉٴεü´ú£¬Íâ²ãµÄiʼÖÕ±»Ã¿´Îµü´úµÄº¯ÊýÄÚ²¿ÒýÓÃ×Å(±Õ°ü)£¬²»»á±»µ±×öÀ¬»ø»ØÊÕ£¬×îºóµÄ½á¹û¶¼Ö¸Ïòͬһ¸öi£¬ÖµÎª10¡£
//ÒÔÍùΪÁ˱ÜÃâÕâ¸öÎÊÌ⣬ͨ³£»áÕâô×ö£º

for (var i = 0; i < 10; i ++){
arr[i] = (function (i){
return function (){
return i
}
})(i)
}

var obj = {
test1 : function (){
window.setTimeout(function (){
console.info(this)
}, 100)
},
test2 : function (){
window.setTimeout(() => {
console.info(this)
}, 100)
},
test3: () => console.info(this),
test4: function (){
console.info(this)
},
test5 (){ // ¶ÔÏóÔöǿд·¨
¡¡¡¡console.info(this);
}
}

obj.test1() // => Window {}
obj.test2() // => obj {}
obj.test3() // => Window {}
obj.test4() // => obj {}
obj.test5() // => obj {}

var a = function (n){
return n
}

var b = (n) => n //¿ÉÒÔÊ¡ÂÔreturnºÍ»¨À¨ºÅ

var c = n => n //Èç¹ûÖ»ÓÐÒ»¸ö²ÎÊý£¬ÖÐÀ¨ºÅÒ²¿ÉÒÔÊ¡ÂÔ

a(1) // => 1
b(1) // => 1
c(1) // => 1

<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>

new Vue({
el : '#app',
data : {
message : 'Hello Vue.js!'
}
})

var data = {a : 1}
var vm = new Vue({
data : data
})
//vm.a ºÍ data.a ÏÖÔÚÊÇÏìÓ¦µÄ

vm.b = 2
//vm.b ²»ÊÇÏìÓ¦µÄ

data.b = 2
//data.b ²»ÊÇÏìÓ¦µÄ

vm.$set('b', 2)
//vm.b ºÍ data.b ÏÖÔÚÊÇÏìÓ¦µÄ

Vue.set(data, 'c', 3)
//vm.c ºÍ data.c ÏÖÔÚÊÇÏìÓ¦µÄ

// ²»Ê¹Óà Object.assign(this.someObject, {a : 1,b : 2})
this.someObject = Object.assign({}, this.someObject, {a : 1, b : 2})

var vm = new Vue({
data : {
msg : 'hi'
},
computed : {
example : function (){
return Date.now() + this.msg
}
}
})

computed : {
example : {
cache : false,
get : function (){
return Date.now() + this.msg
}
}
}

var MyComponent = Vue.extend({
template : '<div>A custom component!</div>'
})

//È«¾Ö×¢²á×é¼þ£¬tag Ϊ my-component
Vue.component('my-component', MyComponent)

<div id="example">
<my-component></my-component>
</div>

<div id="example">
<div>A custom component!</div>
</div>

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
template : '...',
components : {
// <my-component> Ö»ÄÜÓÃÔÚ¸¸×é¼þÄ£°åÄÚ
'my-component': Child
}
})

var data = {a : 1}
var MyComponent = Vue.extend({
data : data
})

var MyComponent = Vue.extend({
data : function (){
return {a : 1}
}
})

Vue.component('child', {
//camelCase in JavaScript
props : ['myMessage'],
template : '<span>{{ myMessage }}</span>'
})

<child my-message="hello!"></child>

<div>
<input v-model="parentMsg">
<br/>
<child v-bind:my-message="parentMsg"></child>
</div>

<child :my-message="parentMsg"></child>

<!-- ×Ó×é¼þÄ£°å -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>

<!-- ¸¸×é¼þÄ£°å -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child></child>
</div>

new Vue({
el : 'body',
data : {
currentView : 'home'
},
components : {
home : { /* ... */ },
posts : { /* ... */ },
archive : { /* ... */ }
}
})

<component :is="currentView">
<!-- ×é¼þÔÚ vm.currentview ±ä»¯Ê±¸Ä±ä -->
</component>

<component :is="currentView" keep-alive>
<!-- ·Ç»î¶¯×é¼þ½«±»»º´æ -->
</component>

var vm = new Vue({
data : {
a : 1
},
created : function (){
// this Ö¸Ïò vm ʵÀý
console.log('a is: ' + this.a)
}
})
// => "a is: 1"

import Vuex from 'vuex'

const state = {
count : 0
}

const mutations = {
INCREMENT (state){
state.count ++
}
}

export default new Vuex.Store({
state,
mutations
})

store.dispatch('INCREMENT')

console.log(store.state.count) // -> 1

// Ч¹ûͬÉÏ
store.dispatch({
type : 'INCREMENT'
})

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'
import MyComponent from './MyComponent'

// ¹Ø¼üµã£¬½Ì Vue ×é¼þÈçºÎ´¦ÀíÓë Vuex Ïà¹ØµÄÑ¡Ïî
Vue.use(Vuex)

var app = new Vue({
el : '#app',
store, // °Ñ store ¶ÔÏóÌṩ¸ø ¡°store¡± Ñ¡ÏÕâ¿ÉÒÔ°Ñ store µÄʵÀý×¢ÈëËùÓеÄ×Ó×é¼þ
components : {
MyComponent
}
})

// MyComponent.js

export default {
template : '...',
data (){ ... },
// ´Ë´¦ÎªÎÒÃÇ´Ó store ʵÀýÖÐÈ¡»Ø״̬µÄλÖÃ
vuex : {
getters : {
// ¸Ã getter º¯Êý½«»á°Ñ²Ö¿âµÄ `store.state.count` °ó¶¨Îª×é¼þµÄ `this.count`
count : (state) => state.count
}
}
}

import Vuex from 'vuex'

const store = new Vuex.Store({
state : {
count : 1
},
mutations : {
INCREMENT (state){
// ¸Ä±ä state
state.count ++
}
}
})

store.dispatch('INCREMENT')

// ×î¼òµ¥µÄ action
function increment (store){
store.dispatch('INCREMENT')
}

// ´ø¸½¼Ó²ÎÊýµÄ action
// ʹÓà ES2015 ²ÎÊý½â¹¹
function incrementBy ({dispatch}, amount){
dispatch('INCREMENT', amount)
}

function getData ({dispatch}){
ajax ({
url : "...",
data : {...},
success : (data) => {
dispatch("SET_DATA", data)
}
})
}

// ij×é¼þÄÚ²¿

// µ¼Èëactions
import {incrementBy} from './actions'

const vm = new Vue({
vuex : {
getters : { ... }, // state getters
actions : {
incrementBy
}
}
})

<button v-on:click="incrementBy(1)">increment by one</button>

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// Ó¦Óóõʼ״̬
const state = {
count : 0
}

// ¶¨ÒåËùÐèµÄ mutations
const mutations = {
INCREMENT (state){
state.count ++
},
DECREMENT (state){
state.count --
}
}

// ´´½¨ store ʵÀý
export default new Vuex.Store({
state,
mutations
})

// actions.js
export const increment = ({ dispatch }) => dispatch('INCREMENT')
export const decrement = ({ dispatch }) => dispatch('DECREMENT')

<!- temmplate -->
<div>
Clicked: {{ count }} times
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
</div>

// ½öÐèÒªÔÚ¸ù×é¼þÖÐ×¢Èë store ʵÀýÒ»´Î¼´¿É
import store from './store'
import {increment, decrement} from './actions'

const app = new Vue({
el : '#app',
store,
vuex : {
getters: {
count: state => state.count
},
actions: {
increment,
decrement
}
}
})

//widgetData.js

[
{id : "100",type : "vote", ...}, //ͶƱ
{id : "101",type : "image", ...}, //ͼƬ
{id : "102",type : "video", ...}, //ÊÓƵ
]

//typeDataMap.js

export default {
vote : {
type : "vote",
title : "ͶƱ±êÌâÎı¾",
items : [
{name : "ͶƱÏî1"}, //ÿ¸öͶƱÏî
{name : "ͶƱÏî2"},
{name : "ͶƱÏî3"}
]
}
}

//labelWrapper.vue ±êÇ©×é¼þÈÝÆ÷(×é¼þ±êÇ©ÇøÓò)

<template>
<div class="label-wrapper">
<div class="label-title">×é¼þ±êÇ©ÇøÓò</div>
<div class="label-box">
<common-label v-for="label in labelArr" :title="label.title" :type="label.type"></common-label>
</div>
</div>
</template>

<script>
import commonLabel from './widget/commonLabel.vue' //µ¼È빫¹²±êÇ©×é¼þ

export default {
name : "label_wrapper",
components : {
commonLabel //×¢²áΪ×Ó×é¼þ(es6ͬÃû¶ÔÏó×ÖÃæÁ¿Ëõд)
},
data (){
return {
labelArr : [
{title : "½Ú±êÌâ", type : "sectionTitle"},
{title : "ͶƱ", type : "vote"},
{title : "ÕýÎÄ", type : "content"},
{title : "Óû§", type : "user"},
{title : "ͼƬ", type : "image"},
{title : "ÊÓƵ", type : "video"},
{title : "񙮵", type : "audio"},
{title : "ÌøתÁ´½Ó", type : "link"}
]
}
}
}
</script>

<style lang="stylus">
/*...*/
</style>

//commonLabel.vue ¹«¹²±êÇ©×é¼þ

<template>
<div class="label-item-wrapper" title="ÍÏÈëÄ£°åÉè¼ÆÇøÓò" draggable="true" @dragstart="dragStart">
<img class="label-icon" alt="{{title}}" :src="iconUrl">
<span class="label-text">{{title}}</span>
</div>
</template>

<script>
//µ¼Èëmixin
import labelMixin from './mixin/labelMixin'

export default {
name : "label",
props : {
title : String,
type : String
},
mixins : [labelMixin],
computed : {
iconUrl (){
return this.type + '.png'
}
}
}
</script>

<style lang="stylus">
/*...*/
</style>

//labelMixin.js

import typeDataMap from './typeDataMap'

export default {
methods : {
dragStart (e){
var id = parseInt(Date.now() + "" + parseInt(Math.random() * 90))
var widgetData = typeDataMap[this.type]
¡¡¡¡¡¡¡¡¡¡¡¡¡¡var dt = e.dataTransfer
widgetData['id'] = id
dt.setData("id", id)
dt.setData("type", this.type)
dt.setData("widgetData", JSON.stringify(widgetData))
}
}
}

<template>
<div class="preview-item-wrapper" draggable="true" :class="{'active': isActive}"
@click="showEdit"
@dragover="allowDrop"
@dragstart="dragStart"
@drop="dropIn"
>
<span class="preview-item-del" :class="{'active': isActive}" title="ɾ³ý¸Ã×é¼þ">
<div v-on:click="delMe">x</div>
</span>
<label class="preview-item-label">- ½Ú±êÌâ -</label>
<div class="preview-item-input-wrapper">
<div class="title-text">{{text}}</div>
</div>
</div>
</template>

<script>
//µ¼Èëaction
import {addPreviewAndData, deleteWidgetPreview, changeWidgetEdit, changPreviewAndDataIndex} from '../../../store/actions'
//µ¼Èëmixin
import previewMixin from './mixin/previewMixin'

export default {
name : "sectionTitle_preview",
mixins : [previewMixin],
props : {
id : Number,
index : Number
},
computed : {
//mixinÍâµÄ˽ÓÐÊôÐÔ
text (){
for (let value of this.widgetDataArr)
if (value.id == this.id) return value.text
}
},
vuex : {
//°ó¶¨mixinÐèÒªµÄÊôÐԺͷ½·¨
getters : {
widgetDataArr : (state) => state.widgetDataArr,
currentEditWidgetId : (state) => state.currentEditWidgetId
},
actions : {
addPreviewAndData,
deleteWidgetPreview,
changeWidgetEdit,
changPreviewAndDataIndex
}
}
}
</script>

<style lang="stylus">
/*...*/
</style>

/**
* previewMixin.js
* Ô¤ÀÀ×é¼þµÄmixin
* @ÌáȡͬÀà×é¼þÖ®¼ä¿É¸´ÓõļÆËãÊôÐÔÓë·½·¨
*/

export default {
computed : {
//¸ÃÔ¤ÀÀ×é¼þÊÇ·ñΪµ±Ç°µã»÷µÄ
isActive (){
return this.id == this.currentEditWidgetId
}
},
methods : {
//ɾ³ý¸ÃÔ¤ÀÀ×é¼þ
delMe (){
this.deleteWidgetPreview(this.id)
},
//ÏÔʾ¸ÃÔ¤ÀÀ×é¼þ¶ÔÓ¦µÄ±à¼­×é¼þ
showEdit (){this.changeWidgetEdit(this.id)
},
//ÔÊÐíÏò¸ÃÔ¤ÀÀ×é¼þÍÏ·ÅÆäËû×é¼þ
allowDrop (e){
e.preventDefault();
},
//¿ªÊ¼ÍϷŸÃÔ¤ÀÀ×é¼þ
dragStart (e){
var dt = e.dataTransfer
dt.setData("index", this.index)
},
//Ïò¸ÃÔ¤ÀÀ×é¼þÍÏ·ÅÆäËû×é¼þ(Ô¤ÀÀ×é¼þ»òÕß±êÇ©×é¼þ)
dropIn (e){
e.preventDefault()
e.stopPropagation()
var dt = e.dataTransfer
var id = parseInt(dt.getData("id"))
if (id){ //ÓÐid±íÃ÷ÍÏÈëµÄÊDZêÇ©×é¼þ
var type = dt.getData("type")
var widgetData = JSON.parse(dt.getData("widgetData"))this.

changeWidgetEdit(id)
this.addValidation(id) //Ìí¼Ó×é¼þÑéÖ¤Ïî
} else {
var index = parseInt(dt.getData("index"))
this.changPreviewAndDataIndex(index, this.index)
}
//Çå¿ÕdataTransfer
dt.clearData()
}
}
}

<template>
<div class="edit-item-wrapper">
<label class="edit-item-label">½Ú±êÌâÎı¾</label>
<validator name="titleValidator">
<div class="edit-item-input-wrapper">
<textarea class="title-edit-input" placeholder="±ØÌîÏ16×ÖÒÔÄÚ"
v-model="text"
v-validate:text="{
required: {rule: true,message: 'ÇëÌîд½Ú±êÌâÎı¾'},
maxlength: {rule: 16,message: '½Ú±êÌâÎı¾ÏÞÖÆÔÚ16×ÖÒÔÄÚ'}
}"
@input="inputValue"
@valid="onValid"
@invalid="onInvalid"
></textarea>
<div class="edit-input-err" v-if="$titleValidator.text.required">

{{$title

Validator.text.required}}</div>
<div class="edit-input-err" v-if="$titleValidator.text.maxlength">

{{$title

Validator.text.maxlength}}</div>
</div>
</validator>
</div>
</template>

<script>
//µ¼Èëaction
import {changeWidgetData, changeValidation}

from '../../../store/actions'
//µ¼Èëmixin
import editMixin from './mixin/editMixin'

export default {
name : "title_edit",
mixins : [editMixin],
props : {
id : Number
},
computed : {
//mixinÍâµÄ˽ÓÐÊôÐÔ
text (){
for (let value of this.widgetDataArr)
if (value.id == this.id) return value.text
}
},
methods : {
//mixinÍâµÄ˽Óз½·¨
inputValue (e){
this.changeWidgetData(this.id, 'text', e.target.value)
}
},
vuex : {
getters : {
widgetDataArr : (state) => state.widgetDataArr
},
actions : {
changeWidgetData,
changeValidation
}
}
}
</script>

<style lang="stylus">
/*...*/
</style>

/**
* editMixin.js
* ±à¼­×é¼þµÄmixin
*/

export default {
data (){
return {
//isValid : false
}
},
methods : {
onValid (){ //Ñé֤ͨ¹ý
this.isValid = true
this.changeValidation(this.id, true)
},
onInvalid (){ //Ñé֤ʧ°Ü
this.isValid = false
this.changeValidation(this.id, false)
}
}
}