Vue - el 挂载点和 data 数据对象

认识 Vue

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1. JavaScript框架
2. 简化Dom操作
3. 响应式数据驱动

v2.x文档
v3.x文档

引入 Vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
或者
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

一个简单的Vue程序

// html
<div id="app">
  {{ message }}
</div>

// javascript
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

el 挂载点

1. el 是用来设置 Vue 实例挂载（管理）的元素
2. Vue 会管理 el 选项命中的元素及其内部的后代元素
3. 可以使用其他的选择器,但是建议使用ID选择器
4. 可以使用其他的双标签,但不能使用HTML和BODY
   

data 数据对象

1. Vue 中用到的数据定义在 data 中
2. data 中可以写复杂类型的数据
3. 渲染复杂类型数据时,遵守 js 的语法即可

<div id="app">
	{{ message }}
	<h2> {{ user.name }} {{ user.age }}</h2>
	<ul>
		<li>{{ sk[0] }}</li>
		<li>{{ sk[3] }}</li>
	</ul>
</div>

var app = new Vue({
	el: "#app",
	data: {
		message: "你好 Vue!",
		user: {
			name: "小多",
			age: 18
		},
		sk: ["Java", "Vue", "html", "ajax"]
	}
})