vue基础（1）：vue的使用步骤及常用指令

一.Vue的使用步骤

1.引包
	①在html文件中引入script标签，指定文件
		<script type="javascript/text" src="../js/vue.js"></script>
	②留坑，留一个vue模板插入的地方，或者是vue代码生效的地方
		<div id="app">(坑位)</div>
	③实例化vue 启动vue
		<script type="javascript/text">
			new Vue({
				el:"#app",
				template:`
					//需要向坑位中添加的标签及其内容
					....
				`,
				data:function(){
					return{
						.....
						//定义在标签中使用的变量
					}
				}
			})
		</script>
		
		el:目的地信息，对应留坑的坑位，可以通过id名、类名、标签名来查找
		template：存放在坑位中需要添加的内容 
		数据：data 值为函数的形式也可以是对象，但是都是用函数，因为函数最后也是return一个对象
		注意：a.template内的内容是tab键上的波浪线键，可以自动识别换行等操作
			  b.data内return的值的语法应为 属性:值，例如：
							  return{ 
								num:1
							  }
			  c.Vue的每个属性之间使用','(逗号)隔开

2.插值表达式
	插值表达式内填入data里面的变量即可在页面获取到变量的值  例如{{data里的任意变量}}浏览器会自动将双大括号内的值进行解析

二.Vue中常用的指令

1.指令的概念与语法
	在vue中提供一些对页面和数据的更为方便的操作，这些操作就叫做指令。在Vue中，指令的语法格式为：
	<div v-xxx=''></div>

2.常用的指令
	
	①v-text:向标签内插入文本信息 不解析标签信息
	②v-html：向标签内插入并解析文本信息
	用法举例：
		new Vue({	
			....,
			template:`
				<div>
					<div v-text='mytext'></div>
					<div v-html='myhtml'></div>
				</div>
			`,
			data:function(){
				return{
					mytext:'<h1>检测标签是否被识别</h1>',
					myhtml:'<h1>检测标签是否被识别</h1>'
				}
			}
		})
	在上述用法中，带有mytext的div中,浏览器认为<h1></h1>标签是字符串'<h1></h1>'；而在带有myhtml的div中，
	浏览器会解析其中的标签<h1></h1>
	
	③v-if：v-if 后接的表达式应为条件表达式，并且使用单引号引起来。
	例如：<div v-if='num==1'>测试v-if</div>
	Vue会在data中找到v-if所需要的条件,并根据条件表达式的返回值判断，如果为false，则
不显示标签内的内容。
		也可以在v-if内存放变量：
		<div v-if='checkvif'></div>
	
	在data内对checkvif进行条件判断。如果表达式为真，则标签内的内容显示；如果表达式的内容不为真，则不显示标签内容。
	
	④v-else-if、v-else 一般都与v-if联立使用。注意：v-else后不需要接具体的表达式。
	
	⑥v-show ：作用和v-if很相似，都是可以通过条件判断表达式来控制标签内部，两者的区别是控制不同的css属性对标签内部的内容进行
隐藏。两者的区别请自行百度。
	
	⑦v-for:	这个标签的作用是对data中定义的数组、对象进行循环遍历。具体示例如下：
	new Vue({	
			....,
			template:`
				<div>
					<div v-for='(item,index) in forArray'>
						数组的元素是：{{item}},当前序号是：{{index}}
					</div>
					<div v-for='(value,key) in forObject'>
						对象的key是：{{key}},value是：{{value}}
					</div>
				</div>
			`,
			data:function(){
				return{
					forArray:[1,2,3,4,5],
					forObject:{'name':'123','age':13}
				}
			}
		})
	对象采用的是Json格式进行书写。数组和对象的循环语法为： v-for='(记录当前值的记录器,下标/key) in 数组名/对象名'。