Vue.js基础指令

置顶 Insecure Fluoxetine

已于 2024-04-09 07:54:44 修改

阅读量1.5k

点赞数 68

分类专栏： js 文章标签： vue.js 前端 javascript

于 2024-04-01 04:15:00 首次发布

本文链接：https://blog.csdn.net/2301_79683791/article/details/137211189

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（在讲指令之前，可以先了解插值表达式，如果已经知道，当我没说）

一.插值表达式

1.数据绑定最常见的形式就是双大括号的文本插值，Mustache上属性的值替代。只要绑定的数据对象上属性发生了改变，插值处的内容都会更新。，message 是将数据解析成纯文本的，也就是说，就算中含有了 html，message签，它也是只看做纯文本的，不能输出真正的 html。

完整代码例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>豪哥用例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello 503'
  }
})
</script>
</body>
</html>

运行结果：

二.基础（内置）指令

1.Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

说简单点：

v-text 指令:

在与插值表达式的比较中：
它与花括号的区别是：使用 v-text 在页面加载时不会显示'message'，解决了插值表达式闪烁问题，因为它是属性而不是插值表达式。

应用例子：

<div id="app">
  <p v-text="message"></p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  }
});

v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 mustache interpolations 代替。

v-html指令

v-htm1 指令用于将 HTML 标签和文本插入到元素中。
如果您尝试使用文本插值(使用大括号{{ }})输出 HTML 标签，结果将只是一个文本字符串。
使用<style scoped>在单文件组件(SFC)中定义的范围样式不会影响 v-htm1 指令中的 HTML。
为了实现 SFC 中 v-htm1 包含的 HTML 的范围样式，我们可以将 CSS 模块与<style module〉结合使用。 v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。

典例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>503秘密基地</h1>'
  }
})
</script>
</body>
</html>

运行结果：

在HTML模板中，使用v-html指令将"message"属性的值渲染到页面中。v-html指令会将属性值作为HTML解析并插入到指令所在的元素中。

最终的结果是页面中显示了一个h1标题，内容为"503秘密基地"。

注意：无论是v-html还是v-text，如果绑定了data中属性之后，会覆盖掉原本标签上的内容。

v-show指令

官方解释：v-show
基于表达式值的真假性，来改变元素的可见性。我的说法差不多（根据表达式的值来控制元素的显示与隐藏。）

期望的绑定值类型:any
通过设置内联样式的CSS 属性来工作，当元素可见时将使用初始displayv-show值。当条件改变时，也会触发过渡效果。

例如1：

<div v-show="isVisible">This is a visible element</div>

在上面的代码中，v-show指令被绑定在一个<div>元素上，它的值为isVisible，表示这个元素的显示与隐藏将根据isVisible的值来决定。

如果isVisible的值为true，那么该<div>元素将会显示在页面上。
如果isVisible的值为false，那么该<div>元素将会被隐藏，其占用的空间也会被隐藏。

v-show的特点是在元素的style属性上使用了display属性来控制元素的显示与隐藏，不会从DOM中移除元素，因此会占用页面的空间。

v-show的表达式可以是任何返回布尔值的表达式。可以是一个data中定义的属性，也可以是一个计算属性或者一个方法的返回值。

例如2，在Vue实例中定义了一个名为isVisible的属性：

new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
})

那么该元素的显示与隐藏将根据isVisible属性的值来决定。

注意：v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

v-if指令

解释：v-if是Vue.js中的一个条件渲染指令，用于根据表达式的真假来判断是否渲染元素。

特点：

<div v-if="isVisible">This is a visible element</div>

在上面的代码中，v-if指令被绑定在一个<div>元素上，它的值为isVisible，表示这个元素是否渲染将根据isVisible的值来决定。

如果isVisible的值为true，那么该<div>元素将会被渲染并显示在页面上。
如果isVisible的值为false，那么该<div>元素将不会被渲染，并且在DOM中不存在。

v-if的特点是根据条件动态地将元素渲染到DOM中或从DOM中移除，从而实现元素的显示与隐藏。

v-if的表达式可以是任何返回布尔值的表达式。可以是一个data中定义的属性，也可以是一个计算属性或者一个方法的返回值。

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>火影DD</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">林，苏，周，罗，邱，李</p>
    <template v-if="ok">
      <h1>九江职业技术学院503秘密基地</h1>
      <p>学的不仅是技术，更是梦想！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>
</body>
</html>

运行结果：

v-show与v-if的不同

v-show 和 v-if 之间的区别在于 v-if 根据条件创建（渲染）元素，但 v-show 元素已经创建，仅 v-show 改变其可见性(display)。
因此，切换对象的可见性时最好使用 v-show，因为浏览器更容易做到，并且可以带来更快的响应和更好的用户体验。
使用 v-if 而不是 v-show 的原因是 v-if 可以与 v-else-if 和 v-else 一起使用。

官方解释：

都讲到v-if,那就将v-else也说了去，if，else,对于学习语言的是多么的熟悉，到哪都密不可分

语法上也都相差不大。

v-else

基本解释：v-else指令是Vue.js模板语法中的一种指令，用于在条件渲染中定义一个“否则”分支。

使用v-if指令时，可以通过v-else指令来定义一个“否则”分支，该分支会在v-if条件为假时被渲染。v-else指令必须紧跟在v-if或v-else-if指令之后，并且不能单独使用。

