Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】（2022/7/19）
1、常见的内置指令
v-bind: 单向绑定解析表达式, 可简写为 :xxx
v-model: 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on: 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show: 条件渲染 (动态控制节点是否展示)
v-text指令：
1、作用：向其所在的节点中渲染文本内容。
2、与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。v-html指令：
1、作用：向指定节点中渲染包含html结构的内容。
2、与插值语法的区别：(1)、v-html会替换掉节点中所有的内容，{{xx}}则不会。(2)、v-html可以识别html结构。
3、严重注意：v-html有安全性问题！！！！
(1)、在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2)、一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！v-cloak指令（没有值）：
1、本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2、使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。v-once指令：
1、v-once所在节点在初次动态渲染后，就视为静态内容了。
2、以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。v-pre指令：
1、跳过其所在节点的编译过程。
2、可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
2、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="App">
<div>你好,{{name}}</div>
<div v-text="name">你好、张麻子</div>
<div v-text="str"></div>
<div v-html="str"></div>
<h1 v-cloak>{{value}}</h1>
<h1 v-pre>Vue其实很好玩</h1>
<h1 v-once>初始化的值是：{{n}}</h1>
<h1>当前的n值是：{{n}}</h1>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue",
name: 'ZYZ',
str: '<h3>你好啊！张麻子</h3>',
n: 1,
}
})
</script>
</body>
</html>
3、测试效果
Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】（2022/7/19）的更多相关文章
- Vue.js 学习笔记 第5章 内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...
- VUE：内置指令与自定义指令
VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...
- Vue源码后记-其余内置指令（2）
-- 指令这个讲起来还有点复杂,先把html弄上来: <body> <div id='app'> <div v-if="vIfIter" v-bind ...
- Vue源码后记-其余内置指令（1）
把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind ...
- vue内置指令详解——小白速会
指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bi ...
- vue内置指令与自定义指令
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- Vue(四) 内置指令
现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...
- 2.0 vue内置指令与自定义指令
1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...
- AngularJS学习笔记（四）内置指令
说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...
随机推荐
- [NCTF2019]SQLi-1||SQL注入
1.打开之后首先尝试万能密码登录和部分关键词(or.select.=.or.table.#.-等等)登录,显示被检测到了攻击行为并进行了拦截,结果如下: 2.使用dirmap进行目录扫描,发现robo ...
- 论文解读（PPNP）《Predict then Propagate: Graph Neural Networks meet Personalized PageRank》
论文信息 论文标题:Predict then Propagate: Graph Neural Networks meet Personalized PageRank论文作者:Johannes Gast ...
- 高考集训讲课(To 高一)
高考集训讲课(To 高一) 主要是怕下午讲着讲着把自己讲懵了,有一定的迷糊概率 经过机房的讨论,一致认为插头\(DP\)实用性不大,所以这次不讲了,先把重要的讲一讲. 顺便吐槽一下,凭什么另外几个人都 ...
- GreatSQL特性介绍及前景展望 | 数据技术嘉年华2021分享PPT发布
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 全 ...
- Luogu3267 [JLOI2016/SHOI2016]侦察守卫 （树形DP）
树形DP,一脸蒙蔽.看了题解才发现它转移状态与方程真不愧神题! \(f[x][y]\)表示\(x\)的\(y\)层以下的所有点都已经覆盖完,还需要覆盖上面的\(y\)层的最小代价. \(g[x][y] ...
- 跟我学Python图像处理丨基于灰度三维图的图像顶帽运算和黑帽运算
摘要:本篇文章结合灰度三维图像讲解图像顶帽运算和图像黑猫运算,通过Python调用OpenCV函数实现. 本文分享自华为云社区<[Python图像处理] 十三.基于灰度三维图的图像顶帽运算和黑帽 ...
- [CF1526D] Kill Anton（逆序对，搜索）
题面 A N T O N \rm ANTON ANTON 的基因由 A , N , T , O \rm A,N,T,O A,N,T,O 四种碱基排列组成. A N T O N \rm ANTON AN ...
- CodeForces - 1625C
Problem - 1625C - Codeforces 题意: 一条马路,有n个限速牌,表示的是从这个限速牌开始到下一个限速牌或者到马路尾的这段距离的速度,你可以拆除其中k个限速牌,问最少的时间是多 ...
- 最小生成树(prime+kruskal)
1.prime算法 prime算法类似于bfs,就是判断每次连接的点中距离最短的,加入到树中,具体如下: prime算法要求一开始随便选择一个点作为起点,因为最小生成树包括所有点,所以起点随机即可(一 ...
- PHP代码审计——文件操作漏洞
梦想CMS(lmxcms)任意文件删除 1. 漏洞详情--CNVD-2020-59469 2. 漏洞描述称后台Ba***.cl***.php文件存在任意文件删除,查看cms源码,只有BackdbA ...