Пробую Vue.js
Ниже писал как тестировал React.js, в итоге не привилось от слова совсем. Всё надумано и усложнено. Для реализации элементарных вещей типа вывода динамического списка загруженного из вне требуются феерические велосипеды. В итоге не смог придумать ни одного примера использования где было бы проще и удобнее чем с использованием чистого javascript + jquery. Теперь задумался в сторону фреймворка Vue.js В нём понравилась идея компонентности (кирпичиков из «своих» тегов) для создания страницы. Пока тестировал, получился вот такой скриптик, демонстрирующий базовые возможности:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!doctype html> <head> <meta charset="UTF-8"> <title>VUE.js test</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} <span v-bind:title="title">Hello</span> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> <button v-on:click="addItem">Добавить элемент</button> <input v-model="message"> <brick></brick> <brick></brick> </div> <script> Vue.component('brick', { template: '<div>Это кирпичик</div>' }); var app = new Vue({ el: '#app', data: { message: 'Привет'+ new Date().toLocaleString(), title: 'title me'+ new Date().toLocaleString(), msg:"DDD", todos:[ {text:'Один',key:"wedwe"}, {text:'Два'}, {text:'Три'} ] }, methods: { addItem: function () { this.todos.push({text: this.message}); } }, }); </script> </body> </html> |