ndi-2018
/
main
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

upd: view.vue.main (now can include component (import + CamelCase))

This commit is contained in:
xdrm-brackets 2017-11-30 16:46:30 +01:00
parent 2e7291929a
commit 5894aecae3
3 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
view/main.js
View File

@ -20,8 +20,10 @@ window.api = new API("http://ndli1718/api/v/1.0/");
window.wsc = new WSClientBuilder("wss://websocket.xdrm.io"); window.wsc = new WSClientBuilder("wss://websocket.xdrm.io");
/* (3) Render view */ /* (3) Render view */
new Vue({ new Vue({
el: '#main-vue', el: '#main-vue',
render: h => h(main_vue) render: h => h(main_vue),
data: {
'server': window._SERVER
}
}) })

14
view/vue/header.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div id='HEADER'>
HEADER CONTENT (component)
</div>
</template>
<script>
export default {
name: 'HEADER'
}
</script>

66
view/vue/main.vue
View File

@ -1,59 +1,55 @@
<template> <template>
<div id="root"> <div id="root">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2> <header-comp></header-comp>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> <span>message: {{ msg }}</span>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li> </div>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template> </template>
<script> <script>
import header_vue from './header.vue';
export default { export default {
name: 'root', name: 'root',
data () { data(){ return {
return { msg: 'Main vue component'
msg: 'Welcome to Your Vue.js App' }; },
} components: {
} 'HeaderComp': header_vue
}
} }
</script> </script>
<style> <style>
#root { #root {
font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
margin-top: 60px; margin-top: 60px;
} }
h1, h2 { h1, h2 {
font-weight: normal; font-weight: normal;
} }
ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
li { li {
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
} }
a { a {
color: #42b983; color: #42b983;
} }
</style> </style>