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也提供了自定义指令的功能,可以让我们的页面元素 ...
随机推荐
- 后端编写Swagger接口管理文档
Swagger接口管理文档 访问接口文档的网页:http://localhost:8080/swagger-ui/index.html 导入依赖 <dependency> <grou ...
- 如果Controller里有私有的方法，能成功访问吗？
目录 背景 原因 cglib代理的锅 换成JDK动态代理呢 参考 背景 写代码的时候,复制粘贴的时候,没注意到方法的属性,就导致了Controller里有了一个私有的方法,然后访问这个接口的时候就报了 ...
- [题解]Balance
1.题目 POJ-1837 2.题目大意 一个天平上有一些钩子,现在有一些砝码.给出每个钩子到原点(姑且这么叫吧)的距离(-15 ~ 15,负数代表在左边,正数相反)以及砝码的重量(1 ~ 20),求 ...
- html页面嵌套其他网站页面的方法
直接上代码:html页面嵌套其他网站页面的方法 <div> <!--第一种:使用object标签--> <object type="text/html" ...
- 动态规划——leetcode55、跳跃游戏
1.题目描述: 2.解题方法:动态规划 动态规划解题步骤: 1.确定状态: 最后一步:如果能跳到最后一个下标,我们考虑他的最后一步到n-1(最后一个下标),这一步是从 i 跳过来的,i<n-1 ...
- 域名+端口号 访问minio服务问题
业务上需要用到分布式文件服务,选择了minio作为文件服务的组件,搭建好服务后使用IP+端口号(http://xx.xx.xx.xx:9001)的形式访问在所有环境下都没有问题. 上线部署时出于正规和 ...
- kingbaseES R3 集群配置 SSL
案例说明: 本测试是在非生产环境下,在官方没有明确声明支持KingbaseCluster使用ssl的前提下,建议只能在测试环境使用,避免生产环境下直接使用. 数据库版本: TEST=# selec ...
- 知乎问题之：.NET AOT编译后能替代C++吗？
标题上的Native库是指:Native分为静态库( 作者:nscript链接:https://www.zhihu.com/question/536903224/answer/2522626086 ( ...
- LFS（Linux From Scratch）构建过程全记录（一）：准备工作
写在前面 本人修学了一门课,名曰<操作系统课程设计>,其任务为基于LFS以编译源代码的方式制作一个基本的Linux操作系统,并且编写在linux下的GUI软件. 本操作系统构建的全过程将分 ...
- MasaFramework的MinimalAPI设计
在以前的MVC引用程序中,控制器负责接收输入信息.执行.编排操作并返回响应,它是一个功能齐全的框架,它提供了过滤器.内置了模型绑定与验证,并提供了很多可扩展的管道,但它偏重,不像其它语言是通过更加简洁 ...