Vue入门（二）Vue基础

前言

       本章根据前面的讲解对有关的语法做进一步的讲解和扩充，夯实基础

方法

1.el挂载点

所谓挂载点，就是前面例子中vue实例所管理的元素，这类似于css和jq的选择器。

上面的示例中，vue管理id为app的标签元素（el:'#app'）。那么我们能不能像jq一样设置其他的挂载点呢？答案是可以的。

1）vue实例管理其他选择器对应的元素

类选择器：

	
		
		
		
	
	
		

		  {{ message }}
		
		
	

元素选择器：

	
		
		
		
	
	
		

		  {{ message }}
		
		
	

这里呢，我仅仅列举出两个，其他的请大家自主的去试验即可！

2）vue实例的作用范围

我们看到，vue实例通过管理指定的元素，使得{{ }}内部的元素值等同于data属性中对应的值，那么它对应的作用范围是哪些呢？

我相信很多人都已经大致的猜到了，但是还差了一些。

运行以下实例：

	
		
		
		
	
	
		{{ message }}
		

		  {{ message }}
		  {{ message }}
		
		
	

观察运行效果：

由此可见，在vue实例管理的元素外部是无法进行渲染的，而在管理元素内部及其子孙元素内部，是可以进行渲染的！

3）特殊元素能否使用vue实例进行管理

我们知道，一个html文件不只是只有div、span，还包括html和body这样的元素，那么它们可以使用vue实例来进行管理吗？让我们通过一个实例进行演示：

	
		
		
		
	
	
		{{ message }}
		

		  {{ message }}
		  {{ message }}
		
		
	

运行结果如下：

通过观察浏览器所报的错误，我们可以发现如下的信息：

很明显，我们不能使用vue实例来管理html和body这样的元素！！

2.data数据对象

前面说明了有关el属性挂载点的问题，接下来我们聊一下数据是如何渲染上去的。

很明显，通过双大括号的形式显示了data中对象属性的值，如message。那么上面的示例中展示的是普通的字符串，要知道在js的世界中还有很多复杂的数据类型，如对象、数组等

请看下面的例子：

	
		
		
		
	
	
		

		  {{ message }}

		  {{ names[0] }}

		  {{ person.loc }}

		
		
	

运行结果如下：

相信有基础的同学能够明白其中的含义！