Skip to content

03 Page / Component template

This is a simple example of a component, which will also be available as a page under the /pages/testpage route.

  • A Page has a route and should be placed in the pages folder.
  • A Component does not have a route and should be placed in the components folder.
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Vue.component('testpage', {
    template: `
<div class="xd-content" :data-component="$options.name">

  <h1>Examples</h1>

  <v_button title="hello world" class="xd-large" url="/api/srs/012/run.json" @updated="test = $event">
    Hello
  </v_button>

  <v_table :value="[{a:1,b:2},{a:3,b:4}]"></v_table>

  <template v-if="test">
    <template v-for="(value, propertyName) in  test.data.data">
      {{propertyName}}
      <v_table :value="value"></v_table>
    </template>
  </template>

  <!-- <v_editable_pre value="Hello Test"></v_editable_pre> -->
  <v_timer></v_timer>
  <!-- {{test}} -->
  <v_code value="select * from test" :highlight="true" type="sql"></v_code>




  <v_file_item value="33d52ff9-9914-923c-10bd-3251ea2db555.png"></v_file_item>


</div>`, 
    data() {
        return {
          test:'',
        };
    },
    mounted() {
    }
});
routes.push( { path: '/pages/testpage/:ps1?/:ps2?/:ps3?/:ps4?', component: Vue.options.components['testpage'], props: { pmode: true } });