Vue基础之内置指令ref、v-cloak

最新推荐文章于 2024-07-04 10:12:44 发布

转载最新推荐文章于 2024-07-04 10:12:44 发布 · 539 阅读

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了Vue.js中常用的内置指令，包括v-text、v-html、v-if、v-else、v-show、v-for、v-on、v-bind、v-model和ref等。解释了每个指令的功能及应用场景，如如何更新元素内容、控制显示隐藏、绑定事件和数据双向绑定等。并通过实例展示了如何使用v-cloak指令防止页面加载时表达式的闪现。

1、内置指令（ref、v-cloak）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12_指令_内置指令</title>
  <style>
    [v-cloak] { display: none }
  </style>
</head>
<body>
<!--
常用内置指令
  v:text : 更新元素的 textContent
  v-html : 更新元素的 innerHTML
  v-if : 如果为true, 当前标签才会输出到页面
  v-else: 如果为false, 当前标签才会输出到页面
  v-show : 通过控制display样式来控制显示/隐藏
  v-for : 遍历数组/对象
  v-on : 绑定事件监听, 一般简写为@
  v-bind : 强制绑定解析表达式, 可以省略v-bind
  v-model : 双向数据绑定
  ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
  v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
-->
<div id="example">
  <!--刚开始加载的时候，由于[v-cloak] { display: none }样式，该p标签是隐藏的。
      当加载完成后v-cloak消失,样式就不管用了，p标签就会显示出来。该方法就会保证刚加载的时候不会出现{{content}}-->
  <p v-cloak>{{content}}</p> 
  <p ref="msg">abcd</p>
  <button @click="hint">提示</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {
      content: '<a href="http://www.baidu.com">百度一下</a>'
    },
    methods: {
      hint () {
        alert(this.$refs.msg.innerHTML) //abcd
      }
    }
  })
</script>
</body>
</html>