vue.js урок #2

Свойство el, о котором мы говорили, позволяет нам указать, где будет монтироваться наш экземпляр Vue
на странице. Предоставленное вами значение может быть строкой, которая является селектором CSS (например, #app),
как показано в примере:

 

Когда Vue монтируется в предоставленный элемент HTML, он заменяет его на созданный Vue DOM. Vue DOM будет содержать HTML, который мы предоставляем в качестве шаблона или содержимое, полученное из предоставляемой нами функции рендеринга.

При условии что разметка нашего приложения выглядит вот так:

 

Мы увидим как в наш шаблон {{ propertyName }}  подставилось значение «Hello from Getting to Know Vue.js! This was mounted by passing in an CSS Selector».

Также возможно использовать свойство template, чтобы создать строковой шаблон, вынеся в него html код с переменными. В объекте vue мы добавляем свойство template, с указанием селектора шаблона, и создаем сам шаблон, который не будет виден пока vue не использует его:

 


Тэгу script мы задали тип x-template, который браузер не понимает, и задали ему id. Данный id передали в свойство template:

 

У объекта vue имеется ряд свойств. Вкратце рассмотрим их:

Наменование свойств внутри data:

Нельзя называть переменные внутри свойства data со знаков «$» и «_».

Например:

 

Свойства названные с данными знаками не будут добавлены в систему реактивности vue, не будут доступны в шаблоне, и вызовут ошибку во время выполнения.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Back to Top