Как верный пользователь Vue.js, я думаю, что необходимо написать некоторые статьи, чтобы похвалить этот красивый язык. Моя общая оценка этого - «простой, но элегантный, маленький, но не отсутствует талантливых людей». Следующее представит вам Vue.js вокруг этого предложения, надеясь стимулировать ваш интерес к Vue.js.
Введение в vue.js
Автор Vue.js - это Evan You (You Yuxi), который работает в Google Creative Lab. Хотя VUE - это личный проект, я лично считаю, что он не уступает AngularJ's Google с точки зрения перспектив развития. Я сделаю несколько простых сравнений с Vue (Angular 1.0+ версией).
Основные особенности Vue представлены на его официальном веб -сайте (http://cn.vuejs.org/):
(1) Краткий (2) легкий (3) быстрый (4) Драйвер данных (5), удобный для модуля (6) компонентизация
Простой
Вот кусок кода Angular для реализации двустороннего переплета
// html <body ng-app = "myApp"> <div ng-controller = "myctrl"> <p> {{note}} </p> <input type = "text" ng-model = "note"> </div> </body> // jsvar mymodule = ingular.module ('myApp' []); mymodule.controller ('myctrl', ['$ scopp', function ($ scope) {$ scope.note = '';]);Затем посмотрите на код Vue
// html <body> <div id = "app"> <p> {{note}} </p> <input type = "text" v-model = "note"> </div> </body> // jsvar vm = new Vue ({el: '#App', data: {Примечание: ''}})Для сравнения, я лично считаю, что стиль написания кода Vue более кратко и прост для понимания.
Не без элегантности
Хотя Vue является относительно легкой структурой, он прост, легкий и очень удобный для пользователя. API, который он предоставляет, также очень прост для понимания, а также предоставляет несколько очень удобных инструкций и атрибутов.
Например:
(1) Привязанную ленту
<a v-on: click = "dosomething"> </a>
Это может быть сокращено как:
<a @click = "dosomething"> </a>
(2) Свяжите динамические атрибуты
<a v-bind: href = "url"> </a>
Это может быть сокращено как:
<A: href = "url"> </a>
(3) Удобные модификаторы
<!-Предотвратить события щелчка от пузырьков->
<a @click.stop = "dosomething"> </a>
<!-События запускаются только тогда, когда нажата клавиша Enter->
<input @keyup.enter = "Отправить">
(4) Практические характеристики параметров
<!-Debounce устанавливает минимальную задержку->
<input v-model = "note" debounce = "500">
<!-Обновить данные в «Изменять» вместо события «Вход»->
<input v-model = "msg" ленивый>
Как насчет этого, это кажется таким элегантным?
Маленький
Говоря о малоте, мы должны сначала обратить внимание на размер исходного кода Vue. Исходный код производственной версии Vue (то есть версия мин) составляет всего 72,9 КБ. Официальный веб -сайт гласит, что GZIP составляет всего 25,11 КБ после сжатия, что наполовину меньше, чем 144 КБ Angular.
Одним из преимуществ компактности является то, что он позволяет пользователям более свободно выбирать соответствующие решения, и дает пользователям больше места с точки зрения сопоставления других библиотек.
Например, ядро VUE не включает в себя функции маршрутизации и AJAX по умолчанию, но если вам нужна маршрутизация и AJAX в вашем проекте, вы можете напрямую использовать официальный библиотечный Vue-Router и сторонний плагин-in Vue-Resource, предоставляемый Vue. В то же время вы также можете использовать другие библиотеки или плагины, которые вы хотите использовать, такие как jQuery's Ajax и т. Д.
Разве это не кажется очень гибким?
Есть много великих мастеров
Хотя Vue невелик, это «воробей маленький и имеет все внутренние органы», и его также легко создавать крупномасштабные приложения.
(1) Модульный
В сочетании с некоторыми сторонними инструментами построения модулей, такими как CommonJS, Tevaljs или SeaJS, модульность кода может быть легко достигнута.
Однако здесь я не рекомендую использовать вышеупомянутые строительные инструменты. В настоящее время это наиболее популярное решение для непосредственного использования модульной функции ES6, а затем соответствующим образом упаковывать его с WebPack.
Если вы не понимаете функции модуля ES6, пожалуйста, см.
В будущих статьях я также представлю его, включая конфигурацию WebPack.
(2) компонентизация
Функция компонентов Vue является ее основным моментом. Поместив код HTML, CSS и JS компонента на страницу в файл .vue для управления, обслуживание кода может быть значительно улучшено.
Например:
// app.vue<Шаблон> <div v-text = "note"> </div> </template> <script> export default {data () {return {Примечание: 'Это шаблон HTML компонента! '}}} </script> <style scoped> .box {color: #000;} </style>
Мы также можем написать некоторые языки предварительной обработки в компоненте:
// app.vue <template lang = 'Jade'> div (class = "box" v-text = "text") </template> <script> export default {data () {return {neft: 'Это шаблон HTML компонента! '}}} </script> <style lang = "styles">. Цвет коробки: #000 </style>Конечно, нам нужно упаковать его через WebPack. Рекомендуется использовать WebPack + Vue-Loader и одновременно использовать синтаксис ES6. Вавилон должен быть установлен для преобразования. Поскольку статья представляет собой краткое обсуждение Vue.js, я не дам углубленного введения здесь.
(3) Маршрутизация
Как и Angular, Vue обладает своими возможностями маршрутизации. Благодаря функции маршрутизации мы можем реализовать загрузку каждого компонента по требованию и легко построить одностраничное приложение. Вот простой файл конфигурации маршрутизации:
// router.js'use strict'Export по умолчанию функция по умолчанию (router) {router.map ({'/': {component: function (Resolve) {require (['./ components/foo.vue'], resolve)}}, '/foo': {component: function (resolve) {require (''. }}, '/bar': {component: function (Resolve) {rete (['' ./ components/bar.vue '], resolve)}}})}}}Чтобы просмотреть конкретную конфигурацию и использование маршрутизации, посетите официальную документацию, предоставленную: http://vuejs.github.io/vue-router/zh-cn/index.html
Суммировать
Я лично считаю, что некоторые передние технологии интегрированы. Изучение языка или самой структуры - это не изучение его технологии. Самое главное, чтобы узнать его мышление. Только уровень мышления расширен, и вам будет легко изучить другие технологии. То, что Vue приносит нам,-это новое мышление на переднем конце, чтобы решить проблемы.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.