@ -2,9 +2,9 @@
|
||||
title: Declarative Rendering
|
||||
localeTitle: Декларативное рендеринг
|
||||
---
|
||||
## Переустановленное
|
||||
## Установка
|
||||
|
||||
Прежде чем мы начнем, существует несколько способов использования Vue.js, а именно через CDN и через монтаж. Для первого опыта проще использовать CDN.
|
||||
Прежде чем мы начнем, существует несколько способов использования Vue.js, а именно через CDN и через установку пакета. Для начала проще всего использовать CDN.
|
||||
|
||||
Для разработки используйте это:
|
||||
|
||||
@ -14,7 +14,7 @@ localeTitle: Декларативное рендеринг
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
```
|
||||
|
||||
Когда вы прыгаете на производство, это:
|
||||
Для production это:
|
||||
|
||||
```html
|
||||
|
||||
@ -22,13 +22,13 @@ localeTitle: Декларативное рендеринг
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||||
```
|
||||
|
||||
Как упоминалось ранее, вы также можете установить `vue-cli` , но это не так рекомендуется для начинающих.
|
||||
Как упоминалось ранее, вы также можете установить пакет `vue-cli` , но это не рекомендуется для начинающих.
|
||||
|
||||
## Декларативное рендеринг
|
||||
|
||||
Vue.js - отличный инструмент для создания динамических страниц и первый способ войти в Прикосновение к тому, что называется декларативным рендерингом.
|
||||
Vue.js - отличный инструмент для создания динамических страниц и вам в первую очередь стоит познакомиться с декларативным рендерингом.
|
||||
|
||||
Использование термина «декларативный» намеревается выправить эту концепцию декларативные языки, такие как SQL: вы заказываете что-то, это не подразумевается любой реализации. Vue.js позволяет вам объявлять, какие данные вы хотите как просто:
|
||||
Использование термина декларативность подразумевает отношения этого концепта к декларативным языкам. В ядре Vue.js находится система, которая позволяет декларативно отображать данные в DOM с помощью простых шаблонов:
|
||||
|
||||
```html
|
||||
|
||||
@ -46,11 +46,11 @@ let app = new Vue({
|
||||
});
|
||||
```
|
||||
|
||||
С этими снайперами вы сообщаете Vue динамически отображать все, что хранится внутри переменной `message` . И весело: всякий раз, когда `message` изменяется, Vue.js удается перезагрузить определенную часть DOM, и вы видите менять.
|
||||
В этих снипетах вы сообщаете Vue динамически отобразить все, что хранится внутри переменной 'message'. А самое главное: всякий раз, когда 'message' изменяется, Vue.js удается перезагрузить определенную часть DOM и вы можете увидеть изменение.
|
||||
|
||||
Если вы хотите попробовать эту реактивность, откройте консоль и измените значение от `app.message` до, скажем, `"Hello from console"` . Вы заметили изменение в страница?
|
||||
Если вы хотите попробовать эту реактивность, откройте консоль и измените значение от `app.message` до, скажем, `"Hello from console"` . Вы заметили изменение на странице?
|
||||
|
||||
`{{ ... }}` является синтаксисом для этого поведения: вывод значения переменной или выражения. Например, это также действительное использование и приведет к `hello` :
|
||||
`{{ ... }}` такой синтаксис позволяет выводить значения переменной или выражения. Например вы можете поместить в него условие и оно выведет 'hello':
|
||||
|
||||
```html
|
||||
|
||||
@ -59,7 +59,7 @@ let app = new Vue({
|
||||
</div>
|
||||
```
|
||||
|
||||
Есть случаи, когда мы хотим установить атрибут с помощью нашего приложения Vue переменная. Вы можете подумать, что применяется тот же синтаксис, но у Vue есть что-то для этого мы называем «привязкой».
|
||||
Есть случаи когда мы хотим установить в значение атрибута переменную из Vue. Вы можете подумать, что можно использовать такой же синтаксис, но во Vue есть кое-что специально для этой цели, это называется биндинг.
|
||||
|
||||
```html
|
||||
|
||||
@ -77,4 +77,4 @@ let app = new Vue({
|
||||
}
|
||||
```
|
||||
|
||||
Синтаксис `v-bind` - это то, что Vue.js называет «директивой». Это способ установить новый атрибут тега, который будет обрабатываться Vue - есть больше директивы, все они начинаются с `v-` .
|
||||
Синтаксис `v-bind` - это то, что во Vue.js называет «директивой». Это способ установить атрибут тега, который будет обрабатываться Vue. Во Vue множество директив, все они начинаются с `v-`.
|
||||
|
Reference in New Issue
Block a user