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

随机推荐

带你了解磁盘驱动程序(xv6)
磁盘驱动程序本文来聊聊磁盘驱动程序,驱动程序是硬件的接口,操作系统通过这个接口来控制硬件工作,所以驱动程序就好比是硬件和系统之间的桥梁.这是百科上给出的解释,可能看起来还是云里雾里,我来做做注解. ...
CentOS7打开终端快捷键
点击右上角的用户名,选择设置>>键盘>>快捷键,然后点+,名称自己写,命令是"/usr/bin/gnome-terminal",这个是不能改的,再点应用,这 ...
centos 7 mysql8 安装和卸载
cent os 7 安装 mysql 8--install-start官网下载MySQL的RPM源,地址:https://dev.mysql.com/downloads/repo/yum/ 下载这个项 ...
ssh练习
根据要求完成部署根据如下要求,完成部署过程 1.恢复7.8.9.31.41所有机器的快照 7 8 9 web服务 nginx 172.16.1.xx nfs-31 提供共享文件存储 ...
Vue学习：15.组件化开发
组件化开发组件化开发是一种软件开发方法,它将应用程序拆分成独立的.可重用的模块,每个模块都被称为组件.这些组件可以独立开发.测试.维护和部署,从而提高了代码的可维护性.可扩展性和复用性.在前端开发中 ...
算法金 | 一个强大的算法模型，GP ！！
大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」高斯过程算法是一种强大的非参数机器学习方法,广泛应用于回归.分类和优化等任务中.其核心 ...
关于Elasticsearch查找相关的问题汇总（match、match_phrase、query_string和term）
关于Elasticsearch查找相关的问题汇总(match.match_phrase.query_string和term) 查询全部: { "query": { "ma ...
什么是Web3.0，和区块链又有什么关系？
又是一个莫名其妙的词语的新起-.- 我大致归纳为以下几个点什么是web3.0 Web 3.0(Web3)是下一代互联网的发展方向,旨在创建一个更加去中心化.用户控制和数据保护的网络环境.与之前的We ...
图最短路径之BellmanFord
Bellman–Ford Algorithm 算法参考地址:Bellman–Ford Algorithm | DP-23 - GeeksforGeeks 算法的简介在图中给定一个图形和一个源顶点 s ...
Centos7或Ubuntu 磁盘扩容
准备切换到root用户(获取root权限) 安装: [root]# install lvm2 -y 查看当前信息: # 查看根分区大小 $ df -h Filesystem Size Used Av ...