美文网首页
2018-09-11 Vue day01

2018-09-11 Vue day01

作者: 演不完的电影 | 来源:发表于2018-09-11 19:41 被阅读0次

    1、Git
    2、Vue入门学习(练习)
    注:先引入vue.js
    (1)入门练习
    <body>

    <div id="app-01">  
        {{msg}}
        {{num}}
        {{arr}}
        {{obj}}
    </div>
    <script src="js/vue.js"></script>
    <script>
    new Vue({//vue实例
        el:'#app-01',  //element(元素)   选择器(获取元素)
        data:{ //data存放数据
            msg:'Hello Vue!',
            num:20,
            arr:['任蕾','袁月','李串串'],
            obj:{name:'lii',age:'18'}
        }
    })
    </script>
    

    </body>
    (2)练习2
    <body>

     <div id="app-02">
         <ul>
             <li v-for="v in arr">{{v}}</li>
             <li v-for="(val,ind) in arr">
                 {{ind}}------{{val}}
             </li>
             <li v-for="value in obj">{{value}}</li>
             <li v-for="(val,ind) in obj">
                 {{ind}}=>{{val}}
             </li>
        <li v-for='value in arrs'>
            {{value}}
        </li>
        <li v-for="(value,index) in arrs">
            {{value.num}}
            {{value.name}}
            {{value.price}}
        </li>
         </ul>
     </div>
     <script src="js/vue.js"></script>
     <script>
      new Vue({
          el:'#app-02',
          data:{
              arr:['任蕾','袁月','李串串'],
              obj:{name:'jack',age:18},
              arrs:[
                  {
                      num:1,
                      name:'apple',
                      price:3
                  },
                  {
                     num:2,
                      name:'banana',
                      price:2
                  }
              ]
          }
      })
    </script>
    

    </body>
    (3)练习3
    <body>

     <div id="app-02">
    <table border="1" cellspacing='0' width='300' align="center" style="text-align:center;">
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(v,index) in arrs">
                <td>{{index+1}}</td>
                <td>{{v.name}}</td>
                <td>{{v.price}}</td>
            </tr>
        </tbody>
    </table>
     </div>
     <script src="js/vue.js"></script>
     <script>
      new Vue({
          el:'#app-02',
          data:{
              arrs:[
                  {
    
                      name:'apple',
                      price:3
                  },
                  {
                     
                      name:'banana',
                      price:2
                  }
              ]
          }
      })
    </script>
    

    </body>

    相关文章

      网友评论

          本文标题:2018-09-11 Vue day01

          本文链接:https://www.haomeiwen.com/subject/qdfpgftx.html