01-Vue的雏形

1、Vue的声明与渲染

        ------Vue的安装

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        ------Vue的构建

// 第一步构建出vue实例  相当于view Model即视图模型（定义的变量，后端请求的数据）
	var vm = new Vue({
		// 声明空间,
		el: "#app",
		// 第二步，定义变量，用来存放所有用到的变量
		data: {
			// 定义了一个变量为num
			num: "12345",
            arr:[1,2,3,4,5],
            obj:{
                name:"小明",
                age:"8",
                sex:"man",
			},
		}

		// ajax请求过来的数据:就是Model
	})

        ------View视图层的格式

<!-- view 视图层,也就是咱们看到的页面 -->
	<div id="app">
		<!-- 花括号语法:{{}} 插值渲染 -->
		<!-- {{是data中定义的变量}} -->
		<!-- 第三步渲染数据 -->
		<p>{{num}}</p>
		<!-- 花括号可以写js逻辑代码 -->
		<p>{{1+1}}</p>
		<p>
			{{1+2==2?"等于2":"不等于2"}}
		</p>
		<p>
			{{arr[2]}}---姓名：{{obj.name}}--年龄：{{obj.age}}--性别：{{obj.sex}}
		</p>

		<!-- 如果没有在data定义会报错，defined -->
		<!-- <p>{{str}}</p> -->
	</div>
	<!-- 插值渲染必须在声明空间的div中，否则原样输出 -->
	<p>{{obj.name}}</p>

        ------运行结果:

2、Vue实例

        ------可以在script标签中构建多个Vue实例

// 构建出一个vue实例，view model
	var app = new Vue({
		// 声明空间,不能用类名，要用id唯一的。因为用类名是可以重复的，但是vue中不允许重复
		el: "#app",
		// 用来存放所有用到的数据变量
		data: {
			name1: "hello 我是小明"
		}
	})
	// 构建出一个vue实例，view model
	var app1 = new Vue({
		// 声明空间
		el: "#app1",
		// 用来存放所有用到的数据变量
		data: {
			name2: "hello 我是小红"
		}
	})
	// 构建出一个vue实例，view model
	var app2 = new Vue({
		// 声明空间
		el: "#app2",
		// 用来存放所有用到的数据变量
		data: {
			name3: "hello 我是小亮"
		}
	})

         ------View视图层的格式

<!-- view -->
	<div id="app">
		{{name1}}
	</div>
	<!-- view -->
	<div id="app1">
		{{name2}}
		<!-- 因为name1是app实例里面的变量，不是app1里面的变量，所以在app1这个实例中找不到这个变量，报错is not defined -->
		{{name1}}
		<!-- vue实例不能嵌套,否则报错 -->
		<!-- <div id="app2">
			{{name3}}
		</div> -->
	</div>

3、小结

	/*
			1、创建vue实例  (view model)
			2、在data中定义变量，多个变量用逗号隔开，然后请求数据将请求过来的数据重新赋值给data中的变量。 (model)
			3、利用{{}}将数据变量渲染到页面上。（view）

			注意：如果没有在data中定义变量，用插值渲染会报defined,告诉你没有定义
			插值渲染必须在声明空间的div中，否则原样输出
			定义变量起的名字驼峰式命名。

            声明空间，不能用类名，要用id唯一的。因为用类名是可以重复的，但是vue中不允许重复
		    vue实例不能嵌套，app实例里面的变量不能去app1里面渲染数据，每个实例都是独立的个体
	*/