【Vue】vue指令-编程知识

【Vue】vue指令

V-html

v-show和v-if

v-show

显示

隐藏

v-if

显示

隐藏

总结

显示隐藏的应用场景

未登录的情况

登录的情况

v- else 和 v-else-if

v-if 和v-else

v-if 和 v-else-if

总结：

v-on

语法一：

语法二：

调用传参

v-bind

v-for

v-model

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

V-html

未使用V-html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--准备容器  -->
<div id="app">
<div>{{msg}}</div></div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>Vue.config.productionTip =false;var  app=new Vue({el:'#app',data:{msg:'<a href="http://www.baidu.com">百度</a>'}});
</script>
</body>
</html>

输出来的是一串字符串

如果使用v-html 标签，效果如下

v-show和v-if

作用：控制元素显示隐藏

v-show

显示

查看控制台

隐藏

隐藏起来了

查看控制台

通过控制台的数据，可以得知v- show是通过切换css 来控制显示隐藏

v-if

再来看看v-if 是一个什么样的情况

显示

隐藏

通过控制台的数据，可以得知v- if是通过根据条件的判断来创建或者移除元素节点来

控制显示隐藏

总结

两者的作用都是控制元素显示隐藏，但是两者使用的原理不同，v-show使用切换css来

控制显示隐藏，v-if 基于条件的判断来创建或者移除元素节点

显示隐藏的应用场景

通过一个例子来体会一下显示隐藏到底是用来干嘛的

京东官网的首页

未登录的情况

如果没有登录或者注册的情况，就会出现 “ 你好，请登录免费注册“

登录的情况

登录进去的时候再来看首页，就没有 “ 你好，请登录免费注册“

根据条件来判断是否登录，如果没有登录就创建这样元素节点（ “ 你好，请登录免费注册“ ），如果登录，就移除节点。

如上就是举了一个例子，具体使用了什么方式不清楚，但原理差不多

v- else 和 v-else-if

作用：辅助v-if 进行判断渲染

v-if 和v-else

v-if 和 v-else-if

总结：

v-else和 v-else-if不能单独使用，需要辅助v-if才能使用

v-on

作用：用来监听dom事件，并执行处理逻辑

语法一：

v-on: 事件名=” 内联语句“

点击+就会执行num++的方法

点击-就会执行num--的方法

语法二：

v-on :事件名= ” 函数方法名“

注意： method后面要加s 函数名后面要带：

点击按钮出现弹出框

@

@可以代替v-on:

调用传参

<div id="app"><div class="box"><h1>水卡充值</h1><button @click="recharge(5)">充值5元</button><button @click="recharge(10)">充值10元</button><button @click="recharge(20)">充值20元</button></div>
<p>银行卡余额:{{money}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>
/*    Vue.config.productionTip =false;*/var  app=new Vue({el:'#app',data:{money:300},methods:{recharge: function (a){this.money-=a}}});
</script>

点击充值5元

v-bind

作用：用于将 Vue 实例的数据绑定到 HTML 元素的属性上。比如 src url title

语法： v-bind :属性名=” 表达式“

<!--准备容器  -->
<div id="app">
<img v-bind:src="imageUrl"  alt="">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>
/*    Vue.config.productionTip =false;*/var  app=new Vue({el:'#app',data:{imageUrl: './images/th.jpg'},});
</script>

v-bind也可以省略不写

<div id="app">
<img :src="imageUrl"  alt="">
</div>

v-for

作用：基于数据循环，多次渲染整个元素

语法： v-for ="(item , index) in 数组

<div id="app"><h2>四大名著</h2><li v-for="(item,index) in list">{{item}}</li>
</div>

<script>
/*    Vue.config.productionTip =false;*/var  app=new Vue({el:'#app',data:{list:['三国演义' ,'水浒传','西游记','红楼梦']}});
</script>

v-model

作用：作用于表单元素，可以让数据和视图，形成双向绑定（绑定之后，可以快速获取

或设置表单元素的内容）

语法： v-model="变量”

<div id="app">账户: <input type="text" v-model="name"><br><br>密码: <input type="password" ><br><br><button>登录</button><button>重置</button>
</div>

<script>
/*    Vue.config.productionTip =false;*/var  app=new Vue({el:'#app',data: {name: '',password: ''}reset(){this.name=''this.password=''}});
</script>

打开控制台使用浏览器安装的vue插件