Vue 速查表 1 目录

2025-05-24

Vue 速查表 1

目录

嘿 DEV.to 社区！

由于我热爱 Vue.js 并喜欢编写它，因此我将在这篇文章中介绍 Vue.js 的几乎所有基本概念（基于官方网站），并添加一个目录，以便您可以更轻松地访问所需的部分。

本部分不涉及组件。

部分代码示例也来自官网。访问 Vue.js

本文的日语版本可在https://qiita.com/_masa_u/items/7a940f1aea8be4eef4fe查阅。感谢

masa_u 图像

Masa U

主要使用 Python、Javascript 的软件开发人员

目录

插值

插值意味着放置或渲染数据，使用 Vue 的双胡须语法可以非常轻松地实现。

简单插值

通过使用双胡须语法，您可以呈现数据：



<span>My name is: {{ myName }}</span>
Enter fullscreen mode Exit fullscreen mode

表达式插值

插值可以包含 Vue 中的简单表达式。

简单表达式插值

您还可以在双胡须中使用 JavaScript 表达式：



<span>I'm {{ myAge + 5 }} years old!</span>
Enter fullscreen mode Exit fullscreen mode

您还可以使用方法来操作数据并返回要呈现的字符串或整数：



<span>My pets' names are {{ myPets.join(", ") }}</span>
Enter fullscreen mode Exit fullscreen mode

三元运算符表达式插值

您还可以使用三元运算符进行简单的条件渲染：



<span>I'm a {{ myAge > 50 ? 'kinda old' : 'young' }}!</span>
Enter fullscreen mode Exit fullscreen mode

笔记：

  • 双胡须内只能使用一个表达式
  • 表达式不同于语句。例如，下面的代码将无法运行，因为它不是表达式，而是语句：```vue

{{ let msg = '你好，世界！'; }}

- Flow control is not supported in double-mustaches:
```vue


<!--THIS IS WRONG-->
{{ if(true) { return 'Yes!' } }}
Enter fullscreen mode Exit fullscreen mode

原始 HTML 插值

如果您不想转义数据并将其呈现为真正的 HTML，请使用该v-html指令：



<span v-html="myHTMLData"></span>
Enter fullscreen mode Exit fullscreen mode

警告：渲染 HTML 可能存在风险，因为它可能导致您的网站遭受 XSS 攻击。

绑定

绑定意味着在标签的属性中使用数据。

简单绑定

新的 Vue 开发人员尝试做的一些错误的事情是将数据放入这样的属性中：



<span class="{{ myClass }}"></span>
Enter fullscreen mode Exit fullscreen mode

但这是错误的，你实际上必须绑定它：



<span v-bind:class="myClass"></span>
Enter fullscreen mode Exit fullscreen mode

有一种更短的绑定方式，即省略v-bind指令，如下所示：



<span :class="myClass"></span>
Enter fullscreen mode Exit fullscreen mode

使用 concat 进行绑定

那么，如果在绑定时想要将一些字符串与数据组合起来怎么办？我们可以将字符串放在引号中，然后像往常一样进行连接：



<span :class="myClass + 'test'"></span>
Enter fullscreen mode Exit fullscreen mode

在超链接中使用它确实很有用：



<a :href="baseURL + '/post/' + postId">Read more</a>
Enter fullscreen mode Exit fullscreen mode

上面的例子是一个很好的例子，它指向一个帖子的链接，包括基本 URL 和post后缀，然后是帖子 ID。

条件绑定

您可以使用绑定来有条件地执行某项操作。

对于没有值的属性disabled，或者required如果绑定数据返回 true，则将添加该属性，如果返回 false，则不会将属性添加到元素。



<button :disabled="true"></button>
Enter fullscreen mode Exit fullscreen mode

您还可以使用返回布尔值的表达式：



<button :disabled="password.length < 6"></button>
Enter fullscreen mode Exit fullscreen mode

如果满足条件，您可以使用类属性内的对象来绑定指定的类：



