2018-09-10vue js介绍和案例

Vue.js也称为Vue,
是一个用来构建用户界面的框架
是一个轻量级的MVVM框架(Model-View-ViewModel)框架，其实就是数据的双向绑定
数据驱动+组件化的前端开发(核心思想)通过简单的API可以实现响应式
的数据绑定和组合的视图组件更容易上手、小巧参考官网：vuejs.org

vue由个人维护，尤雨溪，华人，目前就职于阿里巴巴
2014 2月开源了vue.js的源代码
都不兼容低版本的IE

v-model:双向数据绑定，常用于表单元素

v-for: 对数组或对象进行循环操作

v-on:时间绑定,用法：v-on:事件

v-for:对数组或对象进行循环操作

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
           <div class="lin">
               <ul>
                   <li v-for='v in arr'>{{v}}</li>
               </ul>
           </div>
            <script src="vue.js"></script>
            <script>
                new Vue({
                    el:'.lin',
                    data:{
                     arr:[1,2,3,4,5]
                 }
                })
            </script>
        </body>
        </html>

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Document</title>
     </head>
     <body>
        <div class="lin">
            <ul>
                <li v-for="(value,ind) in arr">{{ind}}=>{{value}}</li>
            </ul>
        </div>
         <script src="vue.js"></script>
         <script>
             new Vue({
                 el:'.lin',
                 data:{
                     arr:[1,2,3,4,5],
                     obj:{name:'wsk',age:21}
                 }
             })
         </script>
     </body>
     </html>

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
           <div class="lin">
               <ul>
                   <li v-for="val in arrs">
                       {{val.num}}
                       {{val.name}}
                      {{val.price}}
                   </li>
               </ul>
           </div>
            <script src="vue.js"></script>
            <script>
                new Vue({
                   el:'.lin',
                    data:{
                    arrs:[
                        {num:1,name:'火龙果',price:3},
                        {num:2,name:'榴莲',price:2},
                        {num:3,name:'菩提子',price:1}
                        ]
                    }
                })
            </script>
        </body>
        </html>

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <style>
            table{
                width:300px;
            }    
        </style>
        <body>
           <div class="lin">
           <table border="1" cellspacing='0'>
        <!--
            <thead>
                <th>1</th>
                <th>1</th>
                <th>1</th>
            </thead>
        -->
            <tbody>
                <tr v-for="value in arrs">
                    <td>{{value.num}}</td>
                    <td>{{value.name}}</td>
                    <td>{{value.price}}</td>
                </tr>
            </tbody>
           </table>
           </div>
            <script src="vue.js"></script>
            <script>
                new Vue({
                    el:'.lin',
                    data:{
                    arrs:[
                        {num:'商品',name:'名称',price:'单价'},
                        {num:1,name:'强傲',price:'1.45斤'},                
                        {num:2,name:'付宝',price:50.95},
                        {num:3,name:'王帅康',price:70},
                        {num:4,name:'王哲胜',price:70}
                    ]
                    }
                })
            </script>
        </body>
        </html>

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
           <div class="lin">
               <input type="text" v-model="msg">
               <p>{{msg}}</p>
           </div>
            <script src="vue.js"></script>
            <script>
                new Vue({
                    el:'.lin',
                    data:{
                        msg:''
                    }
                })
            </script>
        </body>
        </html>

       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>Document</title>
       </head>
       <body>
          <div class="lin">
              {{wsk}}
          </div>
           <script src='./vue.js'></script>
           <script>
               new Vue({
                   el:'.lin',
                   data:{
                       wsk:'我下铺'
                   }
               })
           </script>
       </body>
       </html>

image