【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 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

随机推荐

23201826-熊锋-第二次blog
一.前言这三次pta作业第一次为答题判断程序-4,这是答题判断程序的第三次迭代,相较于答题判断三,新增了各种题型及其不同种类的答案,并且出现多选题,使得这次题目相当棘手,具有很大的挑战性.第二次为家 ...
Mysql主机环境导入导出数据
mysql数据库,在主机环境下导出数据为csv文件. 命令:select * into outfile '/mysql/11.csv' from 表; 可能会报错:ERROR 1290 (HY000) ...
前端开发环境配置 nvm | npm 镜像 | git
安装 nvm nvm 是一个node版本管理工具,它可以让我们安装多个node版本并在需要的时候切换 # nvm 下载地址 https://github.com/coreybutler/nvm-win ...
CAEmitterLayer动画的开始和结束
有个需求,要求模仿微信做表情下雨的动画,一开始想用CAEmitterLayer,实现的代码如下: //期望:显示特效五秒后结束特效 UIImage *image = [UIImage imageNam ...
加速鸿蒙生态共建，蚂蚁mPaaS助力鸿蒙原生应用开发创新
6月21日-23日,2024华为开发者大会(HDC 2024)如期举行.在22日的[鸿蒙生态伙伴SDK]分论坛中,正式发布了[鸿蒙生态伙伴SDK市场],其中蚂蚁数科旗下移动开发平台mPaaS(以下简称 ...
慕课DJANGO配置
重写内置的错误处理视图在项目urls.py中添加配置 handler500 = "app01.views.page_500" handler404 = "app01.v ...
关于Android开机动画调试的一点小小的经验
格式要求: 开机动画图片既可以是jpg文件,也可以是png文件,只是一定要按顺序命名.文件名命名的国际惯例是五位数,即:00000.00001. 00002--也可以是文件夹名称+下划线+序数,即:p ...
TI AM64x工业开发板硬件说明书（双核ARM Cortex-A53 + 单/四核Cortex-R5F + 单核Cortex-M4F，主频1GHz）
前言本文主要介绍TL64x-EVM评估板硬件接口资源以及设计注意事项等内容. 创龙科技TL64x-EVM是一款基于TI Sitara系列AM64x双核ARM Cortex-A53 + 单/四核C ...
基于NXP i.MX 8M Mini开发板规格书（四核ARM Cortex-A53 + 单核ARM Cortex-M4，主频1.6GHz）
1 评估板简介创龙科技TLIMX8-EVM-B是一款基于NXP i.MX 8M Mini的四核ARM Cortex-A53 + 单核ARM Cortex-M4异构多核处理器设计的高性能评估板,由核 ...
power bi柱形图如何设置高亮自动显示
通过度量值,将需要高亮的数据颜色设置为明显高亮于背景的颜色,将不需要设置为高亮的颜色设置为稍深于背景的颜色, 效果如下: