vue.js不是一個框架减细，是一個提供MVVM風格，專注于UI層面的庫赢笨。
一未蝌、簡單使用
1
#快速全局安裝
npm install -g vue-cli
#快速構建一個基于webpack 這個模板的項目
vue init webpack test-project
#cd 進項目
cd test-project
#安裝依賴 ,cnpm的是使用不清楚可以看我另一篇文章http://www.reibang.com/p/470d073461a0
cnpm install
#跑起來
npm run dev
2、編輯器
其實也沒啥茧妒，因為用的是 atom, 所以需要安裝一個 language-vue-component 插件支持Vue的語法高亮
二萧吠、一個簡單的demo
textList.vue:
<template>
<div class="hello">
<ul @click="dosomething">
<li v-for="item in items" v-text="item.title" v-bind:class="{customClass: item.ishasClass}" v-on:click="rowClick(item)"></li>
</ul>
<componentInput paramHead="head_" v-on:triggerFrom="addRow"></componentInput>
</div>
</template>
<script>
import Util from './util.js'
import componentInput from './input'
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js Appeee',
testmsg : 'zhengzelin',
items: Util.getLocal()
}
},
components: {
componentInput
},
watch: {
items: {
handler: function(items) {
Util.save(items);
},
deep: true
}
},
methods: {
dosomething:function(e){
console.log(e.target.tagName);
},
rowClick: function(item){
item.ishasClass = !item.ishasClass;
},
addRow: function(newItem){
this.items.push({
title: newItem,
ishasClass: false
})
}
}
}
</script>
<style scoped>
li {
display: inline-block;
margin: 0 10px;
}
li:hover{
cursor: pointer;
}
.customClass {
text-decoration: line-through;
}
</style>
util.js:
const TEXTLIST = 'newTextList'
export default {
getLocal() {
return JSON.parse(
window.localStorage.getItem(TEXTLIST) || '[]'
)
},
save (items) {
window.localStorage.setItem(TEXTLIST, JSON.stringify(items))
}
}
input.vue:
<template>
<div class="hello">
<input v-model="newItem" v-on:keyup.enter="addRow"></input>
</div>
</template>
<script>
export default {
data () {
return {
newItem: ''
}
},
props: ['paramHead'],
methods: {
addRow: function(){
this.$emit('triggerFrom',this.paramHead+this.newItem);
this.newItem = ''; //雙向綁定，數(shù)據(jù)驅動UI
}
}
}
</script>
