Vue.js 【基础】笔记

1.声明式渲染

首先官网先用一个最简单的例子介绍了vue.js的核心，就是用模版语法来将数据渲染到dom的系统，

<div id="app">
	{{message}}
</div>
..
var app = new Vue({
	el:"#app", //el用来绑定上面的div
	data:{
		message:'Hello Vue'  //填充的数据是message
	}
})

在 < script > 里新建了一个vue对象，然后用 el 绑定了 上面的 div块。这个div块就是页面的一个dom元素， el的操作可以理解为：此Vue已经挂载到了这个dom元素上，并且可以对其进行完全的控制，当你修改vue里的message时，div里的message会相应的更新
上述是直接显示message 称作文本插值，官网随后又介绍了绑定元素属性就是将message放到元素属性里（v-开头的后面）

<div id="app-2">
	<span v-bind:title="message">
		鼠标悬停几秒钟看动态信息
	</span>
</div>
..
var app2 = new Vue({
	el:"#app-2",
	data:{   
		message:'页面加载于'+new Date().toLocaleString()
	{
})

v-bind attribute被称为指令。带有v- 的都是vue提供的attribute，他们会在dom上应用特殊的响应式行为（上述例子）。该指令的意思是：“将这个元素节点的title和vue实例的messageproperty保持一致”

条件与渲染

<div id = "app-3">
	<p v-if="seen">now you see me</p>
</div>
..
var app3 = new Vue({
	el:"#app-3",
	data:{
		seen:true
	}
})

前面的两个例子分别演示将数据绑定在dom文本和attribute，此例子将数据绑定在dom结构上，
还可以使用v-for来渲染列表

<div id = "app-4">
	<ol>
		<li v-for="todo in todos">
			{{ todo.text }}
		</li>
	</ol>
</div>
..
var app4 = new Vue({
	el:"#app-4",
	data:{
		todos:[
			{text:'学习 javascript'},
			{text:'学习 vue '},
			{text:'整个牛项目' }
		]
	}
})