1.cnpm安装

npm install -g cnpm --registry=https://registry.npm.taobal.org

vue安装

npm install --global vue-cli
或者
cnpm install --global vue-cli

2.创建项目

vue init webpack-simple demo
cd demo
npm install
npm run dev

3.vue数据绑定,App.vue

<template>
  <div id="app">

    <h1>{{ msg }}</h1>
    <h3>{{obj.name}}</h3>
    <hr><br>
        <ul>
      <li v-for="item in list1">
        {{item.title}}
      </li>
    </ul>
   <hr><br>
   <div v-bind:title="title">mouse over test tips</div><br>

    <div :title="title">mouse over test tips简写</div><br>

   <div v-html="h"></div><br>
   <div v-text="msg"></div><br>

   <ul>
     <li v-for="item in list1">
        <div v-bind:class="{'red':item.flag}">{{item.title}}</div>
      </li>
   </ul>

<br>
    <ul id="example-2">
  <li v-for="(item, index) in list2">
    {{ parentMessage }} - {{ index }} - {{ item.title}}
  </li>
</ul>



   <br>
   <div v-bind:class="{'red':flag,'blue':!flag}">
     I am a red/blue div
   </div>

<div class=box v-bind:style="{'width':boxw+'px','height':boxh}">
test bind style
</div>

  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App567",
      obj: {
        name: "test"
      },
      list: ["lq1", "lq2", "lq3"],
      list1:[
        {"title":"q1","flag":true},
        {"title":"q2","flag":false},
        {"title":"q3","flag":false},
        {"title":"q4","flag":false}
      ],
      list2:[
        {"title":"q1"},
        {"title":"q2"},
        {"title":"q3"},
        {"title":"q4"}
      ],
      title:"this is a tip",
      h:'<h2>i am h2</h2>',
      flag:false,
      boxw:300,
      boxh:'300px',

    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]


    };
  }
};
</script>

<style>
 .red{
    color:red
 }

 .blue{
    color:blue
 }

 .box{
   height:100px;
   width:100px;
   background:red;
 }
</style>