vue项目实战（一）：指令系统

最新推荐文章于 2024-02-13 21:02:38 发布

Ordinary_yfz

最新推荐文章于 2024-02-13 21:02:38 发布

阅读量203

点赞数

分类专栏：开发文章标签： vue js javascript

本文链接：https://blog.csdn.net/csyifanZhang/article/details/104943105

版权

开发专栏收录该内容

32 篇文章 1 订阅

订阅专栏

文章目录

一、Vue指令
二、稍微高级一点的指令

一、Vue指令

1、什么是指令？

在vue中提供了一些对于页面+数据的更为方便的输出，这些操作就叫做指令。
vue的指令格式为v-xxx
指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关的DOM操作的绑定。（学号声明指令，vue会帮你做复杂操作）

2、常用指令

v-text：元素的inneText属性，必须是双标签，跟{{}}效果一样，使用不多
v-html：元素的innerHTML
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else-if：用作 v-if 的 else-if 块。可以链式的多次使用：
v-else：可以用 v-else 指令给 v-if 添加一个 “else” 块：
v-show：与 v-if 类似条件性渲染，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。（注意，v-show 不支持 <template> 元素，也不支持 v-else。）

3、v-if 与 v-show辨析

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
类比于普通的js语句，v-if相当于（条件为真时appendChild，条件为假时removeChild），而v-show控制display:none这个属性，是先渲染，再决定是否显示，无论如何都是需要渲染的，

所有一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好（滚动的）；如果在运行时条件很少改变，则使用 v-if 较好。

4、实例

<body>
  <div id="app">
    <h2>{{msg}}</h2>  <!--以下的命令中""包裹的并不是字符串，而是数据-->
    <p v-text="msg"></p> <!--利用v-text改变标签的文本元素-->
    <p v-text = "1+1"></p> <!--v-text还可以进行简单的运算-->
    <div v-html="msg2"></div> <!--利用 v-html在div内部加上msg2包含的语句-->
    <div v-if="isShow">真的我就显示</div><!--利用v-if进行动态的渲染，修改变量决定是否显示-->
    <div v-if="!isShow">假的我就不显示</div>
    <div v-if="Math.random()>0.5">已显示</div>
    <div v-else>已关闭</div><!--v-else可以用在v-if下面，相当于一个else语句-->
    
    <div v-show="!isShow">真的我就显示</div><!--v-show控制的是display属性-->

  </div> 

  <script type="text/javascript">
    //如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
    var vm = new Vue({
      el: "#app", //绑定的Dom对象,#一定要有
      data:function(){
        return{
          //数据属性
          msg:"指令系统",
          msg2: "<h2>v-html指令</h2>",
          isShow:true,
        }
      }
      //template:"<div>{{msg}}</div>"
    })
  </script>
</body>

看一看运行结果
在这里插入图片描述
重点辨析一下v-if v-show，对v-show而言div依然存在只是display改变了，而v-if而言，变成了，等待之后的渲染。

贴上可以直接执行的源代码，有详细的注释。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>myVue</title>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
</head>
 
<body>
  <div id="app">
    <h2>{{msg}}</h2>  <!--以下的命令中""包裹的并不是字符串，而是数据-->
    <p v-text="msg"></p> <!--利用v-text改变标签的文本元素-->
    <p v-text = "1+1"></p> <!--v-text还可以进行简单的运算-->
    <div v-html="msg2"></div> <!--利用 v-html在div内部加上msg2包含的语句-->
    <div v-if="isShow">真的我就显示</div><!--利用v-if进行动态的渲染，修改变量决定是否显示-->
    <div v-if="!isShow">假的我就不显示</div>
    <div v-if="Math.random()>0.5">已显示</div>
    <div v-else>已关闭</div><!--v-else可以用在v-if下面，相当于一个else语句-->
    
    <div v-show="!isShow">真的我就显示</div><!--v-show控制的是display属性-->

  </div> 

  <script type="text/javascript">
    //如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
    var vm = new Vue({
      el: "#app", //绑定的Dom对象,#一定要有
      data:function(){
        return{
          //数据属性
          msg:"指令系统",
          msg2: "<h2>v-html指令</h2>",
          isShow:true,
        }
      }
      //template:"<div>{{msg}}</div>"
    })
  </script>
