Vue 入门示例

[ 插值 ] Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<!-- 1. 导入 Vue 的包 -->
	<script src="lib/vue.js"></script>
</head>
<body>
	<!-- 将来 new 的 Vue 实例，会控制这个元素中的所有内容 -->
	<div id="app">{{ message }}</div>
	<script type="text/javascript">
		// 2. 创建一个 Vue 实例
		// 当我们导入包之后,在浏览器当内存中,就多了一个 Vue 构造函数
		var vm = new Vue({
			el:'#app',  // 表示,当前new的Vue实例,要控制页面上的哪个区域
			data:{ // data属性中,存放的是el中要用到的数据
				message:'hello，Vue !' // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面中,程序员不再手动操作dom元素了
			}
		})
	</script>
</body>
</html>

这看起来跟单单渲染了一个字符串模板非常类似，但是 Vue 在背后做了大量工作。

Now，数据和 DOM 已经绑定在一起（被建立了关联），所有东西都是响应式的。

要怎么确认呢？打开你的浏览器（当前页面）的控制台，并修改 app.message 的值，你将看到上例相应地更新。

[ 指令 ] 除了文本插值，我们还可以像这样来绑定 DOM 元素特性：

    <div id="app">
		<p v-bind:title="message">
			鼠标悬停几秒钟查看此处动态绑定的提示信息
		</p>
	</div>
	<script type="text/javascript">
		var app2 = new Vue({
			el:'#app',
			data:{
				message:'页面加载于' + new Date().toLocaleString()
			}
		});
	</script>

v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性。

它们会在渲染过的 DOM 上应用特殊的响应式行为。

在这里，该指令表示：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。如果你再次打开浏览器的控制台，输入 app2.meaage = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

[ 条件与循环 ] 我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。

    // 控制切换一个元素是否显示
	<div id="app">
		<p v-if="seen">
			现在你看到我了
		</p>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				seen:true
			}
		});
	</script>
// 继续在控制台输入 app.seen = 'false'，你会发现之前显示的消息消失了。

此外，Vue 也提供一个强大的过渡效果系统？！，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：

        <div id="app">
		<ol>
			<li v-for="todo in todos">
				{{ todo.text }}
			</li>
		</ol>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				todos:[
				{ text:'学习js' },
				{ text:'学习Vue' },
				{ text:'整个牛项目' }
				]
			}
		});
	</script>
// 在控制台输入app.todos.push({text:'新项目'})，可以在列表最后添加一个新项目

[ 处理用户输入 ] 为了让用户和应用进行交互，可以用 v-on 指令添加一个事件监听器，通过它调用在实例中定义的方法：

	<div id="app">
		<p>{{ message }}</p>
		<button v-on:click="reverseMessage">逆转消息</button>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				message:'Hello,Vue!'
			},
			methods:{
				reverseMessage:function(){
					this.message = this.message.split('').reverse().join('')
				}
			}
		});
	</script>

// 在reverseMessage方法中，我们更新了应用的状态，但没有触碰 DOM - 所有的DOM操作都由Vue来处理，你编写的代码只需要关注逻辑层面即可。

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
	<div id="app">
		<input type="text" v-model="msg">
		<p>{{msg}}</p>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				msg:''
			}
		});
	</script>

[ 组件化应用构建 ] 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
// 全局注册，定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

现在可以用它构建另一个组件模板：

<ol>
  
  <todo-item></todo-item>
</ol>

// 说明：要确保在初始化根实例之前注册了组件
但，这样会为每个待办项（ todo-item ）渲染同样的文本，这看起来并不炫酷。

我们应该能从父作用域将数据传到子组件才对。让我们修改一下组件的定义，使之能够接受一个 prop：
Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

// 代码示例 — 现在，我们可以使用 v-bind指令将待办项传到循环输出的每个组件中：
<div id="app-7">
  <ol>
    
    <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})
尽管这只是一个刻意设计的例子，但我们已经设法将应用分割成了两个更小的单元。子单元通过 prop 接口与父单元进行了良好的解耦。我们还可以进一步改进 <todo-item> 组件，提供更为复杂的模板和逻辑，而不会影响父单元。