vue指令

vue的基础用法和基础指令

在官网中可以看到vue在基本的使用中需要具备的一些文件
首先我们先要定义一个区域，在这个区域中展示自己的vue内容，定义一个div就是 

定义好这个容器下面在开始写js代码的时候引入一下vue文件，vue也就是一个对象一个实例对象（就是一个被new调用的一个对象在这个实例对象中有一些配置，我先简单写一些基础的指令和用法）

在引入这个文件之后就开始实例这个对象
创建这个vue的实例

创建好之后就开始配置这个实例
首先确定要挂载的地方（也就是你的这个vue实例对象要作用的地方）
使用el这个属性进行选择这个选择器按照js标准来的下面选中我们定义好的app div

vue是通过数据驱动dom所以我们少不了数据，在这里data这个配置项建议写成函数的形式因为方便后期的数据使用不会造成印象
里面的数据定义我们可以是任何类型的数据包括复杂；这里面的数据在上面就可以直接使用了这个时候我们就用到了模板语法

模板语法

在vue中插值表达式是vue框架提供的一种html模板绑定数据的方式，也是页面动态渲染的数据的一种方式这种方式可以把数据直接展示在页面中   {{数据的名字}}

###也可以写一下运算和调用
1.js表达式
{{数据名a+数据名b}}（运算和js的一样）；
2.使用函数
{{数据名字.函数名字(参数)}}；
3.三目运算
{{数据判断条件 ? 如果成立展示的：不成立展示的}}

指令

（在vue中指令是很重要的也是一些基础）

v-text和v-html

先从这两个基础的说起把
		v-text就是想当与原生js中的innerTEXT
		v-text == innerText 简写的方式是{{}}
		v-html == innerHtml 简写的方式{{{}}}（这个简写已经被弃用了）
		这两个实现的效果是一样的，
		![在这里插入图片描述](https://img-blog.csdnimg.cn/20210322221937839.png
		v-html 相当于原生js的innerHTML

v-show 和v-if

(这两个都是可以控制元素的显示和瘾藏的但是他们有这本质的不同)
-- v-show控制元素的display属性 v-show="这里面写的是布尔值";
-- v-if是通过控制标签是否存在dom中来控制标签是否显示的 v - if = "这里也是布尔"
		布尔值的地方也可以做一些简单的运算（三目运算也可以写）	
		要注意两个控制元素的区别

• v-if和v-show的差别

• v-show通过控制标签的display属性来控制标签是否显示的，当为false的时候为none，true的时候就是他本身
• v-if是通过控制标签是否存在dom中来控制标签是否显示的
• v-show 有更高的初始化开销，就是不利于初始化的优化
• v-if 有更高的切换开销。就是不利于切换

v-bind

	（这是一个属性的绑定通过这个指令个标签绑定一些属性属性可以需要的数据中的内容，
	这样我们就可以很方便的修改属性里面的内容）
			v- bind : 属性；一搬简写为：属性

在这里我们可以绑定一些复杂的class类名

• 第一种自己操作class字符串
  
• 绑定一个数组 (这样数组中的所有都会被绑定)
  
• 绑定一个对象，对象val为true的时候可以绑定上去绑定的是key
  
  

  v-on

   (v-on这个指令是用来绑定事件的) 
   	v-on :事件类型="事件名字"
   	或简写为： @事件类型 = "事件名字"
  

当然说到事件就带说vue的另一个配置了，methods：{}在这个vue配置对象中写的是一些函数处理事件

说一下这个参数的传递 在这个参数中如果想要获取事件对象那么就要在调用的时候最后一个参数传入以个固定的$event（注意这个一定要放在最后面)；这是传入参数并且需要获取事件对象的时候，

如果不传参数需要事件对象那么在调用的时候随便把传入一个参数那么在里面调用的就是这个事件对象

提到事件就要提到一个修饰符修饰符的使用一般都是可以直接在调用的时候直接点调用的
@事件类型.修饰符=“事件名”

v-on的指令修饰符

• 键盘按键修饰符：可以使用按键名字，也可以使用键盘码keycode（上面的图片就用到了这个修饰符，具体对应的可自行百度也可以打印出事件对象事件对象中都是有这些的）

• .stop 阻止事件冒泡

• .capture 事件进行捕获

• .prevent 阻止默认事件

• . once 事件只会执行一次

• self 事件只会作用给标签本身

• .passive 这个修饰符直接告诉浏览器这个代码没有阻止默认事件的不用等待了直接执行吧

v-for

（这个指令是一个循环指令在这个指令中方便我们直接使用数组数据进行渲染页面）

如果一个值的话就是取这个对应的值两个的话第二个表示对应的下标（值，下标）

在使用这个v-for的时候一般后面都要加一个key值这个是一个唯一标识，不设置的话他默认的就是下标，但是这个下标一般都是可变的所以要绑定一个固定的一般使用唯一的id

遍历后就直接可以使用插值表达式进行渲染，注意这个在那个标签上面使用这个v-for那么这个这个标签就会被直接循环遍历出来，

v-model

	表单元素的双向绑定，在标签上加上这个元素那么就就可以在一些from表单中对data中绑定的数据进行渲染和改变
	同时要注意这个属性会忽略表单元素 value、checked、selected   所有要在一开始的vue实例中就对这个元素进行声明

v-model其实就是这种语法的语法糖

<input v-bind:value='message' v-on:input='message = $event.target.value' />

	<input type='text' v-model='message'>

data: {
	message: 'message默认值'
}

这种语法的绑定也可绑定很多的单选框多选框，通过绑定同一个数据实时进行改变可以对类名以及一些元素的样式进行动态的添加和删除，vue中最大的特点就是这个数据的双向绑定 ，在这里要注意同input的选择框中选中和未选中的状态通过布尔值确定，当然双向绑定也可以设置一些点击显示和隐藏这时候就要注意使用数据，

• 在插值表达{{}}中的数据直接写数据的名字就可以了，
• 在metudos事件中注意调用数据的时候要通过this.数据名进行调用，（当然调用vue中的一些方法也是这样进行调用的）注意this！！！