VUE常用指令（最详细、带实例解释）

最新推荐文章于 2024-07-09 00:17:48 发布

逾期不予

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量1.8k

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/m0_49681744/article/details/108679235

版权

本文详细介绍了Vue.js中的常用指令，包括v-cloak用于避免页面闪烁，v-text、v-html、v-pre的数据绑定，v-once的单次渲染，v-on事件绑定及其修饰符，v-bind动态绑定，v-for循环指令，v-if/v-show的条件渲染，以及v-model的双向数据绑定。还提供了一个简易购物车案例和样式绑定的示例，帮助开发者深入理解Vue.js指令的使用。

摘要由CSDN通过智能技术生成

三、常用指令

1、v-cloak

作用：解决浏览器在加载页面时因存在时间差而产生的闪动问题

原理：先隐藏元素挂载位置，处理好渲染后再显示最终的结果

注意：需要与CSS规则一起使用

示例：

<style>
    [v-cloak] {
    
        display: none;
    }
</style>

<div v-cloak>
  {
  { message }}
</div

如果后期有多个元素需要解决闪动问题，可以将v-cloak写在根元素上。

2、数据绑定指令

v-text 填充纯文本
- 相比插值表达式更加简洁
- 不存在插值表达式的闪动问题

<div id='app'>
	<span v-text="msg"></span>
	<!-- 和下面的一样 -->
	<span>{
  {msg}}</span>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    
    el: '#app',
    data: {
    
      msg:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>

v-html 填充HTML片段
- 存在安全问题
- 本网站内部数据可以使用，来自第三方的数据不可使用

<div id='app'>
    <div v-html="html"></div>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    
    el: '#app',
    data: {
    
      html:'<a href="http://www.baidu.com/">百度一下</a>'
    }
  })
</script>

v-pre 填充原始信息
- 跳过表达式的编译过程，显示原始信息

<span v-pre>{
  { this will not be compiled }}</span>

有些时候我们不想指令中的表达式进行运行，只需要给表达式加个引号。例如：

<div v-html='"msg"'></div>

3、v-once

作用：只渲染元素和组件一次，之后元素和组件将失去响应式（数据层面）功能

Q & A：如何理解响应式？

布局响应式：随着终端设备的屏幕尺寸的变化而改变布局

数据响应式：数据变化后页面随之变化，页面中的数据变化代码中的数据也跟着变化（双向数据绑定）

示例：

<div id="app">
	<h3>{
  {message}}</h3>
	<!-- 动态修改message值，此绑定将不会发生改变 -->
	<div v-once>{
  {message}}</div>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
    
      el: '#app',
      data: {
    
          message: '你好世界'
      }
  })
</script>

##4、v-bind

作用：动态地绑定一个或多个attribute【组件内：一次声明，多次使用】

场景：复用某个数据的时候会使用。例如：飞猪官网

<!-- v-bind绑定href属性值 -->
<a v-bind:href='url' v-bind:target='type'>跳转</a>

<!-- v-bind绑定href属性值（简写形式） -->
<a :href='url' :target='type'>跳转</a>

示例代码

<body>
    <div id="app">
        <a :href="url" :target="type" :alt="alt">{
  {alt}}</a>
        <a :href="url">{
  {alt}}</a>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
    
        el: '#app',
        data: {
    
            url: 'https://www.fliggy.com/',
            type: '_blank',
            alt: '飞猪官网'
        }
    })
</script>