</body>
</html>

二、稍微高级一点的指令

1、v-bind用法解析：动态渲染

v-bind:绑定标签上的属性（内置属性或者自定义属性，包括但不限于img的arc，超链接的href，Dom元素的class等等，加上参数的话，我们很容易的可以进行页面的动态渲染），简写：（就是一个：）
基本样式是这样的

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。

将代码写成如下形式

<head>
    <meta charset="UTF-8">
    <title>myVue</title>
    <!-- <script src="/assets/js/vue.js"></script> -->
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- <script src="C:\Users\10690\Desktop\StudyDocument\软工课设\myVue\myvue\static\jsDocument/vue.js"></script>-->
    <style>
      .box{
        width:30px;
        height: 30px;
        background-color: red
      }
      .active{
        background-color:green;
      }
  </style>
</head>
 
<body>
  <div id="app">
    <div class = "box active"></div><!--两个class默认显示后者，我们也可以active先不显示-->
    <div class = "box" v-bind:class="{active:isGreen}"></div><!--将active绑定为一个bind，可以动态的改变样式-->
    <div class = "box" :class="{active:!isGreen}"></div>
  </div> 

  <script type="text/javascript">
    //如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
    var vm = new Vue({
      el: "#app", //绑定的Dom对象,#一定要有
      data:function(){
        return{
          //数据属性
          isGreen:false,
        }
      }
      //template:"<div>{{msg}}</div>"
    })
  </script>
</body>

重点在这里

  <div id="app">
    <div class = "box active"></div><!--两个class默认显示后者，我们也可以active先不显示-->
    <div class = "box" v-bind:class="{active:isGreen}"></div><!--将active绑定为一个bind，可以动态的改变样式-->
    <div class = "box" :class="{active:!isGreen}"></div><!--缩写-->
  </div>

看一看运行效果，显然使用v-bind绑定一个class之后，我们就可以使用isGreen参数来随时调整什么时候显示什么class，相应的可以对图片，超链接等也做这样的绑定。
在这里插入图片描述

2、v-on:监听 DOM 事件

v-on的一般用法v-on:click='clickHandle'，先绑定一个事件，再绑定一个方法，clickHandle是要在vue对象中声明的方法，比如

  <div id="app">
    <div class = "box" v-on:click='clickHandle' v-bind:class="{active:isGreen}"></div><!--将active绑定为一个bind，可以动态的改变样式-->
    <div class = "box" :class="{active:!isGreen}"></div><!--缩写-->
  </div> 

  <script type="text/javascript">
    //如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
    var vm = new Vue({
      el: "#app", //绑定的Dom对象,#一定要有
      data:function(){
        return{
          //数据属性
          isGreen:false,
        }
      },
      //template:"<div>{{msg}}</div>"
      methods:{
        clickHandle(e){
          this.isGreen = !this.isGreen;//这里的this就是vm对象
        }
      }
    })

每点击一次颜色两个矩形的颜色就会发生转换。
将div中的第一句换成如下形式也是可以正常运行的，@是v-on:的简写

    <div class = "box" @click='clickHandle' v-bind:class="{active:isGreen}"></div><!--将active绑定为一个bind，可以动态的改变样式-->

3、json或列表数据处理：v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。（激动的心，这不就是python嘛）
demo：

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引index。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：
在这里插入图片描述

Ordinary_yfz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue项目实战（一）：指令系统

文章目录一、Vue指令1、什么是指令？2、常用指令3、v-if 与 v-show辨析4、实例二、稍微高级一点的指令1、v-bind用法解析：动态渲染2、v-on:监听 DOM 事件3、json或列表数据处理：v-for一、Vue指令1、什么是指令？在vue中提供了一些对于页面+数据的更为方便的输出，这些操作就叫做指令。vue的指令格式为v-xxx指令中封装了一些DOM行为，结合属性作为...
复制链接

扫一扫

专栏目录