Vue基础必备掌握知识点-Vue的指令系统讲解

什么是Vue？

Vue的概念

Vue是一个用于构建用户界面的渐进式框架(通过数据渲染出用户所能够看到的界面)

Vue的两种使用方式

1：Vue核心包开发

        场景：局部模块的改造

2：Vue核心包&Vue工程化的开发

        场景：整站开发

Vue开发的优缺点:

优点 ：提高开发的效率,约提高70%之上，一套完整的项目解决方案

缺点：需要使用Vue框架的规则去实现，需要去记忆

你如果学过Java语言，那么你在学习这套框架，就会轻松一点，很多的知识点一看就能够看懂，不学过也没有关系，Vue框架规则十分的通俗易懂。

学习进入Vue世界的第一个案例:

直接上代码:

将数据渲染在页面上

body>
   
   
{{msg}}
   
   

   
   

运行页面

Vue指令

Vue会根据不同的指令实现不同的功能，Vue拥有着自身的一套规则

指令:带有v-前缀的特殊标签属性

v-html：

作用：设置元素的InnerHTML(Html中的标签内容）

语法：v-html="表达式"

代码演示:代码实现的功能就是超链接

运行结果:点击链接就会实现网页的跳转

v-show与v-if两者有着异曲同工之妙

v-show:控制着元素的显示或者藏

语法:v-show="表达式" 布尔值，true显示，false则隐藏

v-if:通过条件去渲染元素

语法:v-if="表达式" 布尔值，true显示，false则隐藏

代码演示:

    
    
    
    


    

        
v-show控制的盒子
        
v-if控制的盒子
    
    
    

运行结果:

如果是隐藏，那么这两个的底层代码又有什么区别呢？

将flag:值，改为false

当需要隐藏时，发现了原始代码的变化得知

 v-show与v-if的底层原理

v-show:切换css的display:none来控制显示隐藏

v-if:根据判断条件判断控制元素的创建和移除

v-else和v-else-if

与上面讲解的v-if配合着使用，进行判断渲染

语法：v-else v-else-if="表达式"

通过案例去学习指令：成绩判断

    
    
    


    

        
        
男
        
女
        

        
成绩：A
        
成绩：B
        
成绩：C
        
成绩不合格


    
    
    

运行代码：

v-on：

作用:注册事件 = 添加监听 +提供处理逻辑

语法：

        1）: v-on:事件名="内联语句"（例如: v-on:click="gendar--"：点击事件）

        2）：v-on:事件名="methods中的函数名"（例如:可乐 :按钮点击事件与方法连在一起）

实例代码:

    
    
    


    
    

        
        -
        
        -

        {{gendar}}
        
        +
        
        +
        
        显示
        
不想睡醒的梦

        
        可乐
        雪碧
        美年达
        
余额:{{money}}

    
    

      

运行结果:

 v-bind

作用:动态的设置html的标签属性例如：src url title 等标签

语法:v-bind:属性名="表达式"

案例实现:

运行结果:

通过对上边的学习，写一个案例

翻页式图片浏览：就是看书翻页，将内容改成图片

案例实现:

    
    
    
    


    

        上一页
        

            
        
        下一页
        
美女合集

    

    
    

运行结果: