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也提供了自定义指令的功能,可以让我们的页面元素 ...
随机推荐
- 6.18 NOI 模拟
发现 \(Typro\) 没保存的草稿也是可以找回的,\(tql\) \(T1\ bs\) 考虑选的必然是开头的连续一段,那么直接二分\(+\)判定即可 由于数据范围是\(5\times 10^7\) ...
- Python 支付宝红包二维码制作步骤分享
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! 支付宝红包二维码制作步骤分享 2022. ...
- Linux使用netstat查看网络状态
查看本机的网络状态.使用netstat查看网络状态.显示系统端口使用情况.UDP类型的端口.TCP类型的端口.只显示所有监听端口.只显示所有监听tcp端口. 命令使用举例 命令 说明 netstat ...
- selenium结合jmeter进行测试
背景 现在市面上有众多成熟的性能测试工具,JMeter就是其中之一.可以通过JMeter快速将已有的Selenium代码以性能测试的方式组织起来,并使用JMeter丰富的报表功能展示测试结果. 相关链 ...
- LuoguP2953 [USACO09OPEN]牛的数字游戏Cow Digit Game(博弈论)
1~9显然,后面平\(A\)过去 #include <iostream> #include <cstdio> #include <cstring> #include ...
- Spring5完整版详解
1.Spring 1.1简介 2002,首次退出来Spring框架的雏形:interface21框架 Spring框架即以interface21框架为基础,经过重新设计,并不断丰富其内涵,与2004年 ...
- JavaScript基础回顾知识点记录4-正则表达式篇（介绍基本使用）
js 中 正则表达式使用 创建正则对象和test方法使用 /* 创建正则表达式的对象 语法: var 变量 = new RegExp("正则表达式","匹配模式" ...
- html js 导出excel表格
这个使用js 导出excel,可以集成其他语言,可以html,php,asp ,java 等,自己喜欢用那种语言就用哪种,使用非常方便.js是使用tableExport.js ,jquery-3.2. ...
- 前端Long类型丢失精度问题
有时候后端向前端传输Long类型,数字过长会出现丢失精度的问题 比如后端传来的是这样一个长数字串 那么前端的弹窗显示的是 ![](https://img2022.cnblogs.com/blog/22 ...
- KingbaseES V8R6集群管理运维案例之---repmgr standby switchover故障
案例说明: 在KingbaseES V8R6集群备库执行"repmgr standby switchover"时,切换失败,并且在执行过程中,伴随着"repmr stan ...