【Vue】Re02 指令：第一部分

一、v-once指令

用于固定一次性赋值，后续Vue实例的赋值更改将不再对v-once指令的元素有效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!-- 列表显示 -->

<div id="vue-application">

    <h3>Vue v-once指令</h3>

    <p>没有加入v-once属性，可以随意更改 -> {{variable}} </p>

    <p v-once>加入了v-once属性，不可以随意更改 -> {{variable}} </p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    let v = new Vue({

        el : '#vue-application',

        data : {

            variable : '这是测试v-once的变量'

        }

    });

</script>

</body>

</html>

二、v-html指令

用于将属性数据中的文本字符可以被浏览器解析到HTML代码

说简单点，可以被转义

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="vue-application">

    <h3>Vue v-html指令</h3>

    <p>没有加入v-html指令，不会被浏览器解析 -> {{variable}} </p>

    <p >加入了v-html指令，会被浏览器解析 -> <span v-html="variable"></span> </p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    let v = new Vue({

        el : '#vue-application',

        data : {

            variable : '<h2>这是测试v-once的变量</h2>'

        }

    });

</script>

</body>

</html>

三、v-text指令

仅用于输出显示纯文本内容，HTML代码将不会被转义处理

一般怎么使用，因为我们还希望动态的来处理，而v-text只能一次性处理

所以一般采取mustache语法结合其他固定文本使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="vue-application">

    <h3>Vue v-html指令</h3>

    <p>原始mustache语法等同于v-text -> {{variable}} </p>

    <p>加入了v-text指令，不会会被浏览器解析 -> <span v-text="variable"></span> </p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    let v = new Vue({

        el : '#vue-application',

        data : {

            variable : '<h2>这是测试v-once的变量</h2>'

        }

    });

</script>

</body>

</html>

四、v-pre指令

用于越过mustache语法不注入属性数据，仅显示元素原本的文本内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="./../dependencies/vue-min.js"></script>

</head>

<body>

<!-- 跳过该元素和子元素的Vue编译 -->

<div id="vue-application">

    <h3>Vue v-html指令</h3>

    <p>无pre编译渲染 {{varA}}<span>{{varB}}</span></p>

    <p v-pre >有pre编译渲染 {{varA}}<span>{{varB}}</span></p>

</div>

<script type="text/javascript">

    let v = new Vue({

        el : '#vue-application',

        data : {

            varA : '变量A',

            varB : '变量B',

        }

    });

</script>

</body>

</html>

五、v-cloak指令

cloak意思斗篷，遮挡之意，在Vue应用中是

解决浏览器响应过慢，vue来不及渲染出现mustache的标记【插值闪烁的问题】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="./../dependencies/vue-min.js"></script>

    <style type="text/css"> /*  解决浏览器响应过慢，vue来不及渲染出现mustache的标记  */

        [v-cloak] {

            display: none;

        }

    </style>

</head>

<body>

</body>

</html>

六、v-bind指令

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="vue-app">

    <h3>动态v-bind测试</h3>

    <p> <a v-bind:href="newLink">v-bind 链接测试</a> </p>

    <p> <a :href="newLink">v-bind 链接缩写语法测试</a> </p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    let vm = new Vue({

        el : '#vue-app',

        data : {

            newLink : 'https://www.baidu.com'

        },

        filters : {

            customFilter(v) {

                if ( 10 <= v && v <= 100) {

                    return '非法的值'

                }

                return v;

            }

        }

    });

</script>

</body>

</html>

动态绑定class属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .act {

            color: red;

        }

        .line {

            font-size: 50px;

        }

    </style>

</head>

<body>

<div id="app">

    <p :class="sss">DynamicBinding1</p>

    <!--

        v-bind 动态绑定的方式 <tag :class="{ 类名1 : boolean, 类名2 : boolean }">文本值</tag>

    -->

    <p :class="{act : true, line : false}">DynamicBinding2</p>

    <!-- 利用data选项属性可以进行动态渲染 -->

    <p :class="{act : activateAct, line : activateLine}">DynamicBinding3</p>

    <!-- 还可以将已有的class属性进行合并处理 -->

    <p class="aaa" :class="{act : activateAct, line : activateLine}">DynamicBinding4</p>

    <!--

        如果太长不便于阅读，可以使用函数进行设置

        要注意assignmentCssClass是需要添加括号表示一个函数，且无参注入

    -->

    <p class="aaa" :class="assignmentCssClass()">DynamicBinding5</p>

    <!-- 使用数组语法进行渲染处理 -->

    <p class="aaa" :class="assignmentCssClassByList()">DynamicBinding6</p>

    <!-- 使用数组语法进行渲染处理,结合methods赋值 -->

    <p> <button @click="changeCssClass">点击取消样式绑定</button></p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    const vm = new Vue({

        el : '#app',

        data : {

            sss : 'act',

            // 用于设置h3标签的class属性，act和line的布尔属性

            activateAct: true,

            activateLine : true

        },

        methods : {

            changeCssClass : function () {

                this.activateAct = !this.activateAct;

                this.activateLine = !this.activateLine;

            },

            assignmentCssClass : function () {

                return { // 交给函数进行赋值处理

                    act : this.activateAct,

                    line : this.activateLine

                }

            },

            assignmentCssClassByList : function () {

                return [

                    'bbb',

                    'ccc',

                    'ddd',

                    'eee',

                    this.activateAct,

                    this.activateLine

                ]

            }

        }

    });

