Vue指令系统的常用指令

最新推荐文章于 2024-05-07 08:31:46 发布
最新推荐文章于 2024-05-07 08:31:46 发布
阅读量3k 收藏
点赞数
分类专栏： vue大全(更订中) 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52385631/article/details/123286024
版权

0. 指令介绍

1. 指令 (Directives) 是带有“v-”前缀的特殊属性。

2. 每一个指令在vue中都有固定的作用。

3. 在vue中，提供了很多指令，常用的有：v-html、v-if、v-model、v-for等等。

1. 文本指令v-html和v-text

v-text 相当于js代码的innerText，相当于我们上面说的模板语法，直接在html中插值了，插的就是文本.

如果data里面写了个标签，那么通过模板语法渲染的是文本内容，这个大家不陌生，这个v-text就是辅助我们使用模板语法的

1.1 v-html相当于innerHtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="app" >
<!--    <h1>{{atag}}</h1> 和v-text指令系统做的是一样的-->
    <h1 v-text="atag"></h1>
    
    <h1 v-html="atag"></h1> <!-- 能过将标签字符串识别成标签效果 -->
<!--    <h1 v-text="num"></h1>-->
<!--    <h1 v-text="num+1"></h1>-->

</div>


</body>

<script src="vue.js"></script>
<script>

    let vm = new Vue({
        el:'#app',
        data(){
            return {
                atag:'<a href="http://www.baidu.com">百度</a>',
                num:20,
            }
        }


    })


</script>

</html>

2. 条件渲染指令v-if和v-show

vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

2.1 v-if


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="app" >
    <a href="" v-if="num>20">百度1</a>
    <a href="" v-else-if="num<20">百度2</a>
    <h1 v-else>京东</h1>

</div>


</body>

<script src="vue.js"></script>
<script>

    let vm = new Vue({
        el:'#app',
        data(){
            return {

                num:21,

            }
        }
        // vm.num = 18;  我们发现当num的值被重新赋值时,vue的视图部分(html)
        // 会自动发生变化,这就是数据驱动视图,以后视图的效果都是通过数据来控制的
        // vm.num = 20;

    })


</script>

</html>

2.2 v-show

标签元素：
			<h1 v-show="ok">Hello!</h1>
  data数据：
  		data:{
      		ok:false    // true则是显示，false是隐藏
      }

2.3 简单总结v-if和v-show


v-show后面不能跟v-else或者v-else-if

v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[DOM操作中的remove]


v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

2.4 操作属性v-bind

格式：

<标签名 :标签属性="data属性"></标签名>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{  }} 是简写 -->
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a>  <!-- v-bind是vue1.x版本的写法 -->

简单示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="app" >

    <h1 v-bind:xx="xxattr">xxoo</h1>  <!-- v-bind:动态的标签属性控制,简写 : -->
    <h1 :xx="xxattr">xxoo</h1>  <!-- v-bind:动态的标签属性控制,简写 : -->
</div>


</body>

<script src="vue.js"></script>
<script>

    let vm = new Vue({
        el:'#app',
        data(){
            return {

                xxattr:'sss',

            }
        }

    })

</script>

</html>

2.5 案例：

显示wifi密码效果：配合v-on事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>


<div id="xx">
    <input :type="tt"> <button v-on:click="showp">{{msg}}</button>
    <input :type="tt"> <button @click="showp">{{msg}}</button>  <!-- v-on:事件名称简写@事件名称 -->

</div>


</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                tt:'password',
                msg:'显示密码',
            }
        },
        methods:{
            // showp:function (){
            //
            // }
            showp(){ // 单体模式

                if (this.tt === 'password'){
                    this.tt = 'text';
                    this.msg = '隐藏密码';
                }else {
                    this.tt = 'password';
                    this.msg = '显示密码';
                }

            }
        }

    })


</script>

</html>

2.6 事件绑定v-on和methods属性

有两种事件操作的写法，@事件名 和 v-on:事件名

