You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/conditional.md
-75Lines changed: 0 additions & 75 deletions
Original file line number
Diff line number
Diff line change
@@ -102,78 +102,3 @@ order: 7
102
102
> 原文：http://rc.vuejs.org/guide/conditional.html
103
103
104
104
***
105
-
106
-
# Conditional Rendering
107
-
108
-
## v-if
109
-
110
-
In string templates, for example Handlebars, we would write a conditional block like this:
111
-
112
-
```html
113
-
<!-- Handlebars template -->
114
-
{{#if ok}}
115
-
<h1>Yes</h1>
116
-
{{/if}}
117
-
```
118
-
119
-
In Vue, we use the `v-if` directive to achieve the same:
120
-
121
-
```html
122
-
<h1v-if="ok">Yes</h1>
123
-
```
124
-
125
-
It is also possible to add an "else" block with `v-else`:
126
-
127
-
```html
128
-
<h1v-if="ok">Yes</h1>
129
-
<h1v-else>No</h1>
130
-
```
131
-
132
-
### Template v-if
133
-
134
-
Because `v-if` is a directive, it has to be attached to a single element. But what if we want to toggle more than one element? In this case we can use `v-if` on a `<template>` element, which serves as an invisible wrapper. The final rendered result will not include the `<template>` element.
135
-
136
-
```html
137
-
<templatev-if="ok">
138
-
<h1>Title</h1>
139
-
<p>Paragraph 1</p>
140
-
<p>Paragraph 2</p>
141
-
</template>
142
-
```
143
-
144
-
### v-else
145
-
146
-
You can use the `v-else` directive to indicate an "else block" for `v-if`:
147
-
148
-
```html
149
-
<divv-if="Math.random() > 0.5">
150
-
Now you see me
151
-
</div>
152
-
<divv-else>
153
-
Now you don't
154
-
</div>
155
-
```
156
-
157
-
The `v-else` element must immediately follow the `v-if` element - otherwise it will not be recognized.
158
-
159
-
## v-show
160
-
161
-
Another option for conditionally displaying an element is the `v-show` directive. The usage is largely the same:
162
-
163
-
```html
164
-
<h1v-show="ok">Hello!</h1>
165
-
```
166
-
167
-
The difference is that an element with `v-show` will always be rendered and remain in the DOM; `v-show` simply toggles the `display` CSS property of the element.
168
-
169
-
<pclass="tip">Note that `v-show` doesn't support the `<template>` syntax, nor does it work with `v-else`.</p>
170
-
171
-
## v-if vs. v-show
172
-
173
-
`v-if` is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
174
-
175
-
`v-if` is also **lazy**: if the condition is false on initial render, it will not do anything - the conditional block won't be rendered until the condition becomes true for the first time.
176
-
177
-
In comparison, `v-show` is much simpler - the element is always rendered regardless of initial condition, with just simple CSS-based toggling.
178
-
179
-
Generally speaking, `v-if` has higher toggle costs while `v-show` has higher initial render costs. So prefer `v-show` if you need to toggle something very often, and prefer `v-if` if the condition is unlikely to change at runtime.
Copy file name to clipboardExpand all lines: src/guide/syntax.md
+36-88Lines changed: 36 additions & 88 deletions
Original file line number
Diff line number
Diff line change
@@ -4,61 +4,44 @@ type: guide
4
4
order: 4
5
5
---
6
6
7
-
<<<<<<< HEAD
8
-
9
-
Vue.js 使用一个极简的虚拟DOM实现组件渲染和插值变量。
10
-
=======
11
7
Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
12
8
13
9
Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
14
10
15
11
If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](/guide/render-function.html) instead of templates, with optional JSX support.
16
-
>>>>>>> 2.0
17
-
18
-
Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。
19
12
20
-
## 插值
13
+
## Interpolations
21
14
22
-
### 文本
15
+
### Text
23
16
24
-
数据绑定最基础的形式是文本插值，使用 "Mustache" 语法（双大括号）：
17
+
The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):
25
18
26
19
```html
27
20
<span>Message: {{ msg }}</span>
28
21
```
29
22
30
-
Mustache 标签会被相应数据对象的 `msg`属性的值替换。每当这个属性变化时它也会更新。
23
+
The mustache tag will be replaced with the value of the `msg`property on the corresponding data object. It will also be updated whenever the data object's `msg` property changes.
You can also perform one-time interpolations that do not update on data change by using the [v-once directive](/api/#v-once), but keep in mind this will also affect any binding on the same node:
33
26
34
27
```html
35
28
<spanv-once>This will never change: {{ msg }}</span>
36
29
```
37
30
38
-
### 原始的 HTML
31
+
### Raw HTML
39
32
40
-
双 Mustache 标签将数据解析为纯文本而不是 HTML。为了输出真的 HTML 字符串，需要用`v-html`指令：
33
+
The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the `v-html` directive:
41
34
42
35
```html
43
36
<divv-html="rawHtml"></div>
44
37
```
45
38
46
39
The contents are inserted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
47
40
48
-
### HTML 特性
49
-
50
-
Mustache 标签不可以用在 HTML 特性 (Attributes) 内，用一个[v-bind指令](http://rc.vuejs.org/guide/!!TODO)替换它
51
-
52
-
<<<<<<< HEAD
41
+
<pclass="tip">Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.</p>
Mustaches cannot be used inside HTML attributes, instead use a [v-bind directive](/api/#v-bind):
63
46
64
47
```html
@@ -74,7 +57,6 @@ It also works for boolean attributes - the attribute will be removed if the cond
74
57
### Using JavaScript Expressions
75
58
76
59
So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:
77
-
>>>>>>> 2.0
78
60
79
61
```html
80
62
{{ number + 1 }}
@@ -86,45 +68,31 @@ So far we've only been binding to simple property keys in our templates. But Vue
These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain **one single expression**, so the following will **NOT** work:
93
-
>>>>>>> 2.0
94
72
95
73
```html
96
-
<!--这是一个语句，不是一个表达式：-->
74
+
<!--this is a statement, not an expression:-->
97
75
{{ var a = 1 }}
98
76
99
-
<!--流程控制也不可以，可改用三元表达式-->
77
+
<!--flow control won't work either, use ternary expressions-->
100
78
{{ if (ok) { return message } }}
101
79
```
102
80
103
-
<<<<<<< HEAD
104
-
### 过滤器
105
-
106
-
Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”，以“管道符”指示：
107
-
=======
108
81
<pclass="tip">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.</p>
109
82
110
83
### Filters
111
84
112
85
Vue.js allows you to define filters that can be used to apply common text formatting. Filters should be appended to the end of a **mustache interpolation**, denoted by the "pipe" symbol:
<pclass="tip">Vue 2.x filters can only be used inside mustache bindings. To achieve the same behavior inside directive bindings, you should use [Computed properties](/guide/computed.html) instead.</p>
123
-
>>>>>>> 2.0
124
92
125
-
过滤器函数总是接受表达式只做为第一个参数
93
+
The filter function always receives the expression's value as the first argument.
126
94
127
-
```
95
+
```js
128
96
newVue({
129
97
// ...
130
98
filters: {
@@ -137,101 +105,81 @@ new Vue({
137
105
})
138
106
```
139
107
140
-
过滤器可以串联：
108
+
Filters can be chained:
141
109
142
110
```html
143
111
{{ message | filterA | filterB }}
144
112
```
145
113
146
-
过滤器也是javascript函数,也可以接受参数：
114
+
Filters are JavaScript functions, therefore they can take arguments:
Here, the plain string `'arg1'` will be passed into the filter as the second argument, and the value of expression `arg2` will be evaluated and passed in as the third argument.
156
-
>>>>>>> 2.0
157
121
158
-
## 指令
122
+
## Directives
159
123
160
-
<<<<<<< HEAD
161
-
指令 (Directives) 是特殊的带有前缀 `v-` 的特性。指令的值限定为**绑定表达式**，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。我们来回头看下“概述”里的例子：
162
-
=======
163
124
Directives are special attributes with the `v-` prefix. Directive attribute values are expected to be **a single JavaScript expression** (with the exception for `v-for`, which will be discussed later). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes. Let's review the example we saw in the introduction:
164
-
>>>>>>> 2.0
165
125
166
126
```html
167
127
<pv-if="seen">Now you see me</p>
168
128
```
169
129
170
-
这里 `v-if`指令将根据表达式 `seen` 值的真假删除/插入 `<p>`元素。
130
+
Here, the `v-if`directive would remove/insert the `<p>`element based on the truthiness of the value of the expression `seen`.
171
131
172
-
### 参数
132
+
### Arguments
173
133
174
-
有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，`v-bind`指令用于响应地更新 HTML 特性：
134
+
Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind`directive is used to reactively update an HTML attribute:
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent`modifier tells the `v-on` directive to call `event.preventDefault()` on the triggered event:
193
153
194
154
```html
195
155
<formv-on:submit.prevent="onSubmit"></form>
196
156
```
197
157
198
-
后面我们将看到修饰符更多的实践用法例如`v-on`和 `v-model`。
158
+
We will see more use of modifiers later when we take a more thorough look at `v-on` and `v-model`.
The `v-`prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building an [SPA](https://en.wikipedia.org/wiki/Single-page_application)where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, `v-bind`and`v-on`:
它们看起来跟“合法”的 HTML 有点不同，但是 `:` 和 `@`在所有 Vue.js 支持的浏览器中都能被正确地解析，并且不会出现在最终渲染的标记中。缩写语法完全是可选的，不过随着一步步学习的深入，你会庆幸拥有它们。
232
-
233
-
***
234
-
235
-
> 原文： http://rc.vuejs.org/guide/syntax.html
236
-
237
-
***
185
+
They may look a bit different from normal HTML, but `:` and `@` are valid chars for attribute names and all Vue.js supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.
0 commit comments