欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue指令笔记总结(一)

程序员文章站 2022-02-19 06:34:30
...

本节内容

指令 属性
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地址

相关标签: vue.js vue vue.js