自我学习汇总：VUE篇（入门篇）

什么是VUE？

1.vue是一款‘渐进式’的JavaScript框架。
2.渐进式：
	1）.渐进式指开发人员并不需要了解vue框架中的全部即可开始开发，通过逐层渐进的方式去掌握与了解即可。
	2）.可以通过很少、或不操作DOM元素完成数据和视图的绑定。
3.注意事项：在使用vue的过程中，尽量不引入JavaScript标签，减少对dom元素的操作，仅通过vue实现数据和视图的双向绑定。

VUE的使用：

1.进入vue官网，项目中引入官网中提供的标签。或通过访问标签中的网址，将vue.js保存到本地，引入到项目中。
2.创建vue实例：
	1）.在<script>标签中：
		（1）.const 实例名 = new Vue({
					el:"",//用来给vue实例定义作用范围（通过选择器，例如#id（支持所有jquery选择器，但推荐使用具有唯一性的id选择器））
					data:{},//定义vue实例的数据（通过使用"{{}}"表达式渲染到vue绑定的标签元素中）
				 });
		（2）.通过以上方式即可创建实例。
	2）.注意事项：
		（1）.<script>标签需要放在被渲染的标签元素之后才能正常执行。
		（2）.只要标签在被渲染的标签中，都可以被同一个vue实例渲染。

例：

VUE的data属性中的数据类型：

1.data属性可以支持：数组、对象等复杂的数据类型

例：

{{}}（插值表达式）表达式的使用：

1.在{{}}表达式中可以进行字符串的拼接：{{ msg+'!' }} 即可在输出时拼接上！
2.在{{}}表达式中也可以调用方法：{{ msg.toString() }} 即可调用相关方法
3.在{{}}表达式中可以书写表达式、运算符以及逻辑运算等操作

v-text和v-html的使用：

1.v-text：
	1）.取值，并将取出来的值以文本的形式渲染到标签元素中
	2）.例：<span v-text="msg"></span>
	3）.注意事项：
		a.使用v-text时会将标签中原有数据覆盖。
		b.使用v-text可以避免网络较差的环境中出现插值闪烁（由于未加载到数据，导致插{{}}插值表达式直接显示在页面）
2.v-html：
	1）.取值，并将取出来的值以html的形式渲染到标签元素中
	2）.例：<span v-html="msg"></span>

VUE中的事件绑定（v-on）：

1.在标签中添加“v-on:事件类型="function名称"”
2.在vue实例中添加methods属性
3.在methods属性中通过 "事件名:function(){}"的方式添加新的function方法，通过v-on指定的名称进行事件的绑定
4.v-on事件绑定的简化写法：v-on可以替换成@；如：v-on:click 可以替换为@click，使用起来更加简便

例：

在function方法中如何获取data中的数据：

1.使用this关键字可以获取到当前的vue实例对象
2.使用"this."的方式即可调用vue实例对象中的各个属性

VUE事件中的参数传递：

1.通过将值赋值给绑定的事件的参数，使事件函数中可以获取到该值

例：

v-show、v-if、v-bind的使用：

1.v-show 设置标签内元素是否显示：
	1）.<li v-show="true">测试文本</li> 即可隐藏li元素
	2）.v-show 也可以直接取到data中的值，并可以通过事件进行相应控制

例：

2.v-if 判断选择：
	1）.<li v-if="type === '1' ">显示文本01</li> 通过v-if中的表达式，判断是否进入某一分支，和if else 原理一致

例：

3.v-bind 绑定：
	1）. v-bind 可以绑定标签的属性，如：href、src、class等
	2）.使用方式：
		  <a v-bind:href="url">click me</a>
			var app = new Vue({
		    el:'.app',
		    data:{
		        url:"https://www.baidu.com",
		    }
		});
	3）.v-bind 简化写法： :属性名
		如： <a :href = "url" />

v-for和v-model的使用：

1.v-for 遍历数组或对象中的每个元素：
	1）.使用方式：在标签中使用：v-for=" item in list"
		（1）.如（遍历对象）：
				<span v-for = "user in users">
					{{ u.name }}		
				 </span>
					<script>
						const testvue = new Vue({
							el:"#id",
							data:{
								user{name:"a"}
							}
						});
					</script>
		（2）.如（遍历数组）：
						<li v-for="a in arr">
							{{ a }}
						</li>
							<script>
								const testvue = new Vue({
									el:"#id",
									data:{
										arr :['0','1','2','3','4','5']
									}
								});
							</script>
	2）.注意事项：
		1）.在开发中使用v-for遍历时为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
		2.如：
			<div v-for="item in items" v-bind:key="item.id"> //key必须指定为对象的唯一标识
				 <!-- 内容 -->
			</div>

2.v-model的使用：

	1）.v-model 作用：用来绑定元素标签的值与Vue实例对象中的值保持一致，从而实现数据的双向绑定
	2）.被v-model指定的data中的变量的值随标签的值的变化而变化

例：