vuejs Tutorials – vuejs component

vuejs Tutorials – vuejs component

In this Post We Will Explain About is vuejs Tutorials – vuejs component With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to vuejs component Example

In this post we will show you Best way to implement vuejs tutorial, hear for vuejs computed with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Hello World in Vue.js

The first some thing we need to know, is to actually create Vue.js available to our very programs first Vue.js web-application. In order to do that, as well as head over to the basic installation page at simple vuejs.org.

Also Read :  Dynemically HTML table from AJAX response using PHP

Now all we have some to do is to put this URL within a script tag.

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

At the heart of Vue.js using javascript lang is something that we call a “Vue instance.”
A Vue simple instance is most responsible for some controlling a piece of HTML source code, also some referred to as a “template”, which is then simple HTML rendered in the browser.

As well as Learn In this website to, vuejs router, vuejs tutorial, vue.js, vuejs props, vuejs github, vuejs computed, vuejs watch, vuejs router, vuejs props, vuejs computed, vue.js

index.html

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

<!--Web App -->
<div id="liveApp">
  <p ref="a" @click="btnClick">{{ message }}</p>
  <test>
    <button @click="btnClick">Test</button>
  </test>
  <comp ref="b" v-show="show"></comp>
  <div>
    <a ref="c">Live24u - Hello</a>
  </div>
  <div ref="d">
    <a>free - 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 file

console.clear()
console.log('Yes! We Were using simple Vue version for vuejs', Vue.version)

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

Example

Also Read :  Dynamically Upload Multiple Images Using PHP and jQuery

I hope you have Got What is vuejs tutorial And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Recommended For You.

Angular 6 Smart Table with Sorting Searching and Pagination
Today, We want to share with you Angular 6 Smart Table with Sorting Searching and Pagination.In this post we will