Vue-入门-01-常用命令

最新推荐文章于 2024-08-17 19:13:55 发布

EchoByCode

最新推荐文章于 2024-08-17 19:13:55 发布

阅读量83

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45438044/article/details/122095864

版权

Vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1、1 插值表达式的使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{1 + 2}}</div>
        <div>{{msg + '----' + 123}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>
</html>

1、2 页面效果：
在这里插入图片描述
2、1 v-cloak

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--   
         在 数据渲染完场之后，v-cloak 属性会被自动去除，
         对应的标签会变为可见
        -->
        <div v-cloak>{{msg}}</div>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            }
        });
    </script>
</body>
</html>

2、2 页面效果：
在这里插入图片描述
3、1 v-text、v-html、v-pre

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div v-text='msg'></div>
    <div v-html='msg1'></div>
    <div v-pre>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
      2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
      3、v-pre用于显示原始信息
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        msg1: '<h1>HTML</h1>'
      }
    });
  </script>
</body>
</html>

3、2 页面效果：
在这里插入图片描述
4、1 v-once

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div v-once>{{info}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        info: 'nihao'
      }
    });
  </script>
</body>
</html>

4、2 页面效果：
在这里插入图片描述

5、1 v-show

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 
        v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。
    -->
    <p v-show="type==='技术'">大数据之下的锦鲤：为什么你的微博总抽不到奖</p>
    <p v-show="type==='啥也不是'">大数据之下的锦鲤：为什么你的微博总抽不到奖</p>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-show
    */
    var vm = new Vue({
      el: '#app',
      data: {
        type: '技术'
      }
    });
  </script>
</body>
</html>

5、2 页面效果如下：
在这里插入图片描述

6、1 v-model


  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{msg}}</div>
      <div>
        <input type="text" v-model='msg'>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        双向数据绑定
        1、从页面到数据
        2、从数据到页面
      */
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue'
        }
      });
    </script>
  </body>
  </html>

6、2 页面如下：
在这里插入图片描述

EchoByCode

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-入门-01-常用命令

1、1 插值表达式的使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>{{msg}}</div> <div&gt
复制链接

扫一扫

专栏目录