典例1：

<div v-if="condition">
条件为真时渲染的内容
</div>
<div v-else>
条件为假时渲染的内容
</div>

解释：

如果condition为真，则第一个div会被渲染；如果condition为假，则第二个div会被渲染。

v-else指令的存在可以简化条件渲染的逻辑，使代码更加清晰易读。

注意：一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被v-

v-else-if

v-on指令

含义：

v-on指令用于绑定DOM事件到Vue实例的方法上。它可以在模板中监听DOM事件，并执行指定的方法。

使用v-on指令的一般语法是将事件名称作为指令参数，方法名作为指令的值。例如，可以通过v-on:click来监听元素的点击事件，然后在Vue实例中定义一个名为clickHandler的方法来处理点击事件。

v-on指令还可以使用简化语法，将@符号作为指令的前缀。例如，@click相当于v-on:click。

关于调用传参，诸位道友可看：

传递参数给Vue方法：可以在v-on指令中使用方法参数来获取事件对象或其他自定义参数，并将其传递给Vue方法。例如，可以通过@click指令的参数来传递事件对象。

<button v-on:click="doSomething($event)">Click me</button>

methods: {
  doSomething(event) {
    // 使用event获取事件对象
  }
}

2.使用修饰符：v-on指令可以使用修饰符来改变事件监听的行为。例如，使用.stop修饰符可以阻止事件冒泡。

<button v-on:click.stop="doSomething">Click me</button>

methods: {
  doSomething() {
    // 执行某些操作
  }
}

典例1：

<!DOCTYPE html>
<html>
<head>
  <title>电灯开关</title>
  <style>
    #app {
      border: dashed black 1px;
      display: inline-block;
      padding-bottom: 10px;
    }

    #app > button {
      display: block;
      margin: auto;
    }

    #lightDiv {
      position: relative;
      width: 150px;
      height: 150px;
    }

    #lightDiv > img {
      position: relative;
      width: 100%;
      height: 100%;
    }

    #lightDiv > div {
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      border-radius: 50%;
      background-color: yellow;
    }
  </style>
</head>
<body>

<h1>503电灯开关</h1>
<p>v-on 指令用在按钮标签上来监听“click”事件。 当“click”事件发生时，“lightOn”数据属性在“true”和“false”之间切换，使灯泡后面的黄色 div 可见/隐藏。</p>
<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">开关灯</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        lightOn: false
      }
    }
  })
 app.mount('#app')
</script>

</body>
</html>

运行结果：

解释：这是一个电灯开关的页面。页面中有一个电灯图像，当点击"开关灯"按钮时，图像后方的黄色div会显示/隐藏，表示电灯是否亮着。页面使用Vue.js框架实现了点击按钮时切换灯泡状态的功能。

在HTML部分，通过v-show指令来控制灯泡后面的黄色div的显示与隐藏，当lightOn为true时，div显示，当lightOn为false时，div隐藏。

在按钮部分，使用v-on指令监听按钮的click事件，当按钮被点击时，通过表达式“lightOn =! lightOn”来切换lightOn的值，实现灯的开关效果。

v-bind命令

解释：

v-bind指令是Vue.js中用于动态绑定HTML特性的指令，它的主要作用是将Vue实例中的数据绑定到HTML元素的特性上。(Vue 的内联样式是通过使用 v-bind 将样式属性绑定到 Vue 来完成的.)

在Vue.js中，v-bind指令还有一个简写形式，即":属性名"。这被称为v-bind的语法糖。

使用v-bind的语法糖，可以直接在HTML元素中使用冒号加特性名的方式来绑定数据。

官方解释：

简单小例子：

<!-- 使用v-bind的完整写法 -->
<img v-bind:src="imgUrl">

<!-- 使用v-bind的语法糖写法 -->
<img :src="imgUrl">

解释：通过使用v-bind的语法糖写法，将Vue实例中的imgUrl数据绑定到img元素的src特性上。当imgUrl的值发生变化时，img元素的src特性也会相应地更新。

1.绑定属性值：

<!-- 常规写法 -->
<div v-bind:class="{ active: isActive, 'text-bold': isBold }"></div>

<!-- 语法糖写法 -->
<div :class="{ active: isActive, 'text-bold': isBold }"></div>

使用v-bind指令将imageUrl属性绑定到img元素的src属性上，实现动态地修改图片的URL

2.动态绑定class：

<!-- 常规写法 -->
<div v-bind:class="{ active: isActive, 'text-bold': isBold }"></div>

<!-- 语法糖写法 -->
<div :class="{ active: isActive, 'text-bold': isBold }"></div>

使用v-bind指令将一个对象作为参数传递给class属性，根据isActive和isBold的值动态地设置元素的class。

3.动态绑定样式：

<!-- 常规写法 -->
<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

<!-- 语法糖写法 -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

使用v-bind指令将一个对象作为参数传递给style属性，根据textColor和fontSize的值动态地设置元素的。

注意：

Insecure Fluoxetine

关注

68
点赞
踩
51

收藏

觉得还不错? 一键收藏
打赏
18
评论
Vue.js基础指令

一.插值表达式1.数据绑定最常见的形式就是双大括号的文本插..、二.基础(内置)指令v-text 指令:v-html指令v-show指令v-if指令v-show与v-if的不同V-elseV-else-ifv-on指令v-bind命令
复制链接

扫一扫