vue.js不是一个框架，是一个提供MVVM风格，专注于UI层面的库。
一、简单使用
1
#快速全局安装
npm install -g vue-cli
#快速构建一个基于webpack 这个模板的项目
vue init webpack test-project
#cd 进项目
cd test-project
#安装依赖 ,cnpm的是使用不清楚可以看我另一篇文章http://www.jianshu.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 = ''; //双向绑定，数据驱动UI
}
}
}
</script>
