1. Введение в vue.js
1. Основные особенности VUE: (1) Краткий (2) легкий (3) быстрый (4) Драйвер данных (5) Средство модуля (6) компонентизация
(1) Краткий
Вот кусок кода 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 более кратко и прост для понимания.
(2) Не без элегантности
Хотя 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) Удобный модификатор
<!-Предотвратить событие Click от Bubbled-> <a @click.stop = "dosomething"> </a> <!-События запускаются только после нажатия клавиши Enter-> <input @keyup.enter = "Отправить">
4) Практические характеристики параметров
<!-Дебайт Установите минимальную задержку-> <input v-model = "note" debounce = "500"> <!-Обновление данных в «Изменение» вместо «Входных» событий-> <input v-model = "msg" Lazy>
Как насчет этого, это кажется таким элегантным?
(3) Небольшие советы
Говоря о малоте, мы должны сначала обратить внимание на размер исходного кода Vue. Исходный код производственной версии Vue (то есть версия мин) составляет всего 72,9 КБ. Официальный веб -сайт гласит, что GZIP составляет всего 25,11 КБ после сжатия, что наполовину меньше, чем 144 КБ Angular.
Одним из преимуществ компактности является то, что он позволяет пользователям более свободно выбирать соответствующие решения, и дает пользователям больше места с точки зрения сопоставления других библиотек.
Например, ядро VUE не включает в себя функции маршрутизации и AJAX по умолчанию, но если вам нужна маршрутизация и AJAX в вашем проекте, вы можете напрямую использовать официальный библиотечный Vue-Router и сторонний плагин-in Vue-Resource, предоставляемый Vue. В то же время вы также можете использовать другие библиотеки или плагины, которые вы хотите использовать, такие как jQuery's Ajax и т. Д.
Разве это не кажется очень гибким?
(4) Есть много великих мастеров
Хотя Vue невелик, это «воробей маленький и имеет все внутренние органы», и его также легко создавать крупномасштабные приложения.
1) Модульный
В сочетании с некоторыми сторонними инструментами построения модулей, такими как CommonJS, Tevaljs или SeaJS, модульность кода может быть легко достигнута.
Однако здесь я не рекомендую использовать вышеупомянутые строительные инструменты. В настоящее время это наиболее популярное решение для непосредственного использования модульной функции ES6, а затем соответствующим образом упаковывать его с WebPack.
Если вы не понимаете функции модуля ES6, обратитесь к адресу ссылки для получения подробной информации:
В будущих статьях я также представлю его, включая конфигурацию WebPack.
2) компонентизация
Функция компонентов Vue является ее основным моментом. Поместив код HTML, CSS и JS определенного компонента на страницу в файл .vue для управления, обслуживание кода может быть значительно улучшено.
Например:
// app.vue <template> <div v-text = "note"> </div> </template> <script> export default {data () {return {never {Примечание: «Это шаблон компонента 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)}}})}}}2. Введение в компоненты загрузки
На самом деле, это не высококачественный компонент. Напротив, это на самом деле просто простой компонент подвески. Это в основном потому, что мне нужен компонент подкрепления таблицы в моем недавнем проекте. Компоненты ли библиотеки библиотеки официальных компонентов компонентов слишком сильны или не подходят для меня, поэтому я сам написал с этим. Может быть, кто -то вроде меня нуждается в таком простой компоненте пейджинг, чтобы реализовать простые функции пейджинга. Я поделюсь этим здесь, и каждый заполнит ямы.
Если вам нужны высококачественные компоненты, вы можете перейти в официальную библиотеку компонентов VUE
(1) Как использовать
В файле компонента .vue мы пишем такой шаблон, как этот код HTML:
<table> <thead> <tr> <th> id </th> <Th> name </th> <Th> Content </th> <Th> замечание </th> </tr> </thead> <tbody> <ttr v-for = "data in tablelist"> <td v-text = "data.num"> </td> <td v-text = ". v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <div> <boot-page: async = "false": data = "списки": lens = "Lenarr": page-len = "pagelen"> <//boot-page> <//boot-page> <//boot-page> <//divage> <//boot-page> <//boot-page> <//boot. </td> </tr> </tfoot> </table>
В теге <boot-page> async относится ли получить данные со стороны сервера, false нет; Данные представляют собой статический массив табличных данных; Объектив представляет собой массив рядов, отображаемых на страницу; Page-Len-это количество страниц, которые можно отобразить;
Код JavaScript, который использует статические данные, то есть содержимое в теге сценария следующее:
<Script> импорт загрузки из './components/bootpage.vue' export default {data () {return {lenarr: [10, 50, 100], // Длина отображения на Pagelen: 5, // Количество страниц, которые можно отобразить: [{num: 1, автор: 'luozh', sentents: '123 «Luozh», Содержание: '123', замечание: 'Bootpage'}, {num: 1, Author: 'luozh', Содержание: '123', замечание: 'Bootpage'}, {num: 1, Author: 'Luozh', Содержимое: '123', замечание: 'Bootpage'}, {num: 1, Author: 'luoz. 'bootPage'} ], // table raw data, no need to use tableList when using server data: [] // post-paging data returned by the pagination component} }, components: { bootPage }, events: { // table data returned by the pagination component 'data' (data) { this.tableList = data } } } </script>Как правило, мы редко используем статические табличные данные, и данные большинства приложений получаются со стороны сервера, поэтому вот метод получения данных страниц сервера:
Компонент HTML, который использует данные сервера, выглядит следующим образом:
<boot-page: async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>
где URL является адресом запроса сервера; PARAM - это объект параметра, который необходимо отправлять на сервер;
Код с использованием данных сервера JavaScript заключается в следующем:
<Script> import Bootpage from './components/bootpage.vue' export default {data () {return {lenarr: [10, 50, 100], // Длина отображения на Pagelen: 5, // Количество страниц, которые можно отображать PARAMEST: По компоненту лиц}}, методы: {refresh () {this. $ Broadcast ('refresh') // Функция обновления таблицы представлена здесь}}, компоненты: {Bootpage}, события: {// Данные таблицы, возвращаемые компонентом лиц (здесь возвращается данные).Примечание. В дополнение к содержимому массива, передаваемому в таблицу компонентов, серверу также требуется имя ключа общего количества страниц с именем page_num
(2) Исходный код компонента
Что касается реализации страниц, исходный код здесь не будет отображаться. Я загрузил весь исходный код на свой GitHub, адрес
Позвольте мне напомнить вам заранее: потому что мне потребовалось несколько часов, чтобы вытащить этот компонент, я, должно быть, был неадекватен в форматах письма и спецификациях компонентов VUE и не был полностью независимым, поэтому я сознательно заполняю яму. Я поделюсь только здесь.
Конечно, вы также можете изменить код компонента по желанию в соответствии с использованием вашего проекта. В конце концов, довольно сложно внедрить большие и полные компоненты пейджинга.
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.