VueJS Hello world

by KevinGabbert

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<!-- App -->
<div id="app">
  <p ref="a" @click="handleClick">{{ message }}</p>
  <test>
    <button @click="handleClick">Test</button>
  </test>
  <comp ref="b" v-show="show"></comp>
  <div>
    <a ref="c">Hello</a>
  </div>
  <div ref="d">
    <a>Hello</a>
  </div>
  <comp ref="b2" v-show="show"/>
  <div v-show="show">
    <comp ref="e"/>
  </div>
  <div>
    <comp ref="f"/>
  </div>
  <div>
    <a ref="g">Hello</a>
  </div>
  <div ref="h">
    <a>Hello</a>
  </div>
</div>

JavaScript

console.clear()
console.log('Yes! We are using Vue version', Vue.version)

// New VueJS instance
var app = new Vue({
	// CSS selector of the root DOM element
  el: '#app',
  // Some data
  data: () => ({
    message: 'Hello Vue.js!',
    show: false,
  }),
  components: {
  	comp: {
    	render (h) {
      	return h('div', 'MyComponent')
      }
    },
    test: {
    	template: `<section><slot/></section>`
    }
  },
  methods: {
  	handleClick () {
    	this.show ^= 1
    	console.log('click', this.$refs)
      this.$nextTick(() => {
      	console.log('tick', this.$refs)
      })
    }
  },
  mounted () {
  	console.log('mounted', this.$refs)
  }
})