vue的使用（一）

之前找了一个学前端的同学，给我免费做几个页面，但是后来也就杳无音信了，今天脑子发热自己学一下vue算了。

本节目标：安装以及数据绑定

1.安装和运行

　　·必须要安装nodejs，这个到网上写一个软件安装就可以，都是傻瓜式安装，最后执行node -v查看版本，如果出现，那就说明安装好了。

　　·搭建vue的开发环境，安装vue的脚手架工具

　　　　　　npm install --global vue-cli

　　··创建项目

　　　　　　vue init webpack vuedemo 初始化项目

　　　　　　cd vuedemo 进入项目目录

　　　　　　npm install 如果创建项目的时候没有报错，这一步可以省略。

　　　　　　npm run dev 运行项目

2.文件说明

（1）

　　写在App.vue中的是<div>中

（2）

　　<script></script>
　　src下的文件夹意外的文件可以不去理会
3.使用
　　可以将div下的代码删除，将
　　
<style lang="scss">

</style>
　　中的代码删除，这些数据
 绑定的数据都是放在

</template>
<!--将这个组件暴露出去！-->
<script>
export default { 
  name: 'app',
  /*业务逻辑中的数据*/
  data () {
    return {
   }
  }
}
</script>
　（1）绑定简单数据

 /**
  基本数据
 */

msg: '我是测试数据!',

 绑定数据：{{msg}}
　（2）绑定对象

 对象数据的绑定：
    名字：{{people.name}}
     <br/>
  年龄：{{people.age}}

 /**
 对象数据 
*/
  people:{
   name:"kangwang",
   age:20
  },
　（3）绑定集合数据和for循环

 /**
        list数据
       */
      list:["kangwang","lalal","djfh"],

 list集合的使用：
          <br/>
       for循环的练习：
       <ul>
          <ui v-for="a in list">
              {{a}}
          </ui>
       </ul>
　（5）绑定json数据

  json使用：
          <br/>
       for循
       <ul>
          <ui v-for="a in list01">
              {{a.demo01}}
          </ui>
       </ul>

    /**
      json数据的显示       */
      list01:[{'demo01':'demo02'},{'demo01':'demo02'},{'demo01':'demo02'},{'demo01':'demo02'}],
　（6）绑定超复杂数据

 /**
      复杂数据的使用：
       */


      list03:[{
        name:'啦啦啦01',
        data:[
              {
                name:'datatest',age:'2343'
               },
              {
                 name:'datatest',age:'2343'
              }
          ]},
        {
          name:'啦啦啦02',
          data:[
            {name:'datatest',age:'2343'},
            {name:'datatest',age:'2343'}
          ]
      }]

  <hr/>
        复杂数据的使用：
          <br/>
       for循
       <ul>
          <ui v-for="a in list03">
              {{a.name}}
              <ol>
                <ui v-for ="ai in a.data">
                  {{ai.name}}
                  <br/>
                  {{ai.age}}
               
                </ui>
              </ol>
              <br/>
          </ui>