<div :class="{green: true, red: false}"></div>
Enter fullscreen mode Exit fullscreen mode

在上面的例子中，green类将被添加到 our 中div，但不会添加到 red 中。
您也可以使用比较运算符和逻辑运算符：



<div :class="{green: 5 > 1, red: false && 9 < 16}"></div>
Enter fullscreen mode Exit fullscreen mode

双向数据绑定

通过使用该v-model指令，您可以创建双向数据绑定。这意味着用户可以使用输入框更改数据，并在需要时同时查看结果。



<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
Enter fullscreen mode Exit fullscreen mode 


let app = new Vue({
    el: '#app',
    data: {
        message: ''
    }
});
Enter fullscreen mode Exit fullscreen mode

该v-model指令几乎适用于所有输入类型。

活动

当元素执行特定操作时，会调用事件。
事件通过指令声明v-on。



<div id="app">
    <button v-on:click="callMyfunction"></button>
</div>
Enter fullscreen mode Exit fullscreen mode 


let app = new Vue({
    el: '#app',
    methods: {
        callMyfunction() {
            alert('This is it!');
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

当单击此按钮时，它将调用该callMyFunction方法。

您也可以使用匿名函数：



<button v-on:click="() => alert('Hello my friend')"></button>
Enter fullscreen mode Exit fullscreen mode

事件也有简写形式：



<button @click="() => alert('Hello my friend')"></button>
Enter fullscreen mode Exit fullscreen mode

动态参数

想象一下，当你想评估一个属性名称时。这可以通过以下方式实现：



<div v-bind:[myAttribute]="myData"></div>
Enter fullscreen mode Exit fullscreen mode

您还可以动态附加事件的名称：



<div v-on:[myEvent]="doSomething"></div>
Enter fullscreen mode Exit fullscreen mode

对象的动态参数

还有一种使用对象和 JavaScript 的原生动态键语法来绑定动态参数的方法，如下所示：



<button v-on="{[myAttr]: true}">Click on me if you can</button>
Enter fullscreen mode Exit fullscreen mode 


let app = new Vue({
    el: '#app',
    data: {
        myAttr: 'disabled'
    }
});
Enter fullscreen mode Exit fullscreen mode

这也可以用于事件：



<button v-on="{[myEvent]: function() { alert("Hello world!") }}">Hi</button>
Enter fullscreen mode Exit fullscreen mode 


let app = new Vue({
    el: '#app',
    data: {
        myEvent: 'click'
    }
});
Enter fullscreen mode Exit fullscreen mode

计算属性

计算属性是一种清理代码的方法，可以使用它们来代替双胡须或其他地方的表达式。

假设您有以下代码：



<p>
The best programming languages are: {{ programmingLanguages }}<br>
But the worst are: {{ programmingLanguages.split(', ').reverse().join(', ') }}
</p>
Enter fullscreen mode Exit fullscreen mode

相反，您可以定义如下所示的计算属性并使用它来代替最差的编程语言：



<p>
The best programming languages are: {{ programmingLanguages }}<br>
But the worst are: {{ worstProgrammingLanguages }}
</p>
Enter fullscreen mode Exit fullscreen mode 


let app = new Vue({
    el: '#app',
    data: {
        programmingLangauges: 'JavaScript, C#, PHP, Python, LALALA, HOHOHO'
    }
    computed: {
        worstProgrammingLanguages() {
            return this.programmingLangauges.split(', ').reverse().join(', ');
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

这个顺序并非真实存在，我也没有评判任何编程语言。它只是为了演示。

计算属性是 getter，这意味着它们只返回某些内容，并且在设置数据方面不起作用。

您可以更改此行为并为数据设置set和方法，如下所示：get



let app = new Vue({
    el: '#app',
    data: {
        myFirstName: 'Adnan',
        myLastName: 'Babakan'
    }
    computed: {
        myFullName: {
            get(): {
                return this.myFirstName + ' ' + this.myLastName;
            },
            set(v): {
                let parts = v.split(' ');
                this.myFirstName = parts[0];
                this.myLastName = parts[1];
            }
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

当您尝试设置数据时，上面的代码将用空格拆分字符串，并将第一部分设置为名字，将第二部分设置为姓氏，myFullName但在获取数据时，它将连接名字和姓氏。

观察者

了解数据何时发生变化的更通用的方法是使用观察者。



let app = new Vue({
    el: '#app',
    data: {
        myAge: 19
    }
    watch: {
        myAge(v) {
            console.log('I\'m now ' + v);
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

注意：除非您愿意，否则观察者不会操纵数据。

条件渲染

当您想要根据某些条件显示 UI 的各个部分时，可以使用条件渲染。



<span v-if="isUserLoggedIn">Hello user</span>
<span v-else>Hi guest!</span>
Enter fullscreen mode Exit fullscreen mode

您的条件也可以有一个“else-if”：



<span v-if="favoriteColor === 'red'">Red like apple</span>
<span v-if="favoriteColor === 'blue'>Blue like sky</span>
<span v-else>Hmmm....</span>
Enter fullscreen mode Exit fullscreen mode

Vue 非常智能，只会替换不同的部分。
例如，如果你有一个用于通过电子邮件或用户名登录的输入框，那么根据条件在两个部分之间切换时不会擦除并重新渲染该输入框，用户输入的值也不会被删除：



<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>
Enter fullscreen mode Exit fullscreen mode

但是，通过使用，key您可以告诉 Vue 这些字段完全不同，您应该重新渲染它们：



<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>
Enter fullscreen mode Exit fullscreen mode

切换显示条件渲染

通过使用，v-show您可以渲染元素但隐藏它（将display属性设置为none），如下所示：



<span v-show="true">Hello there!</span>
Enter fullscreen mode Exit fullscreen mode

注意：v-show不支持<template>元素，也不适用于v-else。

注意：v-if是懒惰的，这意味着开头具有错误条件的块将不会被渲染，另一方面v-show实际上会渲染但隐藏该块。

列表渲染

呈现数据列表几乎就像在其他编程语言中循环一样。

数组渲染

我们经常需要迭代一个数组并渲染它们。
这可以通过使用v-for指令来实现：



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


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

您还可以传递第二个参数来访问当前项目的索引：



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


var example2 = new Vue({
  el: '#example-2',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});
Enter fullscreen mode Exit fullscreen mode

对象渲染

对象渲染并不比数组渲染更难：



<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode 


new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

您还可以使用第二个参数访问属性的名称：



<ul id="v-for-object" class="demo">
  <div v-for="(value, name) in object">
    {{ name }}: {{ value }}
  </div>
</ul>
Enter fullscreen mode Exit fullscreen mode 


new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

迭代对象时也可以访问索引：



<ul id="v-for-object" class="demo">
  <div v-for="(value, name, index) in object">
    {{ index }}. {{ name }}: {{ value }}
  </div>
</ul>
Enter fullscreen mode Exit fullscreen mode 


new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

在范围内迭代

在一定范围内迭代数字也相当容易：



<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
Enter fullscreen mode Exit fullscreen mode

在这里查看我的免费 Node.js Essentials 电子书：

阿德南巴巴坎

NodeJS 基础知识 | 免费电子书

Adnan Babakan（他/他） ・ Sep 11 '20

#节点 #javascript #书籍
文章来源：https://dev.to/adnanbabakan/vue-cheat-sheet-1-194a
Devto 翻译
PREV
使用 Express 和 MongoDB 的无服务器 API 速成课程 使用 Express 和 Mongodb 的无服务器 API 速成课程 使用 Express 和 Mongodb 的无服务器 API 速成课程
NEXT
什么是 GraphQL 以及如何使用它？什么是 GraphQL？先决条件：如何在 Node.js 代码中使用 GraphQL？测试应用程序。恭喜😃