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:对数组或对象进行循环操作

1.         
           
           
               
               
           
           
              
   
                  
   
                      
   {{v}}
                  
              
               
               
           
           
   

   2.      
           
           
               
               
           
           
              
      
                  
      
                      
      {{ind}}=>{{value}}
                  
              
               
               
           
           
      

2.         
           
           
               
               
           
           
              
   
                  
   
                      
   
                          {{val.num}}
                          {{val.name}}
                         {{val.price}}
                      
                  
              
               
               
           
           
   

3.         
           
           
               
               
           
           
           
              
   
              
   
           
               
   
                   
   
                       
   {{value.num}}
                       
   {{value.name}}
                       
   {{value.price}}
                   
               
              
              
               
               
           
           
   

4.         
           
           
               
               
           
           
              
   
                  
                  
   {{msg}}
              
               
               
           
           
   

5.        
          
          
              
              
          
          
             
   
                 {{wsk}}
             
              
              
          
          
   

image

image

image

image

image

image

image