Жизненное кредо Нэчжи: если вам нравится то, что вы изучаете, у вас будет сильная мотивация.
Держите свой интерфейс наготове и учитесь каждый день, просто найдите [Programmer Doraemon] в WeChat и обратите внимание на этого другого программиста. Если вам нравится то, что вы изучаете, у вас будет сильная мотивация.
Спасибо каждому программисту, который любит интерфейс, независимо от того, насколько замечательны его навыки, приглашаю обратить внимание на то, чтобы присоединиться ко мне в группе vx:xiaoda0423
предисловие
Надеюсь, эта статья поможет вам. (Благодаря трем ссылкам в один клик)
1.h5Нижнее поле ввода заблокировано клавиатурой
если вы столкнетесьh5Проблема страницы, когда поле ввода находится внизу, поле ввода будет заблокировано после нажатия на программную клавиатуру.Проблема может быть решена следующим образом:
var getHeight = $(document).height();
$(window).resize(function(){
if($(document).height() < getHeight) {
$('#footer').css('position','static');
}else {
$('#footer').css('position','absolute');
}
});
2. Нажмите на экран, чтобы играть
$('html').one('touchstart',function(){
audio.play()
})
3. Запретить автоматическую настройку размера шрифта при повороте экрана.
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
4. Стандартный макет веб-сайта
Страница разделена на 3 раздела: верхняя часть страницыheader,Нижнийfooter, средняя часть (боковая панельsideи основная частьmain).
Следующий код показывает:
<body>
// 页面层容器
<div id="container">
// 页面头部
<div id="header"></div>
// 页面主体
<div id="main">>
// 侧边栏
<div id="side">
</div>
</div>
// 页面底部
<div id="footer"></div>
</div>
</body>
Код стиля страницы дизайна выглядит следующим образом:
<style type="text/css">
body{
font: 12px 微软雅黑;
margin: 0px;
text-align: center;
background: #fff;
}
// 页面层容器
#container {
width: 100%;
}
#header {
width: 800px;
margin: 0 auto;
height: 100px;
background: #FFCC99;
}
#main {
width: 800px;
margin: 0 auto;
height: 400px;
}
#side {
float: left;
width: 20em;
background: red;
padding: 15px 0;
}
#foot {
width: 800px;
margin: 0 auto;
height: 50px;
background: #00ffff;
}
</style>
Схема эффекта выглядит следующим образом:
5. Что такоеMVVMРамка?
MVVMкадр - этоModel-View-ViewModelкадр, которыйViewModelмодель подключенияModelи посмотретьView.
существуетvue.jsсерединаMVVMмодель:
vue.jsуправляется данными,vue.jsсозданные объекты будутdomСвязывание с данными после связыванияdomи данные будут синхронизироваться при каждом изменении данных,domтакже изменится;ViewModelдаVue.jsядро, этоVue.jsэкземпляр .Vue.jsбудет нацелен наHTMLэлемент создается, этоHTMLэлементы могут бытьbodyилиcssЭлемент, на который ссылается селектор.DOM Listenersа такжеData BindingsЭто ключ к достижению двусторонней привязки.DOM Listenersконтролировать все страницыViewв слоеDOMэлементы при изменении,ModelДанные слоя изменяются соответствующим образом.Data Bindingsбудет контролироватьModelДанные слоя, когда данные изменяются,ViewслоистыйDOMЭлементы тоже меняются.
6.active-classсвойство какого компонента
этоvue-routerмодульныйrouter-linkСвойства компонента
7. Как определитьvue-routerдинамическая маршрутизация
Добавьте двоеточие перед именем статического маршрута, как указаноidПараметры динамической маршрутизации для объекта маршрутизацииpathнастройки свойств/:id
8. Как получить переданные динамические параметры
В компоненте используйте$routerобъектparams.id,Такие как$route.params.id
9.vue-routerКакие виды навигационных крючков существуют?
Есть три вида, первый — глобальный навигационный крючок,router.beforeEach(to,from,next), функция состоит в том, чтобы судить и перехватывать перед прыжком, второй — это крючок в компоненте, третий — отдельный компонент маршрутизации, эксклюзивный.
Навигационные хуки также называются навигационными сторожами и делятся на глобальные хуки, эксклюзивные хуки для одного маршрута и хуки на уровне компонентов.
Глобальные хуки естьbeforeEach,beforeResolve,afterEachэксклюзивные перехватчики для одного маршрута:beforeEnter
Хуки на уровне компонентов:beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave: Имеют следующие параметры:
toУказывает целевой объект маршрутизации, который вот-вот должен войти;fromУказывает маршрут, по которому уходит текущая навигация;nextУказывает, что эту функцию необходимо использовать для достижения следующего маршрута, иначе он будет перехвачен.
10.mint-uiчто
mint-uiэто основано наVue.jsФронтальная компонентная библиотекаnpmустановить, затем черезimportимпортировать стили иJavaScriptкод,vue.use(mintUi)Используется для реализации глобального импорта,import {Toast} from 'mint-ui'Используется для местного введения в виде одного компонента.
11.v-modelчто
v-modelдаvue.jsИнструкция по реализации двусторонней привязки данных
Принцип двусторонней привязки данных:
vue.jsиспользоватьes5Предоставленная функциональность функции атрибута в сочетании с шаблоном издатель-подписчикObject.defineProperty()определить для каждого свойстваget,setМетод функции, который публикует сообщения подписчикам при изменении передачи данных, вызывая соответствующие обратные вызовы прослушивателя.
Процесс: a, рекурсивный обход объектов данных, подлежащих наблюдению, включая атрибуты объектов податрибутов, набор
setа такжеgetМетод свойства; когда этому объекту присваивается значение, он запускает привязкуsetМетод признаков может играть роль отслеживания изменений данных. б, сcompileРазберите инструкцию шаблона, замените переменные в шаблоне данными, затем инициализируйте представление страницы рендеринга, привяжите функцию обновления к узлу, соответствующему каждой инструкции, и добавьте подписчиков для мониторинга данных. уведомление. и обновить представление. в,WatcherПодписчикObserverа такжеCompileМост для связи между: подписка на свойства при создании экземпляраdepдобавить себя внутрь; у себя должно бытьupdate()метод; вdep.notice()Когда выдается уведомление, оно может вызвать собственноеupdate()метод и триггерCompileФункция обратного вызова, привязанная к . д,MVVMЭто запись привязки данных, интегрированнаяObserver,Compileа такжеWathcherтри, черезObserverследить за собойmodelизменения данных черезCompileчтобы разобрать инструкции шаблона компиляции и, наконец, использоватьWatcherприйти и настроитьObserverа такжеCompileКоммуникационный мост между ними может достичь эффекта уведомления обновления представления об изменении данных и использовать взаимодействие представления для обновления данных при внесении изменения.modelИзменен двусторонний эффект связывания.
12.vue.jsКак привязать события к средним тегам
Первый способ, используйтеv-on; Второй способ, используйте@синтаксический сахар
13.vuexчто
vuexдаvue.jsФреймворк-реализованная система управления состоянием. использоватьvuex, импортироватьstore, и вводитьvue.jsВ компоненте внутри компонента вы можете передать$storeдоступstoreОбъекты; сценарии использования, в одностраничных приложениях, для связи между компонентами, такими как воспроизведение музыки, управление статусом входа в систему, добавление в корзину и т. д.
vuexМожно сказать, что это режим разработки или структура, котораяvue.jsРасширение уровня данных фреймворка за счет централизованного управления состоянием для управления изменениями компонентов, состояние приложения централизовано вstore, способ изменить состояние — зафиксироватьmutations, это синхронная транзакция, асинхронная логика должна быть инкапсулирована вactionсередина.
14. ВvueРасскажите мне о специальных инструкциях, которые вы знаете
Есть два вида пользовательских инструкций: глобальная пользовательская инструкция,vue.jsобъект обеспечиваетdirectiveметод, который можно использовать для настройки инструкции,directiveМетод получает два параметра: один — имя инструкции, другой — функция, второй — локальная пользовательская инструкция через компонентdirectivesопределение свойства.
15.vue.js4 вида инструкций, обычно используемых в
v-ifОпределить, скрыт ли объект;v-forv-bindПривязка свойства;v-modelРеализовать двустороннюю привязку данных
существуетv-ifРеализовано в циклеv-modelДвусторонняя привязка данных:
Иногда необходимо создать
inputи использоватьv-modelРеализовать двустороннюю привязку данных. В это время можноv-modelИдиома для привязки массиваselected[$index], что дает разныеinputсвязать разныеv-model:
<div v-for="(item,index) in arrDa">
<input type="text" v-model="arrData[index]">
<h1>{{arrDa[index]}}</h1>
</div>
16.vue-routerчто
vue-routerдаvue.jsПлагин маршрутизации (обычно используетсяrouter-linkа такжеrouter-view)
17.vue.jsжизненный цикл
Он делится на восемь этапов:
beforeCreate
После инициализации экземпляра наблюдатель данных
data observerа такжеevent/watcherВызывается перед конфигурацией события
created
Вызывается сразу после создания экземпляра, в этот момент экземпляр завершен: наблюдатель, операции со свойствами и методами,
watch/eventОбратный вызов события, фаза монтирования еще не началась,$elСвойства в настоящее время не видны.
beforeMount
Вызывается до начала монтирования, соответствующий
renderФункция вызывается впервые.
mounted
elВновь созданныйvm.$elЗамените и вызовите хук после того, как он будет смонтирован на экземпляре. еслиrootЭкземпляр монтирует внутридокументный элемент при вызовеmountedВремяvm.$elТакже в документации.
beforeUpdate
Вызывается при обновлении данных, происходит в виртуальном
domПеред повторным рендерингом и патчем.
updated
Виртуальный из-за изменения данных
domПеререндерить и пропатчить, после чего будет вызываться этот хук.
beforeDestroyed
Вызывается перед уничтожением экземпляра, в этот момент экземпляр все еще полностью доступен.
destroyed
существуетvue.jsВызывается после уничтожения экземпляра,vue.jsВсе, на что указывает экземпляр, освобождается, все прослушиватели событий удаляются, а все дочерние экземпляры уничтожаются.
Если вы используете компонентkeep-aliveдобавьте два цикла:
-
activatedсуществуетkeep-aliveВызывается при активации компонента; -
deactivatedсуществуетkeep-aliveВызывается при деактивации компонента.
<keep-alive>При обертывании динамических компонентов неактивные экземпляры компонентов кэшируются, а не уничтожаются.<keep-alive>является абстрактным компонентом, который сам по себе не отображаетDOMэлемент и не появляется в цепочке родительских компонентов.
когда в<keep-alive>При переключении компонентов внутри этоactivatedа такжеdeactivatedЭти две функции ловушки жизненного цикла будут выполнены.
<keep-alive>
<component :is="view"></component>
</keep-alive>
Добавьте циклический хук:ErrorCapturedУказывает, что он вызывается при обнаружении ошибки от компонента-потомка.
18. Описание пакетаvueКак работает компонент
Компоненты могут повысить эффективность разработки всего проекта и могут абстрагировать страницы на несколько относительно независимых модулей, решая проблемы низкой эффективности, сложного обслуживания и возможности повторного использования при разработке традиционных проектов.
использоватьVue.extendметод создания компонента, используйтеVue.componentспособ регистрации компонентов, субкомпонентам нужны данные, которые можно найти вpropsПолучите данные в подкомпоненте, и после того, как подкомпонент изменит данные, если вы хотите передать данные родительскому компоненту, вы можете использоватьemitметод.
Используйте пользовательские компоненты:
существуетcomponentsПри создании нового файла компонента в каталоге скрипт должен экспортировать открытый интерфейс, импортировать нужную страницу, внедрить импортированный компонент.vue.jsподкомпонентcomponentsатрибут; вtemplateиспользовать пользовательский компонент в представлении.
Создание компонентов
<div id="app">
<dada></dada>
</div>
<template id="demo">
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script type="text/javascript">
// 定义组件类
var dada = Vue.extend({
template: '#demo',
data:function() {
return {
msg: 'dadaqianduan.cn'
}
}
})
// 注册组件
Vue.component('dada',dada);
// 定义Vue实例化对象
var app = new Vue({
el: '#app',
data: {}
})
</script>
19.vue-loaderчто
vue-loaderэто разбор.vueЗагрузчик файлов, которыйtemplate/js/styleПеревести вjavascriptмодуль; через этоvue-loader,javascriptмогу написатьEMAScript6грамматика,styleможно применять стилиscssилиless,templateможно добавитьjadeграмматика. . .
20. Вvue.cliв проектеsrcКаталог Описание
-
assetsПапки для хранения статических ресурсов; -
componentsкомпоненты для хранения; -
routerОпределить конфигурацию, связанную с маршрутизацией; -
viewвид; -
app.vueявляется основным компонентом приложения; -
main.jsЭто файл ввода.
21.vue.jsизtemplateПодборка понимания
сначала преобразовать вASTабстрактное синтаксическое дерево,Abstract Syntax Tree, состоит в том, чтобы абстрагировать грамматическую структуру исходного кода в древовидное представление, а затем использоватьrenderФункция отображает и возвращаетVNode(Vue.jsвиртуальныйdomузел).
пройти через
compileКомпиляторtemplateскомпилировано вAST,compileдаcreateCompilerВозвращаемое значение,createCompilerиспользуется для создания компилятора,compileТакже отвечает за слияниеoption;ASTпройдетgenerate-БудуASTПеревести вrender functionстроковый процесс - получитьrenderфункция,renderВозвращаемое значениеVNode,VNodeдаVue.jsвиртуальныйDOMУзел с именем метки, дочерними узлами, текстом и т. д.
22.v-showинструкция иv-ifразница в инструкциях
Все они являются условными инструкциями рендеринга, разница в том,v-showЗначение либоtrueилиfalseэлементы будут существовать вhtmlстраница, покаv-ifценностьtrue, элемент существует вhtmlна странице.
v-showДирективы создаются путем изменения элементовstyleРеализованы значения атрибутов.
23. ПустьcssРаботает только в текущем компоненте
просто нужноstyleдобавить меткуscopedАтрибуты,<style scoped></style>
24. Вvue.jsКак реализовать вложенность маршрутизации в
Вложенность маршрутов отобразит другие компоненты внутри этого компонента вместо того, чтобы переходить на всю страницу.router-viewОпределите место, где будет отображаться компонент. Чтобы выполнять переходы между страницами, страница должна быть отображена в корневом компоненте. Сначала создайте экземпляр корневого компонента, определите контейнер рендеринга компонента в корневом компоненте, а затем смонтируйте маршрут.При переключении маршрута будет переключена вся страница.
new Vue({
el: '#dada',
router: router,
template: '<router-view></router-view>'
})
25. Вvue.jsсерединаrefЧто делают свойства
К некоторым элементам внутри компонента можно получить доступ напрямую, а определенные свойства можно передать внутри компонента.this.$refsсвойства, настройки доступаrefатрибут элемента, который является нативнымDOMэлемент, чтобы использовать роднойDOM APIуправлять ими.
26. Вvue.jsКак избежать перекрестного домена при вызове интерфейса в среде разработки
существуетconfig/index.jsВнутренняя параproxyTableЭлементы настраиваются следующим образом:
proxyTable: {
'/api': {
target: 'http://xxx.com',
changeOrign: true,
pathRewrite: {
'^/api': ''
}
}
}
27.axiosчто
axiosдаvue2.0используется для заменыvue-resource.jsМодуль плагина, модуль, который запрашивает фоновые ресурсы
использоватьnpm install axiosустановитьaxios
import Vue from 'vue'
import axios from 'axios';
Vue.prototype.$http = axios;
new Vue({
el: 'dada',
data: {
mag: ''
},
template: '<h1>{{msg}}</h1>',
created: function() {
this.$http.get('data.json').then(res=>{
this.msg = res.data.data
})
}
})
при звонкеaxios.post('api/user'), означает отправкуpostАсинхронный запрос.
28.sassчто
sassэтоcssпредварительно скомпилированные языки сnpmУстановить загрузчик; вwebpack.config.jsСредняя конфигурацияsassпогрузчик
module: {
// 加载程序
loaders: {
// 加载scss
{
test: /\.scss$/,
loader: 'vue-style-loader!css-loader!sass-loader'
}
}
}
29. При каких обстоятельствах будет сгенерирован экземпляр фрагмента
Шаблон содержит несколько элементов верхнего уровня, шаблон содержит только обычный текст, шаблон содержит только другие компоненты, а шаблон содержит только одну директиву элемента, напримерvue-routerиз<router-view>; корневой узел шаблона имеет инструкцию управления потоком, такую какv-ifилиv-for
В этих случаях есть экземпляры с неизвестным количеством элементов верхнего уровня, шаблон будетDOMсодержание как фрагмент. Экземпляры фрагментов по-прежнему будут корректно отображать содержимое. Однако шаблон не имеет корневого узла, его$elУказывает на узел привязки, который является пустым текстовым узлом.
существует
vue2.0В шаблоне компонента разрешено иметь только один корневой узел.
30. Реализуйте несколько методов для отображения разного текста в зависимости от условий.
<div id="app">
<input type="text" v-model="inputValue">
<h1>{{showValue}}</h1>
</div>
var app = new Vue({
el: '#app',
data: {
inputValue: ''
},
computed: {
showValue: function() {
return this.inputValue || '请输入内容'
}
}
})
31. Что такое потеря данных
Если данные не определены во время инициализации, обновленные данные не могут инициировать отрисовку и обновление страницы.Эта часть данных является потерянными данными.Это явление называется потерей данных.
32. Как обнаружить изменения в данных
- Установить элементы путем прямой индексации:
app.arr[0]= - Измените длину данных:
app.arr.length
Для решения этой проблемы,Vue.jsрасширяет массив наблюдений, добавляя$set()метод, массив, измененный этим методом, может запускать обновление представления и обнаруживать изменения данных.
app.$set(app.arr, 5, 500);
из-заjavascriptхарактерные ограничения,vue.jsДобавление или удаление свойств объекта не может быть обнаружено, потому чтоVue.jsПреобразовать массив вgetter/setter, поэтому свойство должно находиться вdataобъект определен для того, чтобы позволитьvue.jsПреобразуйте его и сделайте его отзывчивым.
var data = {
obj: {
a: 1
}
}
var app = new Vue({
el: '#app',
data: data
})
app.ojb.a = 10
app.obj.b = 20 // 不是响应的
data.obj.b = 20 // 不是响应的
Если вам нужно добавить свойства после создания экземпляра и сделать его отзывчивым, используйте$setМетод экземпляра:
app.$set(app.obj, 'b', 200)
Для обычных объектов данных можно использовать глобальные методы.Vue.set(object,key,value)
Vue.set(data.obj, 'b', 250)
33.vue.jsПроблема в том, что переопределение стиля в файле не действует
существуетstyleдобавитьscopedВы можете сделать стили приватными, только для текущегоvue.jsКод в файле действителен и не повлияет на код в других файлах.Иногда вводится третья сторонаUI,существуетvue.jsПереопределение стиля в файле не действует, возможно, потому чтоstyleВверхscopedвызванный.
Эту часть кода, которая должна переопределить стиль, можно поместить в отдельныйcssфайл, вmain.jsФайл можно импортировать.
34. Как решить слишком глубокую иерархию данных
При разработке часто происходит асинхронный сбор данных, а иногда уровень данных слишком глубокий, например:
<text v-text="a.b.c.d"></text>
можно использоватьvm.$setВручную определите слой данных:vm.$set("dada", a.b.c.d)
35.vue.jsмерцание страницы
существуетvue.jsесть одинv-cloakдиректива, которая остается в элементе до тех пор, пока связанный экземпляр не завершит компиляцию. когда иcssПри использовании эта директива может скрывать нескомпилированные теги до конца компиляции экземпляра:<div>не будет отображаться до конца компиляции.
[v-cloak] {
display: none;
}
<div v-cloak>{{dada}}</div>
Нравится, добавляете в избранное и комментируете
Я Джесксон (Dada front-end), спасибо вам за ваши таланты: лайки, избранное и комментарии, до встречи в следующем выпуске! (Если есть ошибка в объяснении содержания этой статьи, пожалуйста, укажите ☞Спасибо, давайте учиться вместе)
Увидимся в следующий раз!
Статья постоянно обновляется, вы можете выполнить поиск «Программист Дораэмон» на WeChat, чтобы прочитать ее в первый раз, и ответить на [Информация] Я подготовил информацию о производителях первого уровня, эта статьяwww.dadaqianduan.cn/#/был записан
github включен, добро пожаловать в Star:GitHub.com/веб-блог VUE/…