<commit_before>---
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-` .<commit_msg>index.md (#25045)<commit_after>---
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> 
```

Для production это:

```html

<!-- production version, optimized for size and speed --> 
 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
```

Как упоминалось ранее, вы также можете установить пакет `vue-cli` , но это не рекомендуется для начинающих.

## Декларативное рендеринг

Vue.js - отличный инструмент для создания динамических страниц и вам в первую очередь стоит познакомиться с декларативным рендерингом.

Использование термина декларативность подразумевает отношения этого концепта к декларативным языкам. В ядре Vue.js находится система, которая позволяет декларативно отображать данные в DOM с помощью простых шаблонов:

```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. Во Vue множество директив, все они начинаются с `v-`.

{'fraction_non_alphanumeric': 0.10912308297286669, 'fraction_numerical': 0.0017695635076681085, 'mean_word_length': 4.266045548654244, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 31, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4145851', 'n_tokens_mistral': 2004, 'n_tokens_neox': 2228, 'n_words': 598}