首页 前端知识 Vue.js基础指令

Vue.js基础指令

2024-04-07 08:04:15 前端知识 前端哥 593 769 我要收藏

 

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

一.插值表达式


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

4fe4ea38a10140f99943927f8a5dcd09.png

完整代码例子:

<!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>

 运行结果:6280db2cbeba4b27a8b6437a7847c07e.png


二.基础(内置)指令

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

说简单点:

da3aa89eb6e842d6b1973d246d42b38c.png


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指令

aa1d7b164de049fab83b8f2019f327d1.png

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>

运行结果 :

10ad55b0c56e4ce1a7df5c65a0e2671a.png

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

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

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


 

v-show指令

官方解释:v-show
基于表达式值的真假性,来改变元素的可见性。我的说法差不多(根据表达式的值来控制元素的显示与隐藏。)ea19838be71a40da97a344792f1dc6a4.png

期望的绑定值类型: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中的一个条件渲染指令,用于根据表达式的真假来判断是否渲染元素。

特点:

010acab60f4f47b3adef8b54442513e1.png

7dff8f0b9c0f4d109877d6d1682778cb.png

<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>

运行结果:9759c56c42864830a3b3248d365da8de.png


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 一起使用。

0ddf196272864f8aa15ab6e30a8e04b2.png

官方解释:5f5c1b54fa8146db93ecd1b5f6bd2016.png


都讲到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指令之后,并且不能单独使用。

2047e37071224e088e78a6886de02abe.png典例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

4803bcd1ab0e4d86a6190f1384fcd4b4.png



v-on指令

含义:

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

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

 

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

97ec872537414b47b3acf551b56801bb.png

关于调用传参,诸位道友可看:

3c6011fdb94a475c8f45fdd34ad89cd7.png

  1. 传递参数给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>

运行结果:070f1a2449fc404bbb34d514d350942d.png

解释:这是一个电灯开关的页面。页面中有一个电灯图像,当点击"开关灯"按钮时,图像后方的黄色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元素中使用冒号加特性名的方式来绑定数据。

官方解释:0c5972e8816f446d9e39c23601352a49.png

简单小例子:

<!-- 使用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的值动态地设置元素的。

注意:3de64dea12de40d694eb7a90685e426f.png

 

 

 

 

 

 

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4540.html
标签
评论
发布的文章

AJAX和JSON

2024-05-03 19:05:37

qml 文件中 JSON的使用

2024-05-03 19:05:03

json在线格式化代码

2024-05-03 19:05:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!