【Vue指令】五分钟了解vue的数据绑定
目录

前言

一、文本节点数据绑定类

二、属性节点绑定数据类

三、条件渲染

1、v-if 和 v-show

2、v-else-if和v-else指令

四、列表渲染

v-pre和v-once指令

前言

vue框架是一款基于MVVM模式的框架模式，MVVM模式，MVVM模式结构如下图所示，客户端在视图层界面调用相应的控制模块，控制模块调用选取合适的功能模型模块，其功能模块将提取控制模块的指令获取相应的数据从而获取相应视图，最后将数据视图返回到界面视图层以客户端可接受的形式进行显示。

vue将复杂的数据状态、维护等等操作都直接交付于MVVM统一管理，因此我们在写代码操作的时候，只需要注意在逻辑编辑上就可以了，而不需要我们手动的通过DOM操作，而且还可以不需要关注页面编辑的数据状态是否同步，非常方便。

因为这一系列的操作，vue框架内部会通过一系列的指令，将我们获取到的数据渲染在我们的页面界面上。在vue中，那一些使用v-开头的属性，我们就称之为vue指令属性，所以快跟我一起学习吧！vue指令有很多，本文主要写的是数据绑定部分，更多的后续补充，敬请期待！

MVVM结构模式图

一、文本节点数据绑定类

我们知道因为在html结构体中，文本数据绑定一般是用来将文本数据的内容显示在页面界面上，一般的文本节点绑定使用的vue指令是v-text指令和可以使用v-html指令进行文本数据渲染。

而这一些指令渲染的形式通过“Mustcache”语法进行指令操作，Mustache我们称之为胡子语法，这个胡子语法的写法可以是：<标签名>{{ 数据对象的属性 }}，下图图解介绍：Mustache语法链接https://zhuanlan.zhihu.com/p/36572041

我们可以通过下面的代码实例来进行解释：
```
DOCTYPE html>
    
    
    
    文本节点数据讲解
    
        2022-08-19{{text}}
        {{丘比特}}
        {{惩罚陆}}
 
        2022-08019{{text1}}
        {{qiubite}}
        {{chengfalu}}
    
```

运行得到的结果是：

解释是：

“{{}}”文本插入数值只会影响到所在的位置，并不是将整个文本的内容进行重写，而v-text和v-html会将内容进行重写操作。
v-html可包含html标签，并将其渲染出来，但是其他的两个只是将包含的html标签的内容渲染出来而已。

胡子语法里面的是会被渲染的是对应数据对象属性里面的值，只要数据对象该属性的值发生了改变，插值内的内容都会更新改变。“{{}}”文本里面插入的数据只是普通的数据，并不是html代码，但是使用v-text指令绑定的数据也可以当做纯文本输出。另外，v-html指令绑定的数据可以包含html标签，并且以html的方式渲染出来。

注意：在网络延时很重的情况下，“{{}}”文本插入数值的方式，首先会将插值得表达式以文本的形式渲染出来，要经过JavaScript加载以后，在重新渲染出绑定的文本内容。但是注意，v-text在JavaScript脚本未加载的时候什么也不会显现出来的。比如：


<body>
    <div id="a">
        <p >2022-08-19{{text}}p>
        <p v-text="text">{{丘比特}}p>
    div>
body>
<script>
    var b= {
        text:"22-08-19!",
        text1:"handsome！"
        }
        new Vue({
            el:"#a",
            data:b
        })
script>
<style>
    [v-clock]{
        display: none;   
    }
style>

我们可以看到如下的结果，却换到“网络模式”，可以选择模拟延迟的效果：

那我们怎么解决呢，我们刻意使用v-clock指令，这样可以隐藏Mustache表达式，直到将获取的数据才显示出来。如下：


<body>
    <div id="a">
        <p v-clock>2022-08-19{{text}}p>
        <p v-text="text">{{丘比特}}p>
    div>
body>
<script>
    var b= {
        text:"22-08-19!",
        text1:"handsome！"
        }
        new Vue({
            el:"#a",
            data:b
        })
script>
<style>
 
    [v-clock]{
        display: none;
        
    }
style>

结果：

二、属性节点绑定数据类

