VueJS - Componentes

Neste exemplo eu testo a criação de componentes e a utilização de multiplas instancias de um mesmo componente. Obs: Testo também a edição de atributos do componente via JQuery.

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div id="app" class="container mt-5 mb-5">
	<blog-corpo v-bind="{myApp, appPostTitle}"></blog-corpo>
</div>

<script>

/*
**************************************
Setando Atributo Via JQuery
**************************************
$('#ee').attr("post-title", "Título Estático 1 Via Jquery");
$('#ff').attr("title", "Título Estático 2 Via Jquery");
$('blog-post').attr("post-title", "Título para Todos os blog-post");
$('blog-info').attr("title", "Título para Todos os blog-info");
*/

</script>

Vue

Vue.component('blog-post', {
  props: ['postTitle'],
  template: 
		`<h5>
	 	 <b> {{ postTitle }} </b>
	 	 </h5>`
})

Vue.component('blog-info', {
  props: {
    title: {
    	type: String, 
      required: true, 
      default: "Título Dinâmico Default"
    },
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object
  },
  template: 
	  `<h5>
	   <b> {{ title }} </b>
		 </h5>`
})

Vue.component('blog-corpo',{
	template: 
		`<div><h6>Título 1</h6>
     <blog-post id="aa" post-title="Título Estático"></blog-post>
     <h6>Título 2</h6>
     <blog-post id="bb" v-bind:post-title="appPostTitle"></blog-post>
     <h6>Título 3</h6>
     <blog-info id="cc" title="Titulo"></blog-info>
     <h6>Título 4</h6>
     <blog-info id="dd" v-bind:title="myApp.title"></blog-info>
     <h6>Título 5</h6>
     <blog-post id="ee" v-bind:post-title="appPostTitle"></blog-post>
     <h6>Título 6</h6>
     <blog-info id="ff" v-bind:title="myApp.title"></blog-info>
		 <br/>
		 <label>Digite aqui e Observe os Títulos 4 e 6</label>
		 <input type="text" class="form-control" v-model="myApp.title"></div>`,
     props: ['myApp', 'appPostTitle']
})

var app = new Vue({
  el:"#app",
  data:{
    appPostTitle: "Título Dinâmico via Data",
    myApp:{ "title":"Título Dinâmico via Object" }
  }
})