Vue 2.0 Hello World

by Asif Sharif Shahid

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <d-nav>
    <div class="article" ref="article">
      {{message}}
    </div>
       <div class="requests1" ref="requests1">
         </div>
        <div class="requests2" ref="requests2">
          </div>
         <div class="requests3" ref="requests3">
           </div>
          <div class="requests4" ref="requests4">
            </div>
           <div class="requests5" ref="requests5">
           
    
    </div>
  </d-nav>
</div>

JavaScript

const dNav = {
	template: `<div class="d-nav"><slot></slot></div>`
}
Vue.component('d-nav', dNav)

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
     message2: 'Bye Vue.js!'
  },
  mounted () {
  var requests = ['requests1','requests2','requests3'];
  var self = this;
   requests.forEach(function (item, index) {
console.log( self.$refs[item].clientWidth);
 })
  
		//console.log( "Adding ref" );
//		 console.log( this.$refs );
		//console.log( "Article" );
    
 
//		console.log( this.$refs.article );
//		console.log( this.$refs.article.clientWidth );
  }
})