vue指令笔记总结（一）

最新推荐文章于 2022-11-25 19:08:26 发布

赵博林

最新推荐文章于 2022-11-25 19:08:26 发布

阅读量660

点赞数 3

分类专栏： vue.js 文章标签： vue vue.js

本文链接：https://blog.csdn.net/SoULikeMe/article/details/106787412

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本节内容

指令	属性
v-cloak	解决代码闪烁
v-text	写入文本
v-html	写入html结构
v-bind	绑定js属性缩写：
v-on	绑定js时间缩写 @

代码块

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* []是属性选择器，选中【】内带有相同属性的标签 */
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 这个指令是用来保持在元素上直到关联实例结束时进行编译。在页面加载时会闪烁 先显示{{message}} ，后编译。解决了插值表达式闪烁的问题-->
      <p v-cloak>{{message}}</p>
      <!-- v-text 默认无闪烁，且覆盖h4标签内的文本，h4标签内写入元素会被v-text定义的属性覆盖 -->
      <h4 v-text="message"></h4>
      <div v-text="message2"></div>
      <!--v-text 解析失败-->
      <div v-html="message2"></div>
      <!--v-html  解析成功-->
      <input type="button" value="按钮" v-bind:title="mytitle + '还可以加后缀哦'" />
      <input type="button" value="按钮" :title="mytitle + '简写为：了'" />
      <!--v-bind中，可以写js表达式 且缩写为冒号：  -->
      <!-- vue中提供了v-on： -->
      <input type="button" value="按钮" v-on:mouseover='alert("我是傻逼")' />
      <input type="button" value="按钮" @mouseover='alert("我也是傻逼")' />
      <!-- v-on:  等价于  @   -->
      <!-- v-on：中有些方法不能直接用，需要在script标签中添加methods方法，可以是function -->
    </div>

    <script src="vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          message: '123',
          message2: '<h1>哈哈，我是大号h1，又大又粗</h1>',
          mytitle: '这是我自定义的title标签',
        },
      });
    </script>
  </body>
</html>

总结
1. v-text和v-html有一个相同点：标签里的值会被定义的属性覆盖
2. 复制代码自用时，建议更改为自己的vue.js地址

赵博林

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
vue指令笔记总结（一）

本节内容指令属性v-cloak解决代码闪烁v-text写入文本v-html写入html结构v-bind绑定js属性缩写：v-on绑定js时间缩写 @代码块<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d
复制链接

扫一扫