저는 Vue.js를 처음 사용하고 Vue.js의 cdn 링크가없는 헤더 html이 있습니다.
<nav class="navbar navbar-toggleable-md navbar-inverse">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="containerNav">
<div class="row">
<div class="col-6">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="navbar-brand" href="#"><img src="images/logo.png" height="30"/></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">TestPage</a>
</li>
</ul>
</div>
<div class="col-5" id="login-App">
<ul class="navbar-nav float-right">
<li class="nav-item">
<a class="nav-link" href="#">{{data.user}}</a>
</li>
<li class="nav-item">
<a class="nav-link" onclick="cleanLocalStorage()" href="login.html">Log out</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
jquery document.ready 함수로이 헤더 html을로드합니다.
$(document).ready(function () {
$(".footer").load("./footer.html");
$(".header").load("./header.html");
});
따라서 페이지에 Vue.js 변수를 표시 할 수 없습니다. 내 Vue.js 코드는 다음과 같습니다.
var loginApp = new Vue({
el: '#login-App',
data: function () {
return {
data: {}
}
},
methods: {
fetchData: function () {
Vue.set(loginApp.data, 'user', JSON.parse(localStorage.getItem('user')).name);
}
}
});
헤더 html에서 cdn 링크를 사용하면 작동하지만 색인 페이지에서만 사용하는 것을 선호합니다. 이 상황에 대한 트릭이 있습니까? cdn 대신 Vue.js CLI를 사용해야합니까?
단일 파일 구성 요소 를 사용 하여 머리글 및 바닥 글을 vue의 구성 요소 로로드 해야합니다 .
참고 : 저는 Babel과 ES6에 몇 가지 훌륭한 기능이 있기 때문에 사용하고 있습니다.
그래서 여기에 기본 자바 스크립트 파일, 그것은 전화 main.js또는 뭔가를
// Import Vue and Vue Components
import Vue from 'vue'
import mysite-header from './components/mysite-header.vue'
import mysite-footer from './components/mysite-footer.vue'
// Setup Vue
let app = new Vue({
el:'#mysite-app',
data: {
pagename: "This can be a variable",
},
components: {
mysite-header,
mysite-footer,
},
});
이제이 페이지의 HTML을 작성합니다.
<html>
<head>
<!-- Normal HTML Stuff here -->
</head>
<body>
<div id="mysite-app">
<mysite-header>
</mysite-header>
<!-- Static html content, or another vue template-->
<mysite-footer>
</mysite-footer>
</div>
</body>
</html>
이제 vue가로드되면 사용자 정의 html 태그가 ./components/mysite-header.vue및./components/mysite-footer.vue
mysite-header.vue의 예 :
<template>
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8">
<div class="card">
<div class="card-block">
<h4 class="card-title">{{ titleText }}</h4>
<hr class="my-2">
<p class="card-text">
<slot></slot>
</p>
<p>Body Text: {{ bodyText }}</p>
<input v-model="titleText">
<button :title="titleText">Hover over me!</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
// There are properties we pass from the parent
props: ['initTitleText','bodyText'],
data() {
// We can set local data equal to a property from the parent
// To create a "default" value that isn't bound to the parent's value
return {
titleText: this.initTitleText
}
},
mounted() {
// Called when this vue is first loaded
console.log('Component mounted.')
}
}
</script>
<style>
.card {
margin: .5rem 0;
}
</style>
물론 더 많은 것이 있지만, 이것을 알아내는 가장 좋은 방법은 천천히 구축하고 점점 더 많은 데이터를 전달하고 사물이 어떻게 상호 작용하는지, 사물이 어떻게 결합되는지 등을 보는 것입니다. 전반적으로 여러분은 jQuery보다 더 많은 vue를 사용하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다