Vue.Js简介与数据渲染

Vue.Js是什么

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

Vue.js的安装

直接使用script标签进行导入即可，

第一种：开发环境版本，包含了有帮助的命令行警告

第二种：生产环境版本，优化了尺寸和速度

第三种：下载Vue.js文件，使用script标签导入 ：https://cn.vuejs.org/js/vue.js

声明式渲染

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

在HTML当中进行对数据的渲染

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

在js当中声明Vue对象进行对数据的绑定，el表示对那个元素进行挂载，这里不单单只是可以对id进行挂载，对class 标签名都可以进行挂载。而data当中表示对元素进行数据绑定

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

运行查看效果

关于el挂载点存在的问题：

Vue实例的作用范围是什么呢?

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器?

可以使用其他的选择器;但是建议使用ID选择器

是否可以设置其他的dom元素呢?

可以使用其他的双标签,不能使用HTML和BODY

data数据对象

在前面保存了简单的String型，外加复杂的数据，如数组、对象等

data: {
				massage: "Hello Vue!",
				school: {
					name: "长沙民政学院",
					add: "长沙市雨花区香樟路22号"
				},
				campus:["软件系","民社系","外语系"]
			}
           

对于对象使用

.

获取对象的值，而对于数组使用索引进行获取即可

<div id="app">
			{{ massage }}
			<h3>
				{{ school.name }}
				{{ school.add }}
			</h3>
			<h3>
				{{campus[0]}}
			</h3>
		</div>
           

在浏览器当中进行查看