前端必知必会-Vue 指令

文章目录

  • Vue 指令
    • 不同的 Vue 指令
  • 总结


Vue 指令

Vue 指令是带有 v- 的特殊 HTML 属性,可以为 HTML 标记提供额外的功能。

Vue 指令连接到 Vue 实例以创建动态和响应式用户界面。

使用 Vue,与传统的 JavaScript 方法相比,创建响应式页面要轻松精简,而且所需的代码很少。

不同的 Vue 指令

指令 详细信息
v-bind 将 HTML 标记中的属性连接到 Vue 实例内的数据变量。
v-if 根据条件创建 HTML 标记。指令 v-else-if 和 v-else 与 v-if 指令一起使用。
v-show 根据条件指定HTML元素是否可见
v-for 用于基于 Vue 实例中的循环创建标记列表。
v-on 将 HTML 标记上的事件连接到 JavaScript 表达式或 Vue 实例方法。我们还可以使用事件修饰符更具体地定义我们的页面应该如何对某个事件做出反应。
v-model 在 HTML 表单中使用

示例:v-bind 指令获取您自己的 Vue 服务器
浏览器从 Vue 中实例找到设备

元素连接到哪个类。

DOCTYPE html>
<html lang="en">
<head>
  <style>
    .pinkBG {
      background-color: lightpink;
    }
  style>
head>
<body>

  <div id="app">
    <div v-bind:class="vueClass">div>
  div>

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

注意:上面的示例可以写得更简单,即使没有 Vue 代码,但请耐心等待。当我们制作响应式页面时,Vue 的真正好处可以在后面的示例中看到。


总结

本文介绍了Vue 指令的使用,如有问题欢迎私信和评论

你可能感兴趣的:(前端必知必会,vue.js,前端,javascript)