</script>

</body>

</html>

动态绑定css样式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <!-- v-bind 动态绑定css语法 <tag :style="{ 样式名称 : 值  }" ></tag>  -->

    <h3 :style="{ fontSize : '28px', color : 'red' }">{{message}}</h3>

    <!-- 动态化 -->

    <h3 :style="{ fontSize : pixel }">{{message}}</h3>

    <!-- 或者是经过拼接处理 -->

    <h3 :style="{ fontSize : pixelNum + 'px' }">{{message}}</h3>

    <!-- 使用数组结合对象进行处理 -->

    <h3 :style="[styleObj01, styleObj02]">{{message}}</h3>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    const vm = new Vue({

        el : '#app',

        data : {

            message : 'dynamic-css',

            pixel : '20px',

            pixelNum : 100,

            styleObj01 : {

                background : 'yellow',

                color : 'green'

            },

            styleObj02 : {

                fontSize : '28px',

            }

        }

    });

</script>

</body>

</html>

结合v-for指令结合的案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .color {

            color : red;

        }

    </style>

</head>

<body>

<div id="app">

    <!-- 实现点击任意一个列表项进行样式更改-->

    <ul>

        <li v-for="(item, index) in list" :class="{color : current == index}" @click="changeColor(index)">{{index}} {{item}}</li>

    </ul>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    const vm = new Vue({

        el : '#app',

        data : {

            current : -1, // 默认位置为0，所以不能取值0而是-1

            list : [

                '列表项1',

                '列表项2',

                '列表项3',

                '列表项4',

                '列表项5',

            ],

        },

        methods : {

            changeColor : function (i) {

                this.current = i;

            }

        }

    });

</script>

</body>

</html>

【Vue】Re02 指令：第一部分的更多相关文章

Vue学习【第一篇】：Vue初识与指令
什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...
Vue笔记整理——第一天
1.为什么学习Vue? 提高开发效率. 提高效率历程:原生js——>jq(解决兼容性)——>前端模板引擎——>Vue.js(减少DOM操作,注重数据业务逻辑). 2.框架与库的区别? ...
vue之指令篇 ps简单的对比angular
这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precom ...
每个人都能实现的vue自定义指令
前文先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决我们都知道,img标签支持one ...
Vue入坑第一篇
写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言本篇作为vue入门的一 ...
使用Vue自定义指令实现Select组件
完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
Vue的指令和成员
目录 Vue的指令和成员指令表单斗篷条件循环成员计算成员监听成员 Vue的指令和成员指令表单表单指令一般是和属性指令联合使用的,最常见的就是v-model="变量&qu ...
vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

随机推荐

react的反向代理
在配置在src文件夹中setupProxy.js文件,并通过npm安装http-proxy-middleware,代理中间件模块 npm i -S http-proxy-middleware 配置反向 ...
CF98C Help Greg the Dwarf 题解
CF98C Help Greg the Dwarf 题解为什么不三分? 首先我们考虑如何求出答案. 如图,考虑设夹角为 \(\theta\),那么可以得到表达式: \[[\cfrac a {\tan ...
剑指Offer-59.按之字形顺序打印二叉树(C++/Java)
题目: 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 分析: 实际上是二叉树的层次遍历,只不过每一行 ...
FlashDuty Changelog 2023-09-21 | 自定义字段和开发者中心
FlashDuty:一站式告警响应平台,前往此地址免费体验! 自定义字段 FlashDuty 已支持接入大部分常见的告警系统,我们将推送内容中的大部分信息放到了 Lables 进行展示.尽管如此,我们 ...
Vue学习：4.v-model使用
第一节算是对v-model的粗略了解,仅仅是将input的输入与Vue 实例的数据之间双向绑定.这一节将更详细的了解v-model在不同表单元素中的使用. v-model实例:找对象实现功能: 使用 ...
Spring扩展——Aware接口
Aware接口在Spring中有许多的Aware接口,提供给应用开发者使用,通过Aware接口,我们可以通过set的方式拿到我们需要的bean对象(包括容器中提供的一些对象,ApplicationC ...
Linux curl支持http／https方法,Curl请求示例语法
Curl请求示例curl -X GET "http://<host:port>/api/1/test/get?test=<value>&app_id=< ...
美团携手HarmonyOS SDK，开启便捷生活新篇章
华为开发者大会(HDC 2024)于6月21日在东莞松山湖拉开序幕,通过一系列精彩纷呈的主题演讲.峰会.专题论坛和互动体验,为开发者们带来了一场知识与技术的盛宴.6月23日,<HarmonyOS ...
Docker部署JavaWeb项目(Tomcat环境)
一.环境准备 1.首先准备一台Centos 7的虚拟机并安装Docker. 2.准备好Tomcat.JDK的安装包以及该java项目的war包. 二.编写Dockerfile Dockerfile是一 ...
Docker运维之容器的日志清理
在容器运行的过程中,通常会产生大量的日志,尤其是应用程序本身记录了info级别的日志时候,程序的标准输出记录到容器的日志.这样会占用大量的磁盘空间,严重者导致IO异常,最终服务会宕机. 方案一:定期手 ...