Предисловие
В предыдущей главе мы успешно отобразили страницу списка через базовую конструкцию. Однако есть много проблем. В этой главе мы решим эти проблемы.
Используйте v-bind для привязки данных.
В предыдущей главе мы отобрали страницу. Однако, если консоль открыта, вы найдете ошибку. Как показано на рисунке ниже:
Это связано с тем, что, когда наступает страница, наш HTML -код будет выполнен первым, и в настоящее время наш Vue не начал работать. Наш код заключается в следующем:
<li v-for = "Информация в Data"> <i> <img src = "{{info.author.avatar_url}}"> <pan> {{info.author.loginname}} </span> </i> <Time> {info.create_at}} </time> <a. href = "infortm. }} "> {{info.title}} </a> </li>Как упомянуто выше, когда страница анализирует src = "{{info.author.avatar_url}}", конечно, этот путь изображения не может быть найден. Следовательно, ошибка будет естественно возникнуть. Поэтому нам нужно обработать этот код. Мы изменяем это на
<img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname">
Хорошо, давайте обновим страницу, на этот раз нет ошибок.
Vue знания
v-bind-атрибут http://vuejs.org.cn/api/#v-bind
Пополнить:
На самом деле, когда мы открываем страницу, мы все еще можем увидеть это содержимое {...}} в одно мгновение. Хотя это не сообщает об ошибке, это все равно влияет на небольшой пользовательский опыт. В настоящее время мы можем использовать V-текст для вывода этого содержимого. Как указано выше, мы изменяем код на следующее:
<li v-for = "Информация в данных"> <i> <img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname"> <span v-text = "info.author.loginname"> </span> </i> <Time v-text = " href = "content.html?
Когда мы изменяем код на это, все проблемы решаются.
Vue знания
V-текст
Украсить время
Формат времени, который мы получаем от интерфейса, похож на этот 2016-06-12T06: 17: 35.453Z. Очевидно, это не тот эффект, который мы хотим. Эффект, который мы хотим, должен быть таким, как опубликовано 2 часа назад. Как это сделать?
Нам нужна функция, которая используется, чтобы дать ей примитивную строку, а затем вернуть нужную мы.
Принцип этой функции не наше внимание. Я не объясню это здесь. Я просто смотрю на код следующим образом:
function goodTime(str){ var now = new Date().getTime(), oldTime = new Date(str).getTime(), difference = now - oldTime, result='', minute = 1000 * 60, hour = minute * 60, day = hour * 24, halfmonth = day * 15, month = day * 30, year = month * 12, _year = difference/year, _month = difference/month, _week = difference/(7*day), _day = разница/день, _hour = разница/час, _min = разница/минута; if (_year> = 1) {result = "Опубликовано в" + ~~ (_year) + "Год назад"} else if (_month> = 1) {result = "Опубликовано в" + ~~ (_month) + "месяц назад"} else if (_week> = 1) {result = "oppend in" + ~ ~ ~ ~ resceek). «Опубликовано в« + ~~ (_day) + "День назад"} else if (_hour> = 1) {result = "Опубликовано в" + ~~ (_hour) + "час назад"} else if (_min> = 1) {result = "Опубликовано в" + ~~ (_min) + "Минут назад"} relode = "просто"; вернуть результат;}Код имеет часть заимствования из кода других людей.
Хорошо, теперь мы можем использовать функцию метода GoodTime (STR) для изменения формата времени, данного нам интерфейсом, к тому, что мы хотим. Теперь вопрос в том, как мы можем использовать эту функцию?
Глупый метод, напрямую изменять исходные данные
Сначала мы получаем данные через Ajax, а затем передаем данные для Vue для рендеринга. Затем мы можем выполнить операцию в середине, обработать все данные, а затем передать обработанные данные для Vue для рендеринга. Эта проблема может быть решена.
Просто сделай это, давайте посмотрим на код:
Функция pushdom (data) {// Первый обход и изменение все время в данных для (var i = 0; i <data.data.length; i ++) {data.data [i] .create_at = goodtime (data.data [i] .create_at); }; // затем оставьте его для veud для var vm = new Vue ({el: '.list', data: data});}Хорошо, через приведенную выше обработку, давайте посмотрим на финальную страницу эффект. Следующее:
Успех.
Vue пользовательский метод фильтра
Хотя мы преуспели выше, на самом деле не элегантно создавать для петли непосредственно перед Vue. Более того, мы хотим выучить Vue, где это единственный способ учиться ...
Хорошо, давайте используем пользовательскую функцию фильтра Vue для его обработки.
Официальный учебник, пользовательский фильтр http://vuejs.org.cn/guide/custom-filter.html
Функция pushdom (data) {// Использование пользовательского фильтра Vue для легирования времени, проходящего в интерфейсе vue.filter ('time', function (value) {return goodtime (value);}) var vm = new vue ({el: '.list', data: data});};};};};};};};И нам нужно изменить нашу HTML -часть следующим образом:
<Time v-text = "info.create_at | time"> </time>
Хорошо, эффект реализации точно такой же. Но код выглядит гораздо более элегантным. Ключ в том, что в этом процессе мы узнали и освоили использование пользовательских фильтров. Фактически, во многих случаях данные, предоставленные нам интерфейсом, часто не подходят для рендеринга непосредственно на странице, поэтому эта функция очень важна и очень часто используется.
краткое содержание
1. Метод атрибута связывающего элемента привязки.
2. Метод вывода текста V-текста
3. Использование пользовательских фильтров Vue
Приложение
Вью Официальный сайт
Cnodejs API детали
Загрузите исходный код этой серии учебных пособий
ГЛАВА 1 Практического учебника Vuejs, создание оснований и визуализация списка
Практическое учебное пособие vuejs Глава 2 «Исправление ошибок и украсить время
Практическое учебное пособие Vuejs, используя плагин макета для реализации страниц.
Эта статья была первоначально написана Fungleo
Первый адрес выпуска: http://blog.csdn.net/fungleo/article/details/51649074
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.