vue指令

vue指令：指带有 v-前缀 的特殊标签属性

v-html

1、作用：设置元素的innerHTML，解析字符串标签

2、语法：v-html

我们来举个例子：

例如这里，此时<div>{{msg}}</div>不能把百度实现跳转网页的效果，

它会直接把<a herf="http://www.baidu.com">百度 </a>给显示出来，达不到我们想要的效果

而如果我们把<div>{{msg}}</div>改成 <div v-html="msg"></div>，那么就能实现我们想要的效果了

此时点击百度即可跳转到百度页面

v-show和v-if

v-show

1、作用：控制元素显示隐藏
2、语法： v - show ="表达式"     表达式值 true 显示， false 隐藏
3、原理：切换 display : none 控制显示隐藏
4、场景：频繁切换显示隐藏的场景

v-if

1、作用：控制元素显示隐藏（条件渲染）
2、语法： v - if ="表达式"         表达式值 true 显示， false 隐藏
3、原理：基于条件否创建或移除元素节点
4、场景：要么显示，要么隐藏，不频繁切换的场景

相同点：

都能使元素隐藏起来

不同点：

1、原理

v-show的原理是切换 display : none 控制显示隐藏，而v-if的原理是基于条件否创建或移除元素节点。

举一个例子：

首先我们创建两个盒子，分别用v-show和v-if来控制它们

此时我们可以在浏览器中检查到这两个盒子

然后我们把true改成false，把盒子隐藏起来

此时我们再到浏览器中检查，能看到只有v-show中的盒子存在，而v-if的盒子被删除了

这就是两种指令的区别

2、使用场景

由上面的案例演示，我们可以知道二者的区别，那么就肯定有更适合其中一个指令的一些项目。

v-show适用于频繁切换显示隐藏的场景，我们可以用在tap栏的内容显示上；

v-if更适用于要么显示，要么隐藏，不频繁切换的场景，我们可以使用在提示用户登录上

v-else和v-else-if 

1、作用：辅助 v - if 进行判断渲染
2、语法： v - else、 v - else - if ="表达式" 

3．注意：需要 v - if 一起使用

其实v-else和v-else-if 和js中的if-else的使用方法相类似

案例：

可以通过控制gender的值来控制性别的显示

gender等于1的时候会显示：                    gender等于2的时候会显示：

                                                                   

下面是v-else-if的案例，和v-else同理。

通过控制score的值可以控制输出的成绩评定等级

v-on

1、作用：注册事件＝添加监听＋提供处理逻辑

2、语法：
① v - on ：事件名＝"内联语句"
② v - on ：事件名＝" methods 中的函数名"

③ v - on :   事件名="fn(参数1，参数2)"

3、 v - on ：可以简写为@

①案例：v - on ：事件名＝"内联语句"

这里创建了一个加减数字的按钮

可以得到这样的按钮，可以对数字进行加一或者减一。

         

当然事件的类型也不一定是click，也可以换成其他事件类型

② 案例：v - on ：事件名＝" methods 中的函数名"

我们制作一个按钮，通过点击按钮可以实现将*显示或者隐藏

效果：

                      

③案例：v - on :   事件名="fn(参数1，参数2)"

这里我们做一个售货机，当点击对应按钮时，我们的余额减少相应的金额

v-bind

1、作用：动态的设置 html 的标签属性→ src url title ...
2、语法： v - bind ：属性名＝"表达式"

3、 v - bind ：属性名＝"表达式"可以简写为 ：属性名＝"表达式"，相当于可以把v - bind去掉

4、v - bind 对于样式控制的增强-操作 class 
      语法： class ="对象／数组"

      ①对象→键就是类名，值是布尔值。如果值为 true ，有这个类，否则没有这个类

      ②数组→数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

v-for

1、作用：基于数组循环，多次渲染整个元素。例如：数组、对象、数字......

2.遍历数组语法： v - for ="( item , index ) in 数组"
   item 每一项， index 下标

   此处 index可以省略

3、v-for中的key：

①作用：给列表项添加的唯一标识。便于 Vue 进行列表项的正确排序复用。

②语法： v - for ="( item , index ) in 数组"  :key="item.id"

案例：

动态渲染水果店

v-model

1．作用：给表单元素使用，双向数据绑定→可以快速获取或设置表单元素内容
①数据变化→视图自动更新
②视图变化→数据自动更新

2.语法： v - model ='变量'

案例：

这里做一个登录的页面

这样做的好处就是无论我们在页面中输入内容，还是在后台中修改内容，另一边都是实时更新的。

例如这里我在表单中输入数据

则此时可以在检查中查看到表单中的数据

这样做可以很方便我们以后在后台读取和修改表单中的内容。