【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 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
随机推荐
- golang interface 和 struct 添加方法的区别
在 Go 语言中,struct 和 interface 都可以关联方法,但它们的方式不同: 1. struct 添加方法: 结构体(struct)本身不直接包含方法,但可以通过定义一个指向该结构体类型 ...
- SELinux(一) 简介
首发公号:Rand_cs 前段时间的工作遇到了一些关于 SELinux 的问题,初次接触不熟悉此概念,导致当时配置策略时束手束脚,焦头烂额,为此去系统的学习了下 SELinux 的东西.聊 SELin ...
- LNMP集群架构
网站集群拆分 上一节我们是部署了单机的LNMP,再往下,要进行拆分了,无论是性能.还是安全性,都务必要拆分. 拆分的内容有 nginx集群 mysql nfs共享存储 等 拆分思路 情况1 当前的单机 ...
- BC1-Hello Nowcoder
题目 解题思路 方案一: 这道题同输出 "Hello World!"解法相同,用 C 语言的格式输出函数 printf() 来完成即可. 具体代码如下: #include < ...
- SDL3 入门（1）：Hello, SDL3!
在本系列中我们使用 Windows Terminal + Powershell 组合作为我们在 Windows 系统下的终端工具,Windows 11 自带该环境.你也可以使用任意自己喜欢的终端环境代 ...
- FreeRTOS简单内核实现6 优先级
0.思考与回答 0.1.思考一 如何实现 RTOS 内核支持多优先级? 因为不支持优先级,所以所有的任务都插入了一个名为 pxReadyTasksLists 的就绪链表中,相当于所有任务的优先级都是一 ...
- 使用 nginx 共享文件
1. 安装nginx 2. 在nginx的配置文件的server部分加上如下的配置: location /shared/ { autoindex on; autoindex_exact_size on ...
- 全志科技T3国产工业评估板规格书（四核ARM Cortex-A7，主频1.2GHz）
1 评估板简介 创龙科技TLT3-EVM是一款基于全志科技T3处理器设计的4核ARM Cortex-A7高性能低功耗国产评估板,每核主频高达1.2GHz,由核心板和评估底板组成. 评估板接口资源丰富, ...
- UF_MB_ask_button_id 测试
# tesy UF_MB_ask_button_id import NXOpen import NXOpen_UF as nuf def main(): ses = NXOpen.Session.Ge ...
- IIS部署错误HTTP Error 500.36 ASP.NET Core IIS hosting failure(out-of-process)
错误提示 HTTP Error 500.36 - ASP.NET Core IIS hosting failure (out-of-process) The out of process reques ...