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也提供了自定义指令的功能,可以让我们的页面元素 ...
随机推荐
- Mysql8基础知识
系统表都变为InnoDb表 从MySQL 8.0开始,系统表全部换成事务型的InnoDB表,默认的MySQL实例将不包含任何MyISAM表,除非手动创建MyISAM表 基本操作 创建数据表的语句为CR ...
- SAM复杂度证明
关于$SAM$的复杂度证明(大部分是对博客的我自己的理解和看法) 这部分是我的回忆,可省略 先回忆一下$SAM$ 我所理解的$SAM$,首先扒一张图 初始串$aabbabd$ 首先发现,下图里的$S- ...
- 原生js也可以自定义组件
Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们. 它由三项主要技术组成,它们可以一起使用来创建封装功能的定制元 ...
- Ubuntu添加非root用户到Docker用户组
前言 首先平常公司的Linux生产环境为了防止误操作导致灾难性问题,一般都不会给我们开发开放root管理员的账号权限.所以平常在Ubuntu的普通用户登录的时候,要操作Dcoker一般都需要带上sud ...
- BZOJ4337 树的同构 (树哈希)（未完成）
样例迷,没过 交了30pts #include <cstdio> #include <iostream> #include <cstring> #include & ...
- Docker0网络及原理探究
个人观点:Docker网络通信在容器编排.集群部署中具有举足轻重的地位,(玩docker不懂docker0那就......玩不透哇)本篇分析Docker网络,并通过启动几个容器来探究Docker网络及 ...
- Linux的NIS配置
快速命令 # Server和Client设置NIS域名 nisdomainname nis_server echo 'NISDOMAIN=nis_server' >> /etc/sysco ...
- Configuration的学习
创建 //1.创建,调用的空惨 Configuration conf = new Configuration(); 加载主配置 //2.读取主配置文件==>如果是空参方法则自动加载sec下的re ...
- Html飞机大战(八):子弹的移动和管理
好家伙,这应该是这个小游戏最难的几个点之一了 现在我们要做出子弹射击的效果我们应该如何处理? 1.首先我们要确定几个变量和方法的关系 变量: 子弹 bullet 弹夹(用来装子弹的东西)bulle ...
- 第八十一篇：Vue购物车(二) 名称,图片,价格的渲染
好家伙, 1,为组件封装属性, 需要封装以下属性: 需要定义的属性 属性名 值的类型 商品名 title String 商品图片 pic String 商品价格 price Number 是否勾选 s ...