Vue-基础语法

什么是Vue.js？

☛Vue.js是目前最火的一个前端框架。React是最流行的前端框架（都可以进行手机App的开发）；
☛Vue.js是一套构建用户界面的框架，只关注视图层，易于上手；
☛Vue.js主要负责MVC中的V这一层，主要与界面打交道，来制作页面效果。

框架与库的区别

☛框架：是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
☛库（插件）：提供某一个小功能，对项目的侵入性较小。

Node（后端）中的MVC 与 前端中的MVVM之间的区别?

☛MVC——M-Model层： 处理数据的CRUD增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)；
...................V：视图层，前端页面；
...................C：业务逻辑层，controller控制层：登录、注销等；

后端MVC思想.png

☛MVVM——是前端视图层的概念，分为Model，View，VM-ViewModel。

前端MVVM思想.png

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

    
    
    

        
{{msg}}
    
    

v-cloak、v-text、v-html指令

    
    
    
    
    


    

        
        
++++++{{msg}}+++++

        
        
        
************

        
        
{{msg2}}
        

        
12345678
    

    

    

02对应结果图.png

v-bind指令

v-on指令

跑马灯效果

分析：
1、给【浪起来】按钮，绑定一个点击事件 v-on || 简写@
2、 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后 调用 字符串的substring来进行字符串的截取操作，把第一个字符串取出来，放到最后一个位置即可；
3、为了实现点击一下按钮，自动截取的功能，需要把步骤2中的代码，放到一个定时器中。

    

        
        

        
{{msg}}
    

    

事件修饰符

    

        
        

            
        
        
        有问题找百度
        
        

            
        
        
        

            
        
        
        有问题找百度
        
        

            

                
            
        
        
        

            

                
            
        
    
    

v-model双向数据绑定

    

        
{{msg}}
        
        
        
        

        
        
    
    

v-model简易计算器demo

    

        
        
            +
            -
            *
            /
        
        
        
        
    
    

Vue中的class样式

    

        
        
小鱼儿与花无缺

        
        
小鱼儿与花无缺

        
        
小鱼儿与花无缺

        
        
小鱼儿与花无缺
    
    

Vue中的内联样式

    

        
        
        
这是一个h1

        
这是一个h1
    
    

Vue指令值v-for 和 key属性

    

        
        
索引值{{index}}---对应值{{item}}

        
        
ID:{{item.id}}---名字：{{item.name}}

        
        
信息:{{item}}---键值：{{item.name}}---索引：{{index2}}
    
        
        
这是第{{count}}次循环
    
    

Vue指令值v-for 和 key属性 的 使用

    

        
                ID:
        
        
                Name:
        
        
        
        
        
        

            
            {{item.name}}
        
    
    

v-if 和 v-show 的使用

    

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