<button v-on:click="num++">按钮</button>   <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>

2.6.1 v-on控制数据属性的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
<!--    <button @click="num++">+1</button>  直接操作数据属性 -->
    <button @click="num=num+10">+10</button>  <!-- 直接操作数据属性 -->
    <h1>{{num}}</h1>
</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                num:100,
            }
        },
        methods:{

        }

    })


</script>

</html>

案例2:

完成商城的商品增加减少数量

步骤：

  1. 给vue对象添加操作数据的方法

  2. 在标签中使用指令调用操作数据的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
<button @click="num++">+1</button>
    <input type="text" :value="num">
<button @click="jian">-1</button> <!-- 一些复杂的数据处理还是通过方法来搞 -->
</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                num:10,
            }
        },
        methods:{
            jian(){
                if (this.num>0){
                    this.num--;
                }

            }
        }

    })


</script>

</html>

2.7 v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
    <input type="text" v-model="num">

    <h1>{{num}}</h1>

</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                num:10,
            }
        },
        methods:{
            jian(){
                if (this.num>0){
                    this.num--;
                }

            }
        }

    })


</script>

</html>

2.8 操作样式

格式：
   <h1 :class="值">元素</h1>  值可以是对象、对象名、数组（数组的方式用的比较少）
   
   data(){
            return {
                num:11,
                xx:'c1',
            }
        }

示例1: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            color:red;
        }
        .c2{
            color:green;
        }
    </style>

</head>
<body>
<div id="xx">

    <p :class="xx">床前明月光</p>


</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                num:11,
                xx:'c1',
            }
        },
        methods:{
            jian(){
                if (this.num>0){
                    this.num--;
                }

            }
        }

    })


</script>

</html>

示例2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            color:red;
        }
        .c2{
            color:green;
        }
    </style>

</head>
<body>
<div id="xx">
<!--    <p>淫湿一手</p>-->
<!--    <p class="c1" :class="{c2:num<=10}">床前明月光</p>-->
<!--    <p :class="{c1:num>10,c2:num<=10}">床前明月光</p>-->
    <!-- class类值控制语法: :class='{类值:判断条件(布尔值或者得到布尔值的算式),类值:判断条件....}'
        布尔值或者得到布尔值的算式: 里面直接可以使用数据属性
    -->

</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                num:11,
                xx:'c1',
            }
        },
        methods:{
            jian(){
                if (this.num>0){
                    this.num--;
                }

            }
        }

    })


</script>

</html>

2.9 控制标签style样式

格式1：值是json对象，对象写在元素的:style属性中
	 标签元素：
		     <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
				<!-- 注意：不能出现中横杠，有的话就套上'font-size'，或者去掉横杠，后一个单词的首字母大写，比如fontSize -->
	 data数据如下：
         data: {
             activeColor: 'red',
             fontSize: 30
         }

示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="xx">
    <div class="c1" :style="{color:c, backgroundColor:b}"> <!-- 注意:有-的css属性名称,要改为驼峰格式 -->
        床前明月光,地上鞋三双.

    </div>
</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                c:'red',
                b:'green'
            }
        },
        methods:{
            jian(){
                if (this.num>0){
                    this.num--;
                }

            }
        }

    })


</script>

</html>



格式2：值是对象变量名，对象在data中进行声明
   标签元素：
   			<div v-bind:style="styleObject"></div>
   data数据如下：
         data: {
            	styleObject: {
             		color: 'red',
             		fontSize: '13px'  
				   }
				 }

示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="xx">

    <div class="c1" :style="divstyle"> <!-- 注意:有-的css属性名称,要改为驼峰格式 -->
        床前明月光,地上鞋三双.

    </div>
</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                c:'red',
                b:'green',
                divstyle:{
                    'color':'tan',
                    'backgroundColor':'blue',

                }
            }
        },
        methods:{
            jian(){
                if (this.num>0){
                    this.num--;
                }

            }
        }

    })


