前端学习笔记之vue入门

1.特点

①js框架，拥有一定的规则
②简化dom操作：用户使用vue语法，vue会自动操作语法修饰的元素，改变页面。（vue之前的操作方式：用户获取元素→用户操作元素→页面改变）
③响应式的数据驱动：页面由数据生成，数据改变，页面同步改变。

2.基础零件

el：设置挂载点

①通过css选择器来设置挂载的元素；
②挂载设置完毕后，挂载的元素的文本内容区，存在的插值表达式内部			
的元素，会被data中具有相同属性名的元素替代；
③vue实例的作用范围限el挂载元素内部及其后代元素内部插值表达式中的数据
④el使用的选择器种类：id选择器（推荐）,class（类）选择器，标签选择器（存在多个时，只有第一个生效）
⑤el能够挂载的dom元素的范围：双标签元素（除html和div以外）

{{ }}：插值表达式

用于将数据和页面结构关联起来

data：定义vue实例数据

①可以存放复杂类型的数据（对象，函数，数组）
②渲染复杂类型的数据的时候遵守js语法
	获取data中对象中的属性值：{{对象名.属性名}} ---→ {{obj.key}}
	获取data中数组中的元素：{{数组名[索引/下标]}} ---→ {{array[index]}}

methods：定义vue实例的方法。

3.基础指令

(1)内容绑定，事件绑定

	v-text：把数据设置给标签的文本值	
			//格式：v-text=“key”(data中替换数据的属性名)，替换全部文本，在标签内设置该属性。
			//格式：{{key}}；替换部分文本（标签里的原文本不被覆盖），在标签的文本内容区设置该格式。
			
	v-html：设置标签的innerHTML
			//设置的内容为纯文本时，“v—on”和“v—html”的效果时一样的，设置的内容包含html标签时，只有v—html能解析，v—on解析效果还是纯文本
			//例子：
	      ①<p  v-html="context"></p>
		  ②<p  v-text="context"></p>
		     data{
		        content:"<a href='一个网址'>点击</a>"
		      }
			①的结果：点击（一个可以跳转的链接）
			②的结果：<a href='一个网址'>点击</a>（纯文本）

	v-on：为元素绑定事件
			//语法格式：   v—on：事件名：“方法”
			//简写形式：@事件名 =‘方法’
			//“方法”就是vue实例中methods中的“函数名”
			//一些事件名举例：单击：click；鼠标移入：monseenter；双击：dbclick
			//更改页面设置（修改数据即可，不需要获取dom元素，然后修改dom元素）：使用this关键字获取data中的数据，然后修改数据
			//传递自定义参数：在方法后加添加括号，里面放入参数即可
			//事件修饰符（事件名的后面加上“.修饰符”可以堆事件进行限制）；例子：.enter可以限制触发的按钮为回车

(2)显示切换，属性绑定

v-if：根据表达式的真假，切换元素的显示状态
			//原理：修改元素的display属性
			//如果直接给v-show设置属性值“true”就会导致数据被写死，无法实现响应式的数据驱动。
			//v-show后面的内容，都会解析成布尔值，然后判断
			//值为“true”,元素显示；值为“false”，元素隐藏；数据改变时，对应的元素的显示状态也会同步更新

v-show：根据表达式的真假，切换元素的显示状态
			//原理：修改dom元素
			//如果直接给v-if设置属性值“true”就会导致数据被写死，无法实现响应式的数据驱动。
			//v-if后面的内容，都会解析成布尔值，然后判断
			//值为“true”,元素（标签）添加进dom树中
			//值为“false”，元素（标签）从dom树中移除

//频繁的切换使用v-show,反之使用v-if，因为前者消耗小

v-bind：为元素绑定数据
			//格式：v-bind:属性名=表达式（data中的key）
			//简写形式，去掉v-bind只保留“冒号和属性名”
			//需要动态的删除class，建议使用对象的方式（v-bind:{键值对 }）
			//常见属性：图片地址src；设置鼠标悬停时的文本：title；类：class

(3)列表循环，表单元素绑定

v-for：根据数据生成响应式的列表结构
			//语法：v-for：（item.index）in array（数组名）；item泛指数组内的数据；获取对应数据：{{ item.key }}
			//item和index可以结合其他指令一起使用
			//数组长度的更新会同步到页面上，是响应式的

v-model：便捷的设置和获取表单元素的值
			//格式：v-model：“绑定数据”
			//双向绑定：绑定的数据会和表单元素的值相关联
			//“绑定的数据”和“表单元素的值”是双向绑定的，一方改变另一方也跟着变