vue常用指令

VIP文章 已于 2022-06-10 22:19:56 修改
阅读量3.4k 收藏 22
点赞数
文章标签： vue.js javascript 前端
于 2022-06-06 23:04:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58017699/article/details/125152732
版权

常用指令：

vue常用指令有：v-html指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。

1、v-html指令:

v-html作用：插入一段html片段 相当于innerHTML；

语法 v-html="vue变量"

使用v-html如下例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            v-html作用：插入一段html片段 相当于innerHTML；
            语法 v-html="vue变量"
        -->
      <main v-html="tmp"></main>
      <!-- 注意： 'tmp' 字符串 -->
      <div v-html="'tmp'"></div>

      <!-- 作用 与 Inntertext一样 -->
      <div v-text=" 'hellow word' "></div>
    </div>

    <div v-html="'哈哈哈哈'"></div>
    <script src="../vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                // 注意：由于 v-html v-text 插入的模板中不能使用指令，指令是html的自定义属性
                tmp:` 
        <div>
           <button v-show="false">-</button>
           <span>0</span>
           <button>+</button>
        </div>
                `
            }
        })
    </script>
</body>
</html>

2、v-text指令:

v-text是渲染字符串，会覆盖原先的字符串

使用v-text,如下例子:

<div id="app">
    <div>{
  {innerHtml}}</div>
    <div v-text="innerHtml"></div>
    <div v-html="innerHtml"></div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            innerHtml:'<button>一个按钮</button>'
        }
    })
</script>

3、v-show 和 v-if指令:

v-show

            作用：控制绑定元素的，显示隐藏效果，通过添加display:none方式

            true:显示

            false 隐藏  元素会添加 display:none的样式

v-if

 v-if 逻辑指令

            作用：更具赋值，true/false 创建或者销毁绑定的dom元素

            true ：创建元素

            false: 销毁dom元素 用 注释标签代来占据位置

v-if和v-show区别：</

最低0.47元/天 解锁文章
【希卡利】
关注
  • 0
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue常用指令详解分析
10-18
给大家详细分析了关于VUE的常用的相关指令内容，对此有需要的朋友们可以学习下。
Vue常用的几个指令附完整案例
10-17
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧
Vue常用指令+用法举例 详解
最新发布
weixin_68266812的博客
02-20 478
vue的常用指令有：vue常用指令有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。
vue 的指令
热门推荐
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
超全vue指令全家桶
qq_48866673的博客
02-23 914
一篇文章搞懂vue2和3中所有的指令常用
【Vue】Vue常见的6种指令
金鳞踏雨
03-06 3864
指令（Directives）是vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。vue 中的指令按照不同的用途可以分为如下6 大类① 内容渲染指令② 属性绑定指令③ 事件绑定指令④ 双向绑定指令⑤ 条件渲染指令⑥ 列表渲染指令指令是Vue开发中最基础、最常用、最简单的知识点。Vue的指令都是以 "v-" 为前缀的，指令是附加到 HTML 元素的特殊属性，这些属性可以更改行为，并基于 DOM 的表达式值提供对DOM 的控制。
vue常用的命令
王春燕的博客
06-15 5725
Vue一些常用命令： 1.安装vue-cli npm install --global vue-cli 2.创建一个基于 webpack 模板的新项目 vue init webpack 项目名称 3. 安装依赖： cd 项目名称 npm install 3运行： npm run dev 4.安装vue-resource插件（通过XMLHttpRequest或JSONP发起请求并处理响应 //get post请求）： npm install vue-resource --save......
vue指令大全
qq_43235503的博客
04-13 1538
vue指令大全
Vue常用指令
yhang0802的博客
06-19 1272
Vue常用指令
vue指令
fake_8的博客
12-09 2513
vue指令
vue常用指令代码实例总结
12-20
vue常用内置指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak] { display: none } </...
判断对象是input_Angular 输入 @Input 和输出 @Output 属性
weixin_39845113的博客
01-14 153
先来看一个关系图：输入属性是一个带有@Inputs()装饰器的可设置属性。当它通过属性绑定的形式被绑定时，值会流入这个属性。用来接收外部传入的数据，输入属性可以使得父组件可以把数据传给子组件，输入属性允许你在组件树中传递数据。首先得先导入Input，然后使用@Input注解把外部的数据导入到紧跟着的变量，以下面组件为例：article组件用来显示表格里面的数据信息stars推荐组件是article...
常见的Vue基本指令有哪些？
weixin_45757427的博客
02-23 1901
v-if：根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。v-if 控制元素的渲染 v-if 为假 该元素不会创建 v-show：根据表达式之真假值，切换元素的display CSS 属性。 可以控制元素的显示隐藏通过display none v-for：循环指令，基于一个数组或对象渲染一个列表，Vue 2.0 以上必须需配合key值使用。绑定一个 标签 循...
vue的常用指令
weixin_50304773的博客
09-16 74
vue的常用指令 v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的。 v-html指令：绑定一些包含html代码的数据在视图上，例如Daisy,这个字符包含了标签，要想不被当做普通的字符串渲染出来，发挥应有的效果，我们就得使用v-html指令 。例如下面的写法，name里面的Daisy外层套上，用v-html指令后的功能效果就会正常被渲染出来，从而不会当做字符串被解析出来。 v-show指令：指令的取值为true/false，分别对应着显示/隐藏，例如下面这段代码，s
vue的指令
weixin_30377461的博客
06-29 716
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element（元素） 当前作用域 data(){ return { //用return返回对象 msg: "122" ...
vue常用命令
qq_37196621的博客
08-20 916
node -v 查看node版本
VUE 常用指令
m0_58019259的博客
12-29 441
VUE 常用指令
Vue2基础二、常用指令
李宥的博客
07-27 683
- **概念：**指令（Directives）是 Vue 提供的带有 **v- 前缀** 的 特殊 标签**属性**。Vue 会根据不同的【指令】，针对标签实现不同的【功能】。 - **为啥要学：**提高程序员操作 DOM 的效率。 - **vue指令分类：** - 内容渲染指令（v-html、v-text） - 条件渲染指令（v-show、v-if、v-else、v-else-if） - 事件绑定指令（v-on） - 属性绑定指令 （v-bind） - 列表渲染指令（v-for）
vue常用指令修饰符
08-29
Vue常用的指令修饰符有以下几种： 1. `.prevent`：阻止默认事件的触发。例如，`@click.prevent`会阻止点击事件的默认行为。 2. `.stop`：停止事件冒泡。它会阻止事件进一步传播到父元素。例如，`@click.stop`会停止点击事件的冒泡。 3. `.capture`：添加事件侦听器时使用捕获模式，即在父元素上触发事件之前捕获它。例如，`@click.capture`会在父元素上触发点击事件之前捕获它。 4. `.self`：只触发元素自身的事件，不包括子元素的事件。例如，`@click.self`只会在元素自身被点击时触发，而不会在子元素被点击时触发。 5. `.once`：只触发一次事件。例如，`@click.once`只会在首次点击时触发，之后再次点击不会触发。 6. `.passive`：设置事件监听器时，指示浏览器不要阻止默认滚动行为。它可以提高滚动的性能。例如，`@scroll.passive`可以优化滚动性能。 这些指令修饰符可以与Vue的指令一起使用，例如`v-on`指令（简写为`@`）和`v-bind`指令（简写为`:`）等。它们可以增强指令的功能，提供更加灵活和精确的事件处理方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值