初始Vue模板语法-指令

最新推荐文章于 2023-04-01 20:09:30 发布

Dust_SongYunfei

最新推荐文章于 2023-04-01 20:09:30 发布

阅读量1.9k

点赞数 1

分类专栏： # Vue.js 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/dust__/article/details/120942866

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

1、指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。
Demo

  <div id="app">
        <p v-if="seen">欢迎关注Dust_SongYunfei博客！！！</p>
    </div>
    <script type="text/javascript">
var vim=new Vue({
    el:"#app",
    data:{
        seen:false
    }
});
</script>

当设置seen的属性为true时，p标签元素显示，为false时p标签隐藏；

2、参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

<a v-bind:href="url">...</a>

这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

<body>
	 <div id="app">
        <p v-if="seen">欢迎关注Dust_SongYunfei博客！！！</p>
        <b><a v-bind:href="url" style="text-decoration: none; color: #800080;">Dust_SongYunfei</a></b>
    </div>
</body>
<script type="text/javascript">
	var vim=new Vue({
	    el:"#app",
	    data:{
	        seen:false,
	        url:"https://raindust.blog.csdn.net/"
	    }
	});
</script>

动态参数

v-bind小案列

<body>
    <div id="div1" style="width: 300px; height: 100px; background-color: aquamarine; text-align: center; line-height: 100px;">
        <a v-bind:[cs]="hr" style="background-color: red; text-decoration: none;">欢迎关注Dust_SongYunfei博客！！！</a>
    </div>
</body>
<script type="text/javascript">
        new Vue({
            el:"#div1",
            data:{
                cs:"href",
                hr:"https://raindust.blog.csdn.net/"
            }
        });
</script>

注意:

只用在a标签中才有bind事件

在这里插入图片描述

v-on小案列

<body>
    <div ref="div2" id="div2" style="width: 100px; height: 100px; background-color:violet;text-align: center; line-height: 100px;">
        <span v-on:[eventname]="dosomething" style="width: 50px;height: 30px;background-color: yellow;">{{msg}}</span>
    </div>
</body>
<script type="text/javascript">
       var div2= new Vue({
            el:"#div2",
            data:{
                msg:100,
                eventname:"click"
            },
            methods:{
                dosomething:function(){
                    // this.msg=this.msg+1
                    this.$refs.div2.style.width="200px";
                }
            }
        });
</script>

3、修饰符

修饰符 (modifier) 是以半角句号. 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

Demo

  <div id="app">
        <p v-if="seen">欢迎关注Dust_SongYunfei博客！！！</p>
        <b><a v-bind:href="url" style="text-decoration: none; color: #800080;">Dust_SongYunfei</a></b>
        <div @click="click1">
            <div @click.stop="click2">
                click MyStyle
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
var vim=new Vue({
    el:"#app",
    data:{
        seen:false,
        url:"https://raindust.blog.csdn.net/"
    },
    methods:{
        click1:function(){
            console.log("click1.。。。。。。");
        },
        click2:function(){
            console.log("click2.。。。。。。");   
        }
    }
});
</script>

在点击标签时触发了“事件冒泡”，将click1事件也触发了；

在Vue中的“修饰符”，将以.指明特殊后缀，以特殊方式绑定。此案例中以.stop触发特殊绑定。也就类似js中的“阻止冒泡”。

4、参考文档

官方文档:https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4

Dust_SongYunfei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初始Vue模板语法-指令

文章目录1、指令2、参数动态参数3、修饰符4、参考文档1、指令指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：<p v-if="seen">现在你看到我了</p>这里，v-if 指令将根据表达式 seen 的值的真假来插入/移
复制链接

扫一扫