Vue，什么是Vue及Vue.js基本指令

什么是Vue

是目前最火的前端框架，React是最流行的一个前端框架 (React除了开发网站，还可以开发手机App，Vue语法也可以用户进行手机App开发的，需要借助于Weex)
vue.js是前端主流框架之一，和Angular.js、React.js一起，并称为前端主流三大框架！
vue.js，不仅容易上手，还便于与第三方你库或既有项目整合。
前端主要工作，主要负责mvc中的v这一层；主要工作是和界面打交道；

为什么要学习流行框架

1. 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
2. 提高开发效率的历程：原生js --jquery之类的类库—前端模板引擎—Angular.js/Vue.js
3. 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多 的时间去关注业务逻辑；

框架和库的区别

1. 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要换框架，则需要重新架构整个项目。
2. 库（插件）：提供某一个小功能，对项目的侵入性较小，如果开某个库无法完成某些需求可以很容易切换到其它库实现需求

MVC和MVVM的区别

1. MVC是后端分层开发的概念
2. MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端视图层，分喂了三部分Model，VIew，VM ViewModel
   

Vue.js基本代码和MVVM之间的对应关系

    
    
    
    
    
    


    
    
    

        
{{ msg }}
    
        
    

v-cloak,v-text,v-html

    
    
    
    
    
    
    


    
    
    

        
        
{{ msg }}
        
        
        

        
        

    
        
    

跑马灯例子

    
    
    
    
        
        


    
    

        
        
        
        
{{msg}}
    


    

事件修饰符

• .stop 阻止冒泡

• .prevent 阻止默认事件

• .capture 添加事件监听器时使用事件捕获模式

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

• .once 事件只触发一次

  .self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为

v-model及简易计算器案例

    
    
    
    
    


    

        
{{msg}}
        
        

        
        
        
    

    

简易计算器

    
    
    
    
    


    

        
        
            +
            -
            *
            /
        

        
        
        
    
    

在Vue中使用样式

    
    
    
    
    
    


    

        
        
直接传递一个数组
        
        
在数组中使用三元表达式
        
        
在数组中使用对象来代替三元表达式
        
        
        
在数组中使用对象来代替三元表达式


        
        
        
这是一个h1
        
styleObj1
        
        
对象的数组
        
    
    

v-for和key属性

    
    
    
    
    


    

        
        
索引值：{{i}} 每一项：{{item}}
        
        
索引：{{i}}--{{user.id}}-----{{user.name}}
        
        
索引：{{i}}    值：{{val}}  键：{{key}}
        
        
这是第{{count}}次循环

        
    
    

v-if和v-show

    
    
    
    
    


    

        
        
         
        
这是v-if控制的元素
        
这是v-show控制的元素