Я изучаю Vue, и у меня есть два экземпляра, vm1 и vm2 на одной странице.
Во-первых, странный масштаб. Атрибуты экземпляра ограничиваются элементом DOM, а не оператором точки в фигурных скобках:
{{ attr1 }}, а не {{ vm.attr1 }}
Не только это, но и волшебная область видимости молча терпит неудачу, когда атрибут не существует!
Приведенный ниже код выполняется без ошибок. Обратите внимание на несуществующие toggle ссылки is_visible на vm:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script>
<script>
window.onload = function() {
var vm1 = new Vue({
el: '#vm1',
data: {
message: 'vm1',
},
methods:{
toggle: function(){
this.is_visible = !this.is_visible;
}
}
});
var vm2 = new Vue({
el: '#vm2',
data: {
message: 'vm2',
},
});
};
</script>
</head>
<body>
<div id="vm1">
<h1 v-on:click="toggle()">{{ message }}</h1>
</div>
<div id="vm2">
<h1>{{ message }}</h1>
</div>
</body>
</html>
1 ответ
Атрибуты экземпляра ограничены элементом DOM, а не оператором точки в фигурных скобках
{{ attr1 }} rather than {{ vm.attr1 }}
Да, именно так свойства Vue доступны в шаблоне (без ссылки на vm или this).
волшебная область видимости молча терпит неудачу, когда атрибут не существует!
Это не тихий провал. Это просто правильный JavaScript. В toggle() код присоединяет новое свойство с именем is_visible и устанавливает его значение в отрицание самого себя. Первоначально он не определен, поэтому результат отрицания равен true.
function Foo() {
console.log({foo1: this.foo});
this.foo = !this.foo;
console.log({foo2: this.foo});
}
new Foo();Vue не требует объявления всех свойств в data(). Вы можете прикрепить новое свойство к экземпляру компонента в любое время. Однако свойства, не объявленные в data(), не являются реактивными. Это может быть полезно для локальных переменных, которые не обязательно должны быть в шаблоне (например, идентификаторы таймера).
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.
En Español