Templates of vue

Templates of vue

// UI
<div v-for="beer in beers">
	<div>
		<h5>{{ beer.name }}</h5>
		<small style="color:gray">
			abv: {{ beer.abv }}
		</small>
	</div>
</div>

// Data and Business Logic
beers: [
	{ name:'Ahool Ale', abv:5.4 },
	{ name:'Sigbin Stout', abv:8.1 }
]

----------------------------------------------

Tmplate

// Data
data: {
	name: '',
	picture: 'http://site.com/...jpg',
	stats: {
		pct: .521,
		ppg: 22.3,
		rpg: 7.4
	}
}

// HTML
<div class="card">
	<img :src="picture">
	<h4>{{ name }}</h4>
	<ul>
		<li>fg %: {{ stats.pct }}</li>
		<li>ppg: {{ stats.ppg }}</li>
		<li>rpg: {{ stats.rpg }}</li>
	</ul>
</div>

https://upload.wikimedia.org/wikipedia/commons/d/d3/LeBron_James_(15847318851).jpg

Templates：

• Minimize the amount of code you write
  
• Protect you from changes
  
  

-----------------------------------------------------

Declarative Bindings:

• Simplify development
• Remove the burden of managing the DOM
• Updates happen automatically
  
  

Vue provides an answer to the issue of JavaScript fatigue, and it is a worthy successor to the legacy of jQuery

------------------------------------

Virtual DOM

• Lightweight copy of the actual DOM
• Efficiently determines what needs to be updated
• Batches updates

Installing and Setting up Vue
http://blog.csdn.net/u012596785/article/details/79463568