【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 数组列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
ETL工具-nifi干货系列第十讲处理器RouteOnAttribute（数据流路由）
1.今天我们一起来学习下处理器RouteOnAttribute,此处理器的作用是根据属性值进行路由进而来控制数据流的走向.类似于java中的if-else或者switch-case.如下图所示. Ge ...
vue柱状图
原型 1 <template> 2  3 <div ref="overallSituation" :style=" ...
SpringBoot+Selenium模拟用户操作浏览器
Selenium Selenium是一个用于Web应用程序自动化测试的开源工具套件.它主要用于以下目的: 浏览器自动化:Selenium能够模拟真实用户在不同浏览器(如Chrome.Firefox.I ...
2019南京区域赛ABCHJK题解 & KM-bfs(O(n^3))板子
A.Hard Problem 题目大意:给你一个数n,然后让你计算一个子集大小,这个大小的子集要保证一定存在一个数是另一个数的约数,求出这个最小的数. 做法:显然后面的\(\frac{n}{2}\)个 ...
【深度学习有效炼丹】多GPU使用教程, DP与DDP对比, ray多线程并行处理等 [GPU利用率低的分析]
️ 前言更新日志: 20220404:新增一个DDP 加载模型时显存分布不均问题,见目录遇到的问题及解决处主要是上次server12 被自己一个train 直接线程全部拉满了(没错 ... ser ...
CF1864F 题解
写了一小时结果被卡常了(笑. 考虑新加入一个数什么时候会产生贡献,或者什么时候不会产生贡献. 发现当一个数的位置与他前一次出现时的位置所构成的区间内假若有一个比它小的数那么就不得不对这个数新进行一次操 ...
Java 自定义注解校验字段唯一性
业务场景在项目中,某些情景下我们需要验证编码是否重复,账号是否重复,身份证号是否重复等... 那么有没有办法可以解决这类似的重复代码量呢? 我们可以通过自定义注解校验的方式去实现,在实体类上面加上自 ...
Linux后台运行jar文件和关闭Java程序
后台运行jar文件 Linux 运行jar包 java -jar jar文件名字.jar 这是最简单运行jar文件的命令. 特点:当前命令行窗口将被锁定,可按CTRL + C中止程序运行,或直接关闭窗 ...
汇编语言--cpu的工作原理（寄存器）--手稿
03