</script>

</html>

 实例-vue版本选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #card{
            width: 500px;
            height: 350px;
        }
        .title{
            height:50px;
        }
        .title span{
            width: 100px;
            height: 50px;
            background-color:#ccc;
            display: inline-block;
            line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
            text-align:center;
        }
        .content .list{
            width: 500px;
            height: 300px;
            background-color: yellow;
            display: none;
        }
        .content .active{
            display: block;
        }

        .title .current{
            background-color: yellow;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>

    <div id="card">
        <div class="title">
            <span @click="num=1" :class="{current:num===1}">国内新闻</span>
            <span @click="num=2" :class="{current:num===2}">国际新闻</span>
            <span @click="num=3" :class="{current:num===3}">银河新闻</span>
            <!--<span>{{num}}</span>-->
        </div>
        <div class="content">
            <div class="list" :class="{active:num===1}">国内新闻列表</div>
            <div class="list" :class="{active:num===2}">国际新闻列表</div>
            <div class="list" :class="{active:num===3}">银河新闻列表</div>
        </div>
    </div>
    <script>
        // 思路：
        // 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]
        // 代码实现：
        var card = new Vue({
            el:"#card",
            data:{
                num:0,
            },
        });
    </script>

</body>
</html>

3.0 列表渲染指令v-for

在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。

数据是数组：        
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="vue.js"></script>
</head>
<body>

    <div id="app">
        <ul>
            <li v-for="(value,index) in hobby_list" :key="index">{{value}}--{{index}}</li>
            <!-- value是数组中的元素,index是索引,注意v-for一定要写 :key -->
<!--            <li v-for="value, index in hobby_list">{{value}}</li>-->
        </ul>

    </div>



</body>
<script>
        // 思路：
        // 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]
        // 代码实现：
        var card = new Vue({
            el:"#app",
            data:{
                num:0,
                hobby_list:[
                    '抽烟',
                    '喝酒',
                    '烫头',
                    '烫头2',
                ]
            },
        });
    </script>
</html>


数据是对象：
        <ul>
            <!--i是每一个value值-->
            <li v-for="value in book">{{value}}</li>
        </ul>
        <ul>
            <!--value是每一个value值,attr是每一个键名-->
            <li v-for="(value,attr) in book">{{attr}}:{{value}}</li>
        </ul>
        <script>
            var vm1 = new Vue({
                el:"#app",
                data:{
                    book: {
                        // "attr属性名":"value属性值"
                        "id":11,
                        "title":"图书名称1",
                        "price":200
                    },
                },
            })
        </script>

骑猪去兜风z1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue学习之：一篇搞懂vue的指令v-model，v-if 和 v-show
xiaoyuer_2020的博客
04-14 4733
指令什么是指令参数修饰符常用指令v-modelv-bindv-forv-onv-if 和 v-showv-text可以用于提升性能的指令v-oncev-pre 什么是指令 指令 (Directives) 是带有 v- 前缀的特殊属性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。通过特定的指令，完成特定的事。 参数 一些指令能够接收一个“参数”，在指令名称之后以冒号...
Vue常用指令
qq_42839746的博客
04-24 4229
Vue常用指令是带有v-前缀的特殊属性，例如v-for、v-if、v-show、v-bind。作用是当表达式的值改变时 ，将其产生的连带影响 ，响应式的作用于DOM。
3、Vue指令v-html、v-text
weixin_46841213的博客
04-02 343
Vue指令v-html、v-text1、初识Vue指令2、v-html3、v-text 1、初识Vue指令 Vue指令（Directives）通常是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性，它们都是以”v-”开头，并且一些特殊的指令可以带参数和修饰符。指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。 2、v-html v-html：相当于 innerHTML 。内容按普通 HTML 插入，不会作为 Vue 模板进行编译 。 注意：小心XXS攻击，在可信内
vue基础的五个常用指令
weixin_60524655的博客
05-21 1201
目录 1. 内容渲染指令 2.属性绑定指令 3.事件绑定指令 4. 双向绑定指令 5.条件渲染指令 1. 内容渲染指令 1. v-text 指令用来获取数据然后以文本的形式渲染到指定标签内部，但是 v-text 也有缺点，就是它会覆盖元素内部原有的内容。所以我们开发中一般用 {{ }} 插值表达式。 2. {{ }}插值表达式，在实际开发中用的的最多，因为它只是内容的占位符，不会覆盖原有的内容。 3. v-html 指令用来...
【Vue 学习】- VueJS 常用系统指令
最新发布
2401_84091938的博客
05-07 348
在前面使用插值表达式的时候，都是在标签内部写插值表达式，如果要给标签的属性赋值，绑定插值表达式，那就要用到 v-blind 指令。v-on:keydown 指令表示键盘按下事件，这里做一个案例：让键盘只有按下 0~9 才有效，其他按键均无效。v-on:mouseover 指令表示鼠标移动到某个文件域事件，案例：在一个文件域上模拟鼠标移动和阻止事件传播。来看案例：在设置HTML文本字体颜色的时候，可以使用 v-blind 来绑定颜色。创建text，用来键盘输入显示，绑定函数并传入 event 参数。
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常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
Vue.js 常用系统指令
01-08
1.v-on ：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码 （1）v-on:click绑定点击事件 v-on:click {{message}} vue的onclick //view model new Vue({ el:'#app', data:{ message...
vue自定义指令directive的使用方法
10-17
Vue.js 是一款流行的前端框架，它的核心特性之一是基于数据绑定的指令系统。Vue 内置了许多常用的指令，如 `v-model`、`v-show` 和 `v-html`，但有时候，开发者可能需要针对特定需求创建自定义指令，以实现更复杂的...
基于Vue的后台管理系统模板
02-18
4. **指令系统**：Vue提供了一系列预定义的指令（如`v-if`、`v-for`、`v-bind`等），方便开发者操作DOM。 5. **计算属性与侦听器**：计算属性用于根据其他数据动态计算值，而侦听器可以监听数据的变化并执行相应操作...
vue.js语法及常用指令
10-19
Vue.js 是一种流行的...总之，Vue.js的语法和指令系统是其魅力所在，它们使得在构建复杂交互的前端应用时，代码更加简洁、易于维护。随着对Vue.js的深入理解和实践，开发者可以轻松构建出高性能、响应式的用户界面。
vue列表数据发生变化指令没有更新问题及解决方法
10-15
Vue的响应式系统和VDOM机制旨在自动处理数据变化和视图更新，但在某些情况下，如上述列表更新问题，需要我们正确地设置`:key`属性来确保视图的正确同步。使用唯一ID或在指令中动态设置`key`都是有效的解决策略。在...
超全vue指令全家桶
qq_48866673的博客
02-23 993
一篇文章搞懂vue2和3中所有的指令常用
Vue常用指令大全（详解）
m0_69057918的博客
01-12 1421
Vue常用指令说明及使用，通过Vue指令操作本地数据（详解）
总结vue中的常用指令
Xwz的博客
04-10 1298
1.v-model 指令用于表单输入，实现表单控件和数据的双向绑定。一般在 <input>、<select>、<textarea>、组件中使用。 <body> <div id="app"> <div>val的值:{{val}}</div> <input v-model="val"> </div> </body> <script&g
Vue常用指令+用法举例 详解
weixin_68266812的博客
02-20 715
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的常用指令及用法总结
weixin_42504805的博客
06-08 9059
vue知识
Vue基础教程：轻松掌握核心指令与特性
本文将带你逐步了解Vue的核心概念，包括HelloWorld示例、MVVM设计思想、指令系统、常用特性等，助你轻松入门Vue开发。 一、Vue基础语法 1. HelloWorld Vue的HelloWorld示例展示了如何创建一个简单的Vue实例。首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

骑猪去兜风z1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值