在vue开发中，html结构除了文本节点外，还有一个属性节点，这个节点绑定类，可以通过v-bind指令来进行绑定。我们可以通过代码来看：


DOCTYPE html>
    属性绑定

我们只需要更改属性imgUrl、altText的值，我们就可以动态的改变img标签里src和alt的值了。

三、条件渲染

条件渲染是要通过一定的逻辑判断的，用来确定视图界面中的DOM元素组件是否参与到了视图渲染当中来，简单地说，就是元素或者组件是否能正常的显示在图层界面上。

1、v-if 和 v-show

这两个指令都是能实现控制元素的显示与隐藏。两个指令的表达式的值都是布尔值，v-if这个指令使用来条件性的渲染一块内容（一个或者多个元素），当他的值是真的时候（true）才渲染，flase的时候元素删除。v-show的值则是用来显示或隐藏元素参数。我们可以通过以下的代码实验进行验证：


DOCTYPE html>
<html lang="en">
<head>
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <h1>v-if指令验证h1>
        <p v-if="flag">丘比特惩罚陆p>
//因为v-if="sign"表达式的值是flase,所以元素没有显示，且DOM不存在这个节点
 
        <p v-if="sign">2022-08-19p>
 
        <h1>v-show指令验证h1>
        <p v-show="flag">丘比特p>
        <p v-show="sign">大家好p>
//这个元素使用v-show，但是表达式的值也是flase,所以也没有渲染出来，但是DOM存在这个节点，
//只能通过display来进行渲染显示
 
    div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                sign:false,
            },
        });
    script>
body>
html>

两个指令区别是v-if是增加和删除DOM，而v-show使用来只是控制display样式。

2、v-else-if和v-else指令

v-else使用来表示v-if的else块；v-else-if用来充当v-if的else-if块；v-if与v-else应用在同一级别的元素，不然会产生报错。比如：


DOCTYPE html>
<html lang="en">
<head>
    <title>Documenttitle>
head>
<body>
    <div id="a">
        <h1>小明的成绩好吗？h1>
        <p v-if="yes">好的p>
        <p v-else>不好p>
 
        <h2>成绩h2>
        <p v-if="socre">=100p>
        <p v-else-if="socre">=80p>
        <p v-else-if="socre">=70p>
        <p v-else-if="socre">=60p>
        <p v-else="socre"><50p>
    div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    <script>
        var vm = new Vue({
            el:'#a',
            data:{
                socre:90,
                yes:false
            }
        })
    script>
body>
html>

vue尽可能的会高效的渲染元素，它通常会复用已有的元素而不是从头开始渲染。

四、列表渲染

列表渲染主要是通过输出一个循环的结构，把重复的元素一次性的批量的输出到视图图层。v-for指令是基于一个数组来渲染一个列表的，语法一般是


DOCTYPE html>
<html lang="en">
<head>
 
    <title>Documenttitle>
head>
<body>
    <div id="a">
        <h3>科目h3>
        <ul>
            <li v-for="item in items">{{item}}li>
        ul>
 
        <h3 v-for="(item,index)in item">{{index}}-{{item}}h3>
    div>
body>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script>
    var vm = new Vue({
        el:'#a',
        data:{
            items:["math","English","PE","chinese"]
        }
    })
script>
html>

v-pre和v-once指令

v-pre指令不编译胡子模式，mustache表达式里面，但是可以用来显示原始的mustache标签；v-once指令只用来渲染一次元素和组件，这个可以用来优化更新性能。


DOCTYPE html>
    
    
    
    Document
    
        {{sss}}
        
        {{sss}}
        
        {{sss}}

可以看到这一段代码，

里面的sss ,没有被编译，这有console更改sss的值，

中的sss被重新渲染了，而

中的sss没有被重新渲染，这个就是运行的效果。

【Vue指令】五分钟了解vue的数据绑定

前言

一、文本节点数据绑定类

二、属性节点绑定数据类

三、条件渲染

1、v-if 和 v-show

2、v-else-if和v-else指令

四、列表渲染

v-pre和v-once指令

{{sss}}

{{sss}}

{{sss}}

{{sss}}

{{sss}}

{{sss}}