Vue学习笔记-02-指令

1.1 模板语法概述1.2 v-cloak指令解决插值表达式闪动的问题1.3 v-text 纯文本填充1.4 v-html 填充HTML片段1.5 v-pre 填充原始信息1.6 数据响应式1.6 v-once 只渲染一次1.7 v-model 数据双向绑定

优雅哥cc

8040人浏览 · 2020-06-01 08:39:43

优雅哥cc · 2020-06-01 08:39:43 发布

文章目录

一、指令

一、指令

1.1 模板语法概述

在这里插入图片描述

1.2 v-cloak指令解决插值表达式闪动的问题

用法：<div v-cloak> {{msg}} </div>
插值表达式存在的问题：“闪动”
如何解决该问题：使用v-cloak指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值
解题步骤：
1、提供样式
2、在插值表达式所在的标签中添加v-cloak指令

<script src="js/vue.js"></script>
<style>
    [v-cloak]{
        display: none;
    }
</style>

<body>
	<div id="app">
	    <div v-cloak>{{msg}}</div>
	</div>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'Hello,world',
        }
    });
</script>
</body>

效果：
在这里插入图片描述

1.3 v-text 纯文本填充

语法：<div v-text='msg'> </div>

v-text 填充纯文本

相比插值表达式更加简洁
无“闪动”

<div id="app">
        <div v-text='msg'></div>
</div>
<script src='vue.js></script>
<script>
     var vm = new Vue({
         el:'#app',
         data:{
             msg:'hello Vue',
             msg1:'<h1>HTML</h1>'
         }
     });
 </script>

效果：
在这里插入图片描述

1.4 v-html 填充HTML片段

语法：<div v-html='msg1'></div>
v-html 填充HTML片段
1、存在安全问题
2、本网站内部数据可以使用，来自第三方的数据不可以用

<div id="app">
    <!-- 会执行HTMl标记语言 -->
    <div v-html='msg'>  </div>
</div>
<script src='vue.js></script>
<script>
     var vm = new Vue({
         el:'#app',
         data:{
             msg:'<h1>HTML</h1>'
         }
     });
 </script>

效果：
在这里插入图片描述

1.5 v-pre 填充原始信息

语法：<div v-pre>{{msg1}}</div>
显示原始信息，跳过编译过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习3-2</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-text='msg'></div>

        <div v-html='msg1'></div>

        <!-- 显示原始信息，跳过编译过程 -->
        <div v-pre>{{msg1}}</div>
    </div>
    <script src="js/vue.js" type="text/javascript" charset='utf-8'></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello Vue',
                msg1:'<h1>HTML</h1>'
            }
        });
    </script>
</body>
</html>

效果：
在这里插入图片描述

1.6 数据响应式

什么是数据响应式？
Vue的数据响应式就是比如说你在浏览器的console面板更改变量的值，那么对应的页面里边的内容也会改变。
例如：

<body>
    <div id="app">
        <div>{{msg}}</div>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'HelloWorld'
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

1.6 v-once 只渲染一次

v-once只渲染一次，随后的渲染会当作静态内容跳过，提高性能

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-once>{{info}}</div>
    </div>
    
    <script src="vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'HelloWorld',
                info:'你好'
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

1.7 v-model 数据双向绑定

什么是双向数据绑定？请看下图：
在这里插入图片描述
实例代码：

<body>
    <div id="app">
        <div>{{msg}}</div>
        <input type="text" v-model='msg'>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:'hello,world'
            }
        });
    </script>
</body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^