【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 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
随机推荐
- ES6 ES6变量的声明
// ES6语法 // 是对js影响最大的一个版本更新 // 在 ES6 语法中 退出了很多新的 语法结构 // 就相当于 js 语言, 换了一个新 ...
- kettle从入门到精通 第五十七课 ETL之kettle调用存储过程
1.之前有个同学说他使用kettle执行一坨sql语句时,kettle直接卡死掉了.我给出的建议是使用存储过程,果不其然使用存储过程顺利解决问题. 今天我们一起来学习下kettle如何调用存储过程,这 ...
- 三月十五号 anaconda 安装 tensorflow 教程
今天下载anaconda 并安装tensorflow 首先下载anaconda 因为官网下载特别慢 所有选择国内镜像网站 https://mirrors.tuna.tsinghua.edu.cn/a ...
- 基于阿里Anolis OS8.8 的Hadoop大数据平台建设
基于阿里Anolis OS8.8 的Hadoop大数据平台建设 VNC安装与使用 0 Anolis OS基本操作 0.1 Anolis OS用户与组管理 0.2 系统进程管理 0.3 文件操作命令及权 ...
- mysql 判断字符串结尾
mysql 判断字符串结尾 CREATE TABLE `tbl_str` ( `id` INT DEFAULT NULL, `Str` VARCHAR(30) DEFAULT NULL) INSERT ...
- Linux多网卡的bond模式原理
Linux多网卡绑定 网卡绑定mode共有7种: bond0,bond1,bond2,bond3,bond4,bond5,bond6,bond7 常用的有三种: mode=0: 平衡负载模式, ...
- 嵌入式Linux如何设置获取uboot参数
--- title: 嵌入式Linux如何设置获取uboot参数 EntryName: embeded-linux-debug-get-and-set-u-boot-envarg date: 2020 ...
- 读懂反向传播算法（bp算法）
原文链接:这里 介绍 反向传播算法可以说是神经网络最基础也是最重要的知识点.基本上所以的优化算法都是在反向传播算出梯度之后进行改进的.同时,也因为反向传播算法是一个递归的形式,一层一层的向后传播误差即 ...
- PHP接入苹果支付
Ios苹果支付流程: 客户端先从苹果获取内购Id. 客户端将内购id,金额.用户id等传给服务端获取一个自己服务端生成的订单号. 客户端向苹果发起支付. 支付成功后,客户端从本地拿支付凭证.将支付凭证 ...
- Linux 特权 SUID/SGID 的详解
导航 0 前言 1 权限匹配流程 2 五种身份变化 3 有效用户/组 4 特权对 Shell 脚本无效 5 Sudo 与 SUID/SGID 的优先级 6 SUID.SGID.Sticky 各自的功能 ...