홈>
안녕하세요 vuejs를 배우고 있고 프로젝트 중 하나를 vuejs로 변환하고있었습니다. 메소드에 사용자 정의 함수를 작성하고 마운트 된 후크에있는 함수를 호출 할 수 있다는 것을 알고 싶었습니다. p>
또한 vue 프로젝트로 가져 와서 jquery를 사용할 수 있습니까
vue 웹 사이트의 이벤트 리스너 문서에는 v-on 및 클릭 예제 만 표시되어 있지만 Windows 리스너에 대한 예제는 없습니다
jQuery(document).ready(function(){
//cache DOM elements
var mainContent = $('.cd-main-content'),
header = $('.cd-main-header'),
sidebar = $('.cd-side-nav'),
sidebarTrigger = $('.cd-nav-trigger'),
topNavigation = $('.cd-top-nav'),
searchForm = $('.cd-search'),
accountInfo = $('.account');
//on resize, move search and top nav position according to window width
var resizing = false;
moveNavigation();
$(window).on('resize', function(){
if( !resizing ) {
(!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
resizing = true;
}
});
//on window scrolling - fix sidebar nav
var scrolling = false;
checkScrollbarPosition();
$(window).on('scroll', function(){
if( !scrolling ) {
(!window.requestAnimationFrame) ? setTimeout(checkScrollbarPosition, 300) : window.requestAnimationFrame(checkScrollbarPosition);
scrolling = true;
}
});
//mobile only - open sidebar when user clicks the hamburger menu
sidebarTrigger.on('click', function(event){
event.preventDefault();
$([sidebar, sidebarTrigger]).toggleClass('nav-is-visible');
});
//click on item and show submenu
$('.has-children > a').on('click', function(event){
var mq = checkMQ(),
selectedItem = $(this);
if( mq == 'mobile' || mq == 'tablet' ) {
event.preventDefault();
if( selectedItem.parent('li').hasClass('selected')) {
selectedItem.parent('li').removeClass('selected');
} else {
sidebar.find('.has-children.selected').removeClass('selected');
accountInfo.removeClass('selected');
selectedItem.parent('li').addClass('selected');
}
}
});
//click on account and show submenu - desktop version only
accountInfo.children('a').on('click', function(event){
var mq = checkMQ(),
selectedItem = $(this);
if( mq == 'desktop') {
event.preventDefault();
accountInfo.toggleClass('selected');
sidebar.find('.has-children.selected').removeClass('selected');
}
});
$(document).on('click', function(event){
if( !$(event.target).is('.has-children a') ) {
sidebar.find('.has-children.selected').removeClass('selected');
accountInfo.removeClass('selected');
}
});
//on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents
sidebar.children('ul').menuAim({
activate: function(row) {
$(row).addClass('hover');
},
deactivate: function(row) {
$(row).removeClass('hover');
},
exitMenu: function() {
sidebar.find('.hover').removeClass('hover');
return true;
},
submenuSelector: ".has-children",
});
function checkMQ() {
//check if mobile or desktop device
return window.getComputedStyle(document.querySelector('.cd-main-content'), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "");
}
function moveNavigation(){
var mq = checkMQ();
if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) {
detachElements();
topNavigation.appendTo(sidebar);
searchForm.removeClass('is-hidden').prependTo(sidebar);
} else if ( ( mq == 'tablet' || mq == 'desktop') && topNavigation.parents('.cd-side-nav').length > 0 ) {
detachElements();
searchForm.insertAfter(header.find('.cd-logo'));
topNavigation.appendTo(header.find('.cd-nav'));
}
checkSelected(mq);
resizing = false;
}
function detachElements() {
topNavigation.detach();
searchForm.detach();
}
function checkSelected(mq) {
//on desktop, remove selected class from items selected on mobile/tablet version
if( mq == 'desktop' ) $('.has-children.selected').removeClass('selected');
}
function checkScrollbarPosition() {
var mq = checkMQ();
if( mq != 'mobile' ) {
var sidebarHeight = sidebar.outerHeight(),
windowHeight = $(window).height(),
mainContentHeight = mainContent.outerHeight(),
scrollTop = $(window).scrollTop();
( ( scrollTop + windowHeight > sidebarHeight ) && ( mainContentHeight - sidebarHeight != 0 ) ) ? sidebar.addClass('is-fixed').css('bottom', 0) : sidebar.removeClass('is-fixed').attr('style', '');
}
scrolling = false;
}
});
- 답변 # 1
관련 자료
- VueJs에서 자식 A에서 부모로, 부모에서 자식 B 로의 이벤트 흐름 조정
- javascript - 이벤트를 잡는 방법은 vuejs v-calendar입니다
- vue.js - VueJS에서 모든 이벤트를 부모에게 전달하는 방법
- javascript - Tpology 다이어그램을 사용하여 Cytoscapejs 캔버스에서 마우스 스크롤 및 키 누르기 이벤트를 처리하는 방법
- javascript - Chrome에서 미디어 키 이벤트를 Windows로 다시 전달할 수있는 방법이 있습니까?
- python selenium을 사용하여 스크롤 막대가있는 브라우저 내에 여러 창이있는 경우 아래로 스크롤하는 방법
Vue에서 다음과 같은 창 이벤트를들을 수 있습니다 :
또는 jQuery를 사용하여 :