freeCodeCamp/guide/russian/vue/declarative-rendering/index.md

title	localeTitle
Declarative Rendering	Декларативное рендеринг

Переустановленное

Прежде чем мы начнем, существует несколько способов использования Vue.js, а именно через CDN и через монтаж. Для первого опыта проще использовать CDN.

Для разработки используйте это:

<!-- development version, includes helpful console warnings --> 
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 

Когда вы прыгаете на производство, это:

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

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

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

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

Использование термина «декларативный» намеревается выправить эту концепцию декларативные языки, такие как SQL: вы заказываете что-то, это не подразумевается любой реализации. Vue.js позволяет вам объявлять, какие данные вы хотите как просто:

<div id="app"> 
  {{ message }} 
 </div> 

let app = new Vue({ 
  el: '#app', 
  data: { 
    message: 'Hello, world!' 
  } 
 }); 

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

Если вы хотите попробовать эту реактивность, откройте консоль и измените значение от app.message до, скажем, "Hello from console" . Вы заметили изменение в страница?

{{ ... }} является синтаксисом для этого поведения: вывод значения переменной или выражения. Например, это также действительное использование и приведет к hello :

<div id="app"> 
  {{ 1 < 2 ? "hello" : "goodbye" }} 
 </div> 

Есть случаи, когда мы хотим установить атрибут с помощью нашего приложения Vue переменная. Вы можете подумать, что применяется тот же синтаксис, но у Vue есть что-то для этого мы называем «привязкой».

<div id="app"> 
  <a v-bind:href="dynamicLink">This link</a> 
 </div> 

let app = new Vue({ 
  el: '#app', 
  data: { 
    dynamicLink: 'medium.freecodecamp.org' 
  } 
 } 

Синтаксис v-bind - это то, что Vue.js называет «директивой». Это способ установить новый атрибут тега, который будет обрабатываться Vue - есть больше директивы, все они начинаются с v- .