var app;
app = new Vue({
el: "#app",
data: {
value: "hello world",
}
});Vue.component('login', {
template: '<h1>login</h1>'
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daemon</title>
<script src="./js/jquery-3.2.1.js" charset="UTF-8"></script>
<script src="./js/semantic.min.js" charset="UTF-8"></script>
<script src="./js/vue.js" charset="UTF-8"></script>
<link rel="stylesheet" href="./css/semantic.min.css">
</head>
<body>
<p id="app">
<p class="ui container">
<p class="ui pider"></p>
<p class="ui blue button">
{{value}}
</p>
<login></login>
</p>
</p>
<script src="./js/global.js" charset="UTF-8"></script>
<script src="./js/login.js" charset="UTF-8"></script>
</body>
</html>Result error: [Vue warn]: Unknown custom element: <login> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root> ;)
Which hero can give some advice to Xiaobai?
習慣沉默2017-07-05 10:44:57
I made some modifications in the HTML and adjusted the order of js introduction, because it is necessary to ensure that when the app root component is rendered, the components used in it have been declared and registered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daemon</title>
<script src="./js/jquery-3.2.1.js" charset="UTF-8"></script>
<script src="./js/semantic.min.js" charset="UTF-8"></script>
<script src="./js/vue.js" charset="UTF-8"></script>
<link rel="stylesheet" href="./css/semantic.min.css">
</head>
<body>
<p id="app">
<p class="ui container">
<p class="ui pider"></p>
<p class="ui blue button">
{{value}}
</p>
<login></login>
</p>
</p>
<script src="./js/login.js" charset="UTF-8"></script>
<script src="./js/global.js" charset="UTF-8"></script>
</body>
</html>