80 lines
2.2 KiB
Markdown
80 lines
2.2 KiB
Markdown
|
---
|
|||
|
title: Declarative Rendering
|
|||
|
localeTitle: 声明性渲染
|
|||
|
---
|
|||
|
## 安装目录
|
|||
|
|
|||
|
在我们开始之前,有几种方法可以使用Vue.js,即通过CDN和via 安装。对于第一次体验,使用CDN更容易。
|
|||
|
|
|||
|
对于开发,请使用:
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<!-- development version, includes helpful console warnings -->
|
|||
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|||
|
```
|
|||
|
|
|||
|
跳到制作时,这个:
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<!-- production version, optimized for size and speed -->
|
|||
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|||
|
```
|
|||
|
|
|||
|
如前所述,您也可以安装`vue-cli` ,但事实并非如此 建议初学者。
|
|||
|
|
|||
|
## 声明性渲染
|
|||
|
|
|||
|
Vue.js是创建动态页面的绝佳工具,也是第一种进入的方式 触摸它就是所谓的声明渲染。
|
|||
|
|
|||
|
使用术语“声明”意图将这一概念理顺 声明性语言,例如SQL:你订购的东西,它并不暗示 任何实施。 Vue.js允许您声明您想要的数据 渲染,就像那样:
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<div id="app">
|
|||
|
{{ message }}
|
|||
|
</div>
|
|||
|
```
|
|||
|
|
|||
|
```javascript
|
|||
|
let app = new Vue({
|
|||
|
el: '#app',
|
|||
|
data: {
|
|||
|
message: 'Hello, world!'
|
|||
|
}
|
|||
|
});
|
|||
|
```
|
|||
|
|
|||
|
使用这些snipets,你告诉Vue动态渲染存储的内容 内部`message`变量。乐趣:每当`message`改变时, Vue.js设法重新加载DOM的特定部分,你看到了 更改。
|
|||
|
|
|||
|
如果您想尝试此反应,请打开控制台并更改de值 `app.message` ,比如, `"Hello from console"` 。你注意到了变化吗? 这页纸?
|
|||
|
|
|||
|
`{{ ... }}`是该行为的语法:输出值 变量或表达式。例如,这也是一种有效的用途 招致`hello` :
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<div id="app">
|
|||
|
{{ 1 < 2 ? "hello" : "goodbye" }}
|
|||
|
</div>
|
|||
|
```
|
|||
|
|
|||
|
我们想要的是使用我们的Vue应用程序设置属性的情况 变量。您可能认为相同的语法适用,但Vue有一些东西 具体的,我们称之为“约束”。
|
|||
|
|
|||
|
```html
|
|||
|
|
|||
|
<div id="app">
|
|||
|
<a v-bind:href="dynamicLink">This link</a>
|
|||
|
</div>
|
|||
|
```
|
|||
|
|
|||
|
```javascript
|
|||
|
let app = new Vue({
|
|||
|
el: '#app',
|
|||
|
data: {
|
|||
|
dynamicLink: 'medium.freecodecamp.org'
|
|||
|
}
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
语法`v-bind`是Vue.js所谓的“指令”。这是一种设置新方式的方法 属性为将由Vue处理的标记 - 还有更多 指令,它们都以`v-`开头。
|