vue.js初始

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>