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）<!--vue中的所有内容，需要让一个跟组件将他们包起来-->

　　写在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:
  },

　（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:''
               },
              {
                 name:'datatest',age:''
              }
          ]},
        {
          name:'啦啦啦02',
          data:[
            {name:'datatest',age:''},
            {name:'datatest',age:''}
          ]
      }]

  <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>