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/syntax.md
+63-12Lines changed: 63 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,19 @@
1
1
---
2
-
title: 数据绑定语法
2
+
title: 模板语法
3
3
type: guide
4
4
order: 4
5
5
---
6
6
7
+
<<<<<<< HEAD
7
8
8
9
Vue.js 使用一个极简的虚拟DOM实现组件渲染和插值变量。
10
+
=======
11
+
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
+
13
+
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
+
15
+
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
9
17
10
18
Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板,请记住这点。
11
19
@@ -21,7 +29,7 @@ Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都
内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断,应当使用 [`functional component`](http://rc.vuejs.org/guide/!!TODO)。
39
-
40
-
<pclass="tip">在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。记住,只对可信内容使用 HTML 插值,**永不**用于用户提交的内容。</p>
46
+
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.
41
47
42
48
### HTML 特性
43
49
44
50
Mustache 标签不可以用在 HTML 特性 (Attributes) 内,用一个[v-bind指令](http://rc.vuejs.org/guide/!!TODO)替换它
45
51
52
+
<<<<<<< HEAD
46
53
47
54
## 绑定表达式
48
55
@@ -51,16 +58,39 @@ Mustache 标签不可以用在 HTML 特性 (Attributes) 内,用一个[v-bind
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:
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
64
94
65
95
```html
66
96
<!-- 这是一个语句,不是一个表达式: -->
@@ -70,21 +100,33 @@ Mustache 标签不可以用在 HTML 特性 (Attributes) 内,用一个[v-bind
70
100
{{ if (ok) { return message } }}
71
101
```
72
102
103
+
<<<<<<< HEAD
73
104
### 过滤器
74
105
75
106
Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”,以“管道符”指示:
107
+
=======
108
+
<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
+
110
+
### Filters
111
+
112
+
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>
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
111
157
112
158
## 指令
113
159
160
+
<<<<<<< HEAD
114
161
指令 (Directives) 是特殊的带有前缀 `v-` 的特性。指令的值限定为**绑定表达式**,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。我们来回头看下“概述”里的例子:
162
+
=======
163
+
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:
0 commit comments