VUE（3）{遮罩.隐藏、pre、一次性页面渲染、双向数据绑定、实时监听输入框事件、键盘监听事件、watch监听器、单选/多选/下拉选框、动态样式}

最新推荐文章于 2024-05-17 16:59:51 发布

！没事

最新推荐文章于 2024-05-17 16:59:51 发布

阅读量746

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59684494/article/details/121693845

版权

一、遮罩.隐藏

在vue实例化之前, 把页面内容暂时隐藏实例化完毕后, 会自动显示. -- 网络卡顿时才会有效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 属性选择器:  [属性名] 选择带有 指定属性的元素 */
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 现象: 实际工作时, 通常JS文件不会直接书写在 HTML 中, 
       而是通过引入的方式, 把JS制作为独立的JS文件 -->
    <!-- 极少见的状况: 网速极慢; HTML加载完毕 但是JS未加载完毕 -->
    <!-- 解决: 在 vue 未加载完毕之前, 先隐藏DOM元素 -->
    <!-- v-clock: 需要搭配 css 实现隐藏 -->
    <div id="app" v-cloak>
      <!-- 本质: new Vue() 完成后, 会自动删除 v-cloak 属性 -->
      <h1>Welcome to {
  {message}}</h1>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      // 加载 vue 的代码存储在外部的css 文件中, 引入加载耗时2s
      setTimeout(() => {
        new Vue({
          el: "#app",
          data: { message: "2107" },
        })
      }, 2000)
    </script>
  </body>
</html>

二、pre

v-pre: 原样输入 { {}} 符号

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- pre: 原样输出, 忽略 vue 关键词 -->
    <div id="app">
      <p v-pre>使用{
  {name}}可以输出vue中的name变量</p>
      <div>
        <!-- v-pre 专门针对 {
  {}} 语法, 让标签中的此语法不解析 -->
        <span v-pre>{
  {name}}</span>
        <span v-text="{
  {name}}"></span>
        <span>的值是{
  {name}}</span>
      </div>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: { name: "Lucy" },
      })
    </script>
  </body>
</html>

三、一次性页面渲染

v-once: DOM初始化时更新一次, 之后不再更新DOM元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 一次性: 值的变化只更新一次 DOM,  后续不会修改 -->
    <div id="app">
      <h3 v-once>页面显示时间: {
  {time}}</h3>
      <h3>当前

最低0.47元/天解锁文章

！没事

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE（3）{遮罩.隐藏、pre、一次性页面渲染、双向数据绑定、实时监听输入框事件、键盘监听事件、watch监听器、单选/多选/下拉选框、动态样式}

一、遮罩.隐藏在vue实例化之前, 把页面内容暂时隐藏实例化完毕后, 会自动显示. -- 网络卡顿时才会有效<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" conten
复制链接

扫一扫