Стартовый код Cordova и Vue.js

👁 35 просмотров

Чтобы программировать для Cordova на современном фреймворке Vue.js необходимо учитывать факторы, которые дают знать коду на Vue.js, что все ресурсы устройства загружены и начался черед исполнения кода на Vue.js. Ниже представлен скелет данного кода. По сути дела, это переделанный код из файла по умолчанию index.js в понятный вид:

var app = {
    initialize: function() {
    	//Делаем инициализацию
        this.bindEvents();
        this.setupVue();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    receivedEvent: function(id) {
        console.log('Received Event: ' + id);
    },
    setupVue: function() {
    	//Начинаем кодить на фреймворке Vue.js
    	var app = new Vue({
    		el: '#app',
    		data: {
    		  message: 'Hello Vue!'
    		}
    	})
    }
}

//Запускаем приложение
app.initialize();

В плане организации и подключения файлов скриптов важно подумать об оптимизации.

Расширенное поле типа select, tag, search, input в одном флаконе на Vue.js

👁 37 просмотров

Данный проект называется Vue Select и доступен по ссылке.  Много примеров его использования по ссылке на CodePen. Ниже представлен простой пример того, как его использовать в базовом предназначении:

Диалоговое окно на Vue.js

👁 59 просмотров

В данном посте представлено диалоговое окно на Vue.js. Окно использует сетку bootstrap и реализовано в виде компонента, но ничего не мешает видоизменить без bootstrap и оформить в виде модуля.

Все что нужно — это добавить код компонента на страницу:

Vue.component("viewer-dialog", {
  template: `<div id="dialogViewer">
                    <div class="viewerBox" v-show="activeViewer">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-3"></div>
                                <div class="col-6"></div>
                                <div class="col-3 dlg-close" @click="closeViewer">×</div>
                            </div>
                        </div>
                        <div v-html="htmlContent"></div>
                    </div>
                </div>`,
  data: function() {
    return {
      activeViewer: false,
      htmlContent: ""
    };
  },
  //props: ['btnText'],
  methods: {
    sendReview: function() {
      console.log("!+");
    },
    openViewer: function() {
      this.activeViewer = true;
    },
    closeViewer: function() {
      this.activeViewer = false;
    }
  },
  watch: {
    src: function() {
      this.openViewer();
    }
  },
  created() {
    this.$root.$on('clicked', (html) => {
      this.activeViewer = true;
      this.htmlContent = html;
    });
  }
});

Подключить стили:

#dialogViewer {}

.viewerBox {
  padding-top: 20pt;
  position: absolute;
  top: 0pt;
  text-align: center;
  left: 0pt;
  width: 100%;
  height: 100%;
  display: block;
  background-color: white;
  z-index: 99999;
  overflow-y: scroll;
}

.viewerBox img {
  width: 90%;
  height: auto;
}

.viewerBox .dlg-close {
  font-size: 30pt;
  cursor: pointer;
}

Добавить теги в разметку страницы:

<div id="myApp">
  <viewer-dialog></viewer-dialog>
  <br/>
  <center>
    <button @click="showDialog">Открыть</button>
  </center>
</div>

Написать код приложения Vue.js:

var myApp = new Vue({
  el: "#myApp",
  data: {

  },
  methods: {
    showDialog: function() {
      var html = "<div>Инфа</div>";
      this.$emit('clicked', html);
    }
  }
});

И любоваться результатом:

Связь между компонентами в Vue.js

👁 230 просмотров

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

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

Стоит отметить, что данный подход предполагает использование событий по нисходящей и свойств элемента по восходящей

Т.е., это означает, что дочерние компоненты могут обращаться к корневому компоненту посредством событий эммитеров, а от корневого компонента к дочерним данные передаются по заранее определенным в дочернем компоненте свойствам элемента. Ниже приведены оба пример обмена.

От корневого к дочернему:

От дочернего к корневому:

Тут еще один пример двунаправленной передачи:

Компонент добавления тегов в Vue.js

👁 37 просмотров

Представим, что у нас есть задача сделать компонент в виде формы ввода тегов. Не буду вдаваться в подробности, но скажу, что компонент может быть записан в отдельные файлы component.js и component.css  и подключить обычным образом к странице. В Cordova, к примеру, пока это единственный способ использовать внешние компоненты, загружаемые в виде отдельных модулей, потому что нет поддержки import

Чтобы иметь обратную связь из модуля в главное приложение Vue.js нам необходимо установить событие обновления  тегов, потому что нам необходимо заполучить эти введенные, чтобы потом хранить их в БД. Решением этого является добавление в методе watch модуля наблюдение для параметра tags:

tags() {
    this.$root.$emit('updateTags',this.elementId, this.tags, this.tagBadges, this.existingTags);
}

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

this.$root.$on('updateTags', (fieldName, tags, badges, existingTags) => {
    //...
});

К примеру, если у нас несколько полей ввода на одной странице, то нам будет полезно их разграничить, ведь, чтобы получить данные того поля, который был изменен, для этого можно воспользоваться следующим кодом:

<tags-input element-id="fieldGenreTags"
            :existing-tags="genreTags"
            :typeahead="true">
</tags-input>
<tags-input element-id="fieldSkillTags"
            :existing-tags="skillTags"
            :typeahead="true">
</tags-input>
<tags-input element-id="fieldImageTags"
            :existing-tags="imageTags"
            :typeahead="true">
</tags-input>
this.$root.$on('updateTags', (fieldName, tags, badges, existingTags) => {
   //
   var tagObj = {};
   tags.forEach(function(item, index, tags){
        tagObj[item] = badges[index];
   });
   //
   if("fieldGenreTags"==fieldName+"") this.curGenreTags = tagObj;
   if("fieldSkillTags"==fieldName+"") this.curImageTags = tagObj;
   if("fieldImageTags"==fieldName+"") this.curSkillTags = tagObj;
   //
   console.log("fieldGenreTags");
   console.log(this.curGenreTags);
   console.log("fieldSkillTags");
   console.log(this.curImageTags);
   console.log("fieldImageTags");
   console.log(this.curSkillTags);
})

Т.е., на странице для поля мы определяем для него ID, а в методе мы по этому ID разграничиваем получаемые данные.

Некоторые полезные сниппеты на Vue.js

👁 25 просмотров

Как создать список select с предустановленным значением option?

К примеру, есть задача загнать в select список данных с значением и его названием и чтобы какая-то опция была выбрана по умолчанию. Ниже представлен этот код:

Базовые вещи в Vue.js

👁 64 просмотров

Предисловие

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

Установка Vue.js

Установить Vue.js — это просто. Все, что нам нужно — это знать, какими методами установить. Есть несколько способов, в зависимости от того, где мы хотим использовать Vue.js.

Если хотим использовать на стороне клиента, то можем ссылать на cdn — ссылку проекта, добавив в страницу ссылку на cdn:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

Можем также добавить через менеджер пакетов bower:

bower install vue

Если хотим использовать в масштабируемых Node.js — серверных приложениях, то выполняем код:

npm install vue

Все дополнительные моменты установки можно найти в разделе установки Vue по ссылке.

 

Базовое приложение Vue.js

Ниже представлено базовое приложение на Vue.js или базовый скелетон приложения на Vue.js

Описание основных параметров приложения Vue.js

Выше мы создали первое и базовое приложение на Vue.js. Давайте рассмотрим список основных его параметров.

Параметры приложения:

  • new Vue{…} — это главный объект приложения. Можно было это написать так var app = new Vue{…}; после чего через объект app можно было получить все значения данного приложения для взаимодействия с другими приложениями;
  • data — это поле, в котором хранятся все данные и переменные текущего приложения. Это могут быть обычные объекты или же массивы в JSON — формате;
  • computed — это поле, которое нужно для вычисляемых методов. Параметрами данного поля являются методы, которые вычиляют обновляющиеся данные. Вычисление происходит после каждого случая взаимодействия с приложением, поэтому это поле обновляется всегда;
  • methods — поле для определения методов текущего приложения. Это могут быть обработчики событий или другая логика выполнения кода;
  • watch — поле для задания слушателей для определенного параметра. Данный слушатель будет выполняться всегда, когда будет обновляться значение данного параметра;

Условные конструкции приложения:

  • v-if=’isTrue’ — условный оператор выполнения текущего блока, если какое-то значение истинно;
  • v-else — условный оператор ветвления, если не выполнится блок v-if. Является необязательной продолжительной частью v-if;
  • v-else-if — условный оператор ветвления, если не выполнится блок v-if и требуется продолжения ветвления. Является необязательной продолжительной частью v-if;
  • v-show — выполняет ту же операцию, что и v-if, но в отличии от v-if данная конструкция просто скрывает элемент посредством css — поля display;

Конструкции организации циклов:

  • v-for=‘item in items’ — самый простой вид итерации из массива, в данном случае, будет читать все объекты в виде item из массива items;
  • v-for=‘(index, item) in items’ — то же самое, но еще можно заполучить индекс текущего элемента массива;
  • v-for=‘value in object’ — итерация полей из объекта;
  • v-for=‘(key, val) in object’ — итерация полей из объекта с ключами;
  • v-for=‘n in 10’ — ранжирование, т.е. инкремент на 1 значения n от 0 до определенного значения, в  данном случае — до 10;

Организации событий:

  • v-on:eventname=’eventHandler — организиует для элемента событие с типом eventname и обработчиком eventHandler. В роли типа события может выступать любой определенный в JS событие на элементе, а в роли обработчика может выступать функция, определенная в параметре приложения methods;
  • @eventname=’eventHandler — короткая запись организации события без v-on;
  • v-on:eventname=’eventHandler(param)‘ — то же самое, но передаем еще и параметр в обработчик;
  • v-on:eventname=’eventHandler(param, $event) — то же самое, но передаем еще параметр и специальный объект события в обработчик. В последствии мы можем на объекте глобального события event вызвать, к примеру метод preventDefault() или же можем заполучить координаты нажатого объекта;

Работа с атрибутами:

  • v-bind:attrname=’pаram’ — позволяет задать значение для атрибута, где param — переменная приложения Vue;
  • :attrname=’param’ — то же самое, нов коротком виде;

Сквозная связь между данным поля HTML и параметром:

  • v-model:=’param’ — позволяет двунаправленно создавать связи между меняющимся значением какой-то формы HTML и каким-нибудь параметром или переменной Vue.js. Это позволяет создавать интерактивному смену значения одной переменной по всему приложению;

 

На этом материал для данного поста все. Это основные моменты, но не все. Vue.js гораздо гибок и богат функционалом. Для углубленного изучения, лучше, конечно, почитать документацию.

Отправка AJAX — запроса через Vue.js к удаленному серверу

👁 247 просмотров

AJAX — взаимодействие — это , пожалуй, первое, с чего нужно начинать, если мы хотим разработать клиент-серверное приложение по методологии REST.

Но, что, если вместо привычного нам jQuery мы хотим использовать Vue.js? Для этого есть несколько способов и один из них — это использование модуля axios.

Использование модуля axios

Данный модуль позволяет организовать связь между браузером, где расположено наше приложение с сервером, где установлен Node.js. Поэтому, установка данного модуля заключается:

  • в установка модуля на сервер через npm;
  • в подключении клиентской версии модуля к нашему приложению.

Для установки на сервер выполняем команду:

npm install axios

Для установки на стороне клиента устанавливаем через bower:

bower install axios

или подключаем исходник через CDN — ссылку:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Следующий код отправляет запрос на сервер и возвращает данные на этапе загрузки страницы  и работает в версии EcmaScript 5:

 var appIndex = new Vue({
            el: '#app',
            data: {
                regions: []
            },
            methods: {},
            watch: {},
            created: function () {},
            mounted: function () {
                var self = this;
                axios
                    .post("http://83.220.168.205:3000/location",
                    {
                        key: "SELECT"
                    })
                    .then(function(response){
                        self.regions = response.data.result;
                    }).catch(function (error) {
                        console.log(error);
                    });
            }
            
        });

То же самое в EcmaScript 6:

var appIndex = new Vue({
        el: '#app',
        data: {
            regions: []
        },
        methods: {},
        watch: {},
        created: function () {},
        mounted: function () {
            axios
                .post("http://83.220.168.205:3000/location",
                {
                    key: "SELECT"
                })
                .then((response)=>{
                    this.regions = response.data.result;
                }).catch((error)=>{
                    console.log(error);
                });
        }
        
    });