温故知新 Vue 3: Lesson 1

Vue 的 Template 简介

1.HTML-based template syntax

Vue 是一门基于 HTML 的模板语言

2.declaratively bind the rendered DOM to the underlying component instance's data

将组件实例的数据 data 与渲染的 DOM 动态绑定

3.Under the hood, Vue compiles the templates into Virtual DOM render functions.

在底层, Vue 将模板编译成 虚拟 DOM Virtual DOM

4.figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

应用 App 状态改变时, Vue 可以确定最小数量需要重新渲染的组件, 以及最小数量的 DOM 操作.

5.If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.

如果你倾向于使用原生的 JS, 你也可以直接写 Render Function, 以及 JSX 的语法

Interpolation 插入值

Text Interpolation

replaced with the value of the msg property from the corresponding component instance.

从对应组件实例中替换 msg 属性

updated whenever the msg property changes.

当 msg 变化时, 更新视图

<span>Message: {{ msg }}</span>

v-once

do not update on data change by using the v-once directive

使用了 v-once 之后, 只作用一次, msg 改变后, 视图不会跟着更新

<span v-once>This will never change: {{ msg }}</span>

v-html

The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML- data bindings are ignored.

span 里面的内容会被替换成对应的 HTML. 会忽略里面的 interpolation

Vue is not a string-based templating engine. you cannot use v-html to compose template partials

Vue 不是一个基于字符串的模板引擎, 因此不能用 v-html 来构成组件

Dynamically rendering arbitrary HTML on your website can be very dangerous

动态渲染 html 十分危险. 请勿直接渲染用户提供的内容.

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<script>
  const app = {
    data() {
      return {
        rawHtml: '<span style="color: red">This should be red.</span>',
      };
    },
  };
</script>

v-bind

<div v-bind:id="dynamicId"></div>

<button v-bind:disabled="isButtonDisabled">Button</button>

v-bind 用来绑定 HTML attributes.

In the case of boolean attributes, where their mere existence implies true, v-bind works a little differently.

对于 disabled 这种 bool 类型的属性.

null or undefined, the disabled attribute will not even be included in the rendered <button> element.

如果绑定的值是 null 或 undefined. disabled 属性不会出现在最后渲染出的元素上.

JavaScript Expressions

Interpolation 或 Directives 里面可以使用 JavaScript Expressions

<span>{{ number + 1 }}</span>
<span>{{ ok ? 'YES' : 'NO' }}</span>
<span>{{ message.split('').reverse().join('') }}</span>
<div v-bind:id="'list-' + id"></div>

These expressions will be evaluated as JavaScript in the data scope of the current active instance.

js 表达式 会在当前的实例的 data scope 下运行

One restriction is that each binding can only contain one single expression.

限制是一次只能用一个 js 表达式

Template expressions are sandboxed and only have access to a whitelist of globals such as Math and Date. You should not attempt to access user defined globals in template expressions.

template 里面的表达式都是在沙盒里面的. 只能访问白名单里面的 globals 全局变量. 你不应在 template 里面直接使用用户定义的 globals 全局变量.

Directives

Directives are special attributes with the v- prefix.

指令是一种特殊的 attribute, 以 v- 开头

A directive's job is to reactively apply side effects to the DOM

指令的工作是响应式的把效果作用于 DOM

Arguments

Some directives can take an "argument", denoted by a colon after the directive name.

一些指令可以带参, 指令后面带 :

<a v-bind:href="url"> ... </a> <a v-on:click="doSomething"> ... </a>

Dynamic Arguments

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

attributeName will be dynamically evaluated as a JavaScript expression.its evaluated value will be used as the final value for the argument

参数名会在运行时进行动态赋值, 这个值会作为指令实际的参数

Dynamic arguments are expected to evaluate to a string, null can be used to explicitly remove the binding.

动态参数 eval 后的结果应该是字符串,如果是 null, 表示去除这个指令的 binding

Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes. We recommend replacing any complex expressions with a computed property

指令的动态参数不应该包含空格和引号. 复杂的表达式应该用 computed property 代替

When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:

在 HTML 文件里面, 应该避免使用大写字母, 所有的大写字母都会被转化为小写

<!-- This will trigger a compiler warning. -->
<a v-bind:['foo' + bar]="value"> ... </a>

<!--
This will be converted to v-bind:[someattr] in in-DOM templates.
Unless you have a "someattr" property in your instance, your code won't work.
-->
<a v-bind:[someAttr]="value"> ... </a>

Modifiers

<form v-on:submit.prevent="onSubmit">...</form>

Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way.

修饰符是指令后面特殊的后缀, 表示指令应该执行特定的操作

这里的 .prevent 表示 event.preventDefault()

Shorthands

v-bind Shorthand

<!-- full syntax -->
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument -->
<a :[key]="url"> ... </a>

v-on Shorthand

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument -->
<a @[event]="doSomething"> ... </a>

本文使用 mdnice 排版