80 lines
3.8 KiB
Markdown
80 lines
3.8 KiB
Markdown
|
---
|
|||
|
|
title: Declarative Rendering
|
|||
|
|
localeTitle: Декларативное рендеринг
|
|||
|
|
---
|
|||
|
|
## Переустановленное
|
|||
|
|
|
|||
|
|
Прежде чем мы начнем, существует несколько способов использования Vue.js, а именно через CDN и через монтаж. Для первого опыта проще использовать 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!'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
С этими снайперами вы сообщаете Vue динамически отображать все, что хранится внутри переменной `message` . И весело: всякий раз, когда `message` изменяется, Vue.js удается перезагрузить определенную часть DOM, и вы видите менять.
|
|||
|
|
|
|||
|
|
Если вы хотите попробовать эту реактивность, откройте консоль и измените значение от `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-` .
|