Vue.js Simple Tuts: переключение

Переключение? Действительно?

Я программист баз данных, чей «интерфейс» перешел на PHP. Я рад видеть, что сообщество javascript в наши дни добивается такого большого прогресса - причина, по которой существует «Рамка месяца», больше связана с динамизмом разработчиков, которые находят лучший способ перейти от jQuery к правильному дизайну. паттерны, на мой взгляд, но факт в том, что я еще не очень хорошо разбираюсь в этом. Мне нужны медленные, четкие шаги. Приложения TODO сложны. Так что да - переключение.

Сложно сломать старый взгляд на вещи с помощью манипуляций с JQuery DOM. Где * эта * чертова штуковина `v-toggle`? Давай вернемся.

<!-- index.html -->
<div id="app">
    <button>Open/Close</button>
    <span>Toggle info</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src='app.js'></script>
<!-- app.js -->
new Vue({
    el: '#app'
});

Есть простая отправная точка. Кстати, я бы превратил этот код «новый Vue…» в фрагмент в вашей среде IDE - вы будете его часто использовать. Класс Vue монтируется в div, но больше ничего не настраивается. Очевидно, что вам нужно, чтобы диапазон появлялся или исчезал каждый раз, когда вы нажимаете кнопку. На самом деле есть два способа сделать это. Вы можете полагаться на CSS, чтобы изменить отображение, или вы можете добавить и удалить элемент span. Посмотрите на них в действии на Vue.js

<!-- change your index.html to this for a moment -->
<span  v-if="true">If true</span>
<span  v-if="false">If false</span>
<span  v-show="true">Show true</span>
<span  v-show="false">Show false</span>

Теперь обновите свою страницу и посмотрите на нее в Firebug или в инструментах разработчика:

<span>If true</span>
<span>If show</span>
<span style="display: none;">If show</span>

Вы можете видеть, что опция if false * не создает элемент *, тогда как show false просто отключает отображение. Вы можете узнать больше о разнице между `v-if` и` v-show` в документации: v-if vs. v-show

Вернитесь к текущей задаче. Для остальной части упражнения используйте более простое `v-show`. Выше вы видели, что установка для `v-show` значения true или false приводит к использованию` display: show / none`, так что вы можете немного пропустить. Вам просто нужно выяснить, как его включать и выключать. Измените свой index.html на это:

<button v-on:click='isOpen = !isOpen'>Open/Close</button>
<span  v-show="isOpen">Toggle info</span>

Сейчас мы говорим! Это легко! isOpen - это просто переменная, которая может быть истинной или ложной. `v-on: click` - это просто новый синтаксис для выражения` onClick`. Вы нажимаете кнопку, изменяется логическое значение, и… ничего не происходит. Хммм ... откройте инструменты разработчика ...

БОГ, НЕТ !!! НА ВСЕХ СТРАНИЦАХ ВЫЛИВАЕТ КРАСНЫЕ ЗАМЕТКИ !!!

«К., помедленнее. Прочтите это. [Предупреждение Vue]: свойство или метод isOpen не определены в экземпляре, но используются во время рендеринга. Обязательно объявите реактивные свойства данных в параметре данных.

Все просто. Вам просто нужно где-то `var isOpen = false`, верно? Или может быть `data-is-open =” false ”`? Эээ ... но как ты ...

Это то, что мне было трудно изменить в своем мышлении, когда я отказался от jQuery. Чтобы использовать слишком упрощенное объяснение, которое, вероятно, доставит мне проблемы с настоящими программистами javascript, подумайте о разнице между jQuery и другими js-фреймворками, например:

Когда Баттон хочет поговорить с Span, он не кричит: «Эй! Охватывать! Открыть!" Конечно, нет. Он разговаривает с чем-то еще, что передает сообщение. В jQuery это модель DOM. Думайте об этом как о объекте-контейнере, встроенном в ваш браузер, хотя бы для того, чтобы помочь вам пройти через эту аналогию. Вместо этого в Vue.js (или React, Angular и т. Д.) Он должен взаимодействовать с созданным вами основным классом Vue.

Вот и все. Это ключ к пониманию Vue.js - вы никогда, никогда не кричите. Вы всегда разговариваете с созданным вами классом Vue.

«Да, но это всего лишь переключатель. Спэнни прямо сейчас… »Нет! Вы никогда, никогда не кричите. Я знаю, что это ужасно просто, и большая часть моих проблем при переходе с jQuery возникла из-за моего собственного «не очень быстрого сбоя», но я думаю, что если вы вдолбите эту идею в свою голову, вы можете очень быстро оставить Мышление jQuery позади.

Итак, чтобы это работало, добавьте эту переменную isOpen. Прямо сейчас, если ваш Button говорит: «Привет, Vue, не могли бы вы попросить Спэнни изменить его настройку« isOpen »?» тогда Vue ответит: «А? открыт? Хм?". Сообщите Vue, что такое isOpen:

new Vue({
    el: '#app',
    data: {
        isOpen: false
    }
});

Вот так! Больше нет ошибок, и диапазон включается и выключается. Последнее, что вы могли бы сделать, это переместить этот isOpen =! IsOpen в метод.

<!--  in index.html -->
<!-- I also switched v-on:click to the short form @click -->
<button @click='toggle()'>Open/Close</button>
<!-- in app.js -->
new Vue({
    el: '#app',
    data: {
        isOpen: false
    },
    methods:{
        toggle: function(){
            this.isOpen = !this.isOpen
        }
    }
});

Надеюсь, это помогло!

Vue.js Simple Tuts: переключение

Вопросы по теме