Web前端-Vue-v-html,v-cloak,v-model,template,v-on,event,事件修饰符

最新推荐文章于 2022-11-22 22:08:52 发布

yanghainan0318

最新推荐文章于 2022-11-22 22:08:52 发布

阅读量581

点赞数

分类专栏： web前端文章标签： vue.js

本文链接：https://blog.csdn.net/yanghainan0318/article/details/106848888

版权

web前端专栏收录该内容

49 篇文章 1 订阅

订阅专栏

v-html和v-text

专门用来渲染标签内容的在一定程度上可以避免 mustache语法在加载缓慢时闪烁问题

v-html="变量"
v-text="变量"

如果标签本身有内容那么加载完成后会被覆盖显示变量所指向的内容

如果使用mustache语法渲染那么会出现闪烁问题
要使用这两个指令渲染
哪怕加载缓慢时没有渲染出来标签页不会显示

v-html和v-text区别:
v-html会识别标签并渲染

v-text 不会识别标签和渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
        <h1 v-html="msg">我是h1原本的内容</h1>
        <h2 v-text="qq">我是原本h2的内容</h2>

    <!--mustache语法是 双大括号   那么如果页面加载缓慢 vue半天没有加载出来
        那么就会出现页面好多个大括号的效果
        用户体验很不好

    -->

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


        var vm=new Vue({
            el:'#app',
            data:{
//                msg:"我是msg内容",
                msg:"<a href='#'>我是标签内容</a>",
//                qq:"我是qq内容",
                qq:"<em>我是qq内容</em>"
            }
        });
</script>
</body>
</html>

v-cloak

如果我就想使用mustache语法如何防止花括号闪烁问题?
使用v-cloak 指令

使用步骤:
1.在渲染mustache语法的标签上面添加v-cloak指令
<标签 v-cloak>{{msg}}</标签>

2.在css里面添加一个属性选择器(css3)
[v-cloak]{
display:none;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }


    </style>
</head>
<body>

<div id="app">
  
        <!--<h1>{{msg}}</h1>-->
    <!--用c-cloak来预防 花括号闪烁问题-->
        <h1 v-cloak >{{msg}}</h1>

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


        var vm=new Vue({
            el:'#app',
            data:{
//                msg:"我是msg内容",
                msg:"<a href='#'>我是标签内容</a>",
//                qq:"我是qq内容",
                qq:"<em>我是qq内容</em>"
            }
        });


</script>
</body>
</html>

v-model专门用来替换输入框的value属性

使输入框具有双向数据绑定的效果
<input type="text" v-model="变量"> 此时输入框不能再写value属性
已经被v-model替换相当于把value换成用变量渲染

多行文本框也可以使用v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
        <h1 v-html="msg"></h1>
    <input type="text" v-model="msg">
    <br>
    <!--多行文本框  也可以使用v-model-->
    <textarea v-model="msg" name="" id="" cols="30" rows="10"></textarea>
</div>
<script src="js/vue.js"></script>
<script>

        var vm=new Vue({
            el:'#app',
            data:{
                msg:'Hello Vue!',
            }
        });

</script>
</body>
</html>

template标签

* 在vue中 template标签受vue加载
* 在页面渲染完成后这个标签不存在
* 但是在写代码期间这个标签可以作为一个父元素
* 配合指令可以一次控制多个元素
*
*
* 可以跟template配合的指令:
* v-if v-else v-for
*
* v-show不支持template标签
*
* v-show也没有v-else
*
* v-html/v-text不支持template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

   <!--<template v-if="boo">
       <div>我是div部分</div>
       <div>我也是div</div>
       <div>我跟上面一样</div>
   </template>

    <template v-else>

        <span>我是span部分</span>
        <span>我也是span</span>
        <span>哈哈</span>

    </template>


  <template v-for="(item,index) in arr">
      <div>{{item}}</div>
      <div>{{item}}</div>
      <div>{{item}}</div>
      <hr>
  </template>-->

    <!--v-show不能在template上面-->
   <!-- <template v-show="boo">

        <div>我是div</div>

    </template>-->

    <!--v-html和v-text不能在template上面-->
    <!--<template v-html="msg">
        我是哈哈
    </template>-->
    

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

        var vm=new Vue({
            el:'#app',
            data:{
               boo:true,
                arr:["张飞","张菲菲","飞飞"],
                msg:"我是普通文本"
            }
        });
</script>
</body>
</html>

通过v-on指令绑定事件

自定义的标签要用@click.native="show"

* 步骤:
* 1.在标签上面 v-on:事件名称="驱动函数名称"
*
* 2.在vue中跟data同级的位置定义methods:{}
*
* 3.在methds的大括号里面定义事件的驱动函数
* methods:{
* 驱动函数1:function(){
*
* },
* 驱动函数2:()=>{
*
* },
* es6推出一种在大括号里面定义函数的格式简化写法
* 驱动函数3(){
*
* }
* }
*
* v-on指令绑定事件的简化写法:
* @事件名称="驱动函数"
*
* es6推出的:
* var per={
* name:"小砌墙",
* show(){
*
* },
* walk(){
* }
* }

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
        <p>
            <input type="text" v-model="msg">
        </p>
            <!--红色不用管  如果有强迫症 就 alt+enter 自动ws给添加一个命名空间(没什么用)-->
        <button v-on:click="show">我是按钮</button>
        <button v-on:click="change">切换显示隐藏</button>
        <button @click="show">简化写法的绑定事件</button>
        <button @click="gettext">获取输入框内容</button>
        <button @click="chuan(3)">给事件传参</button>
         <div id="box" v-show="boo"></div>

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

    /*var per={
        name:"小砌墙",
        show(){ //是针对 函数名:function(){} 的简化写法
            console.log("请不要秀",this);//是当前per对象
        },
        walk(){
            console.log("走两步",this);//是当前per对象
        }

    }
    per.show();
    per.walk();*/

        var vm=new Vue({
            el:'#app',
            data:{
                msg:'Hello Vue!',
                boo:true
            },
            methods:{
                show(){
//                    alert("你点我干嘛?")
//                    调用当前vue中data里面的变量
                    this.msg="哈哈哈";//this指的是当前vue对象
                    //要想再事件驱动函数里面 调用data的变量 记得一定要加this !!!!!
                },
                change(){
                    this.boo=!this.boo;

                },
                gettext(){
                    alert("输入框的内容是:"+this.msg);
                },
                chuan(a){
                   alert(a)
                }
            }
        });
</script>
</body>
</html>

vue中的event对象

@事件名称="事件驱动函数($event)" 固定必须这样获取

如果想要给事件传参数
1.不需要event的情况下
@事件名称="驱动函数(参数1,参数2,...)"
在驱动函数里面用形参接收获取就好
2.如果需要event还需要传参的情况下,一般都把event写到参数列表第一个
@事件名称="驱动函数($event,参数1,参数2...)"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="show($event)">获取事件对象</button>
    <button @click="demo($event,2,3)">事件对象和参数一起传</button>
</div>
<script src="js/vue.js"></script>
<script>

        var vm=new Vue({
            el:'#app',
            data:{
                msg:'Hello Vue!',
            },
            methods:{
                show(e){
                    console.log(e);

                },
                demo(e,a,b){
                    console.log(e,a,b);
                }
            }
        });
</script>
</body>
</html>

事件修饰符

官网地址 https://cn.vuejs.org/v2/guide/events.html

就是在原有事件的后面添加一个修饰符用作限定:
格式:
@事件名称.修饰符="驱动函数"

修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>

按键码:
@keydown.键盘码
@keydown.up(单词)
这两种都可以触发

  <p>
        测试按键码(无修饰符):<input type="text" @keydown="show($event)">
    </p>

    <p>
        <!--测试按键码(事件修饰符):<input type="text" @keydown.enter="demo()">-->
        <!--测试按键码(事件修饰符):<input type="text" @keydown.up="demo()">-->
        <!--测试按键码(事件修饰符):<input type="text" @keydown.k="demo()">-->
        <!--测试按键码(事件修饰符):<input type="text" @keydown.space="demo()">-->
        <!--测试按键码(事件修饰符):<input type="text" @keydown.plus="demo()">-->
        测试按键码(事件修饰符):<input type="text" @keydown.107="demo()">
    </p>

事件修饰符解决默认事件
@contextmenu.prevent="test"

    <div id="box" @contextmenu.prevent="test">   </div>

事件修饰符解决事件冒泡

@click.stop="inner"

 <div id="inner" @click.stop="inner"></div>  </div>

只触发一次的事件修饰符

@click.once="hehe"

<div id="kox" @click.once="hehe">
        我只能点一次
    </div>

<div v-on:click.self="doThat">...</div>

yanghainan0318

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端-Vue-v-html,v-cloak,v-model,template,v-on,event,事件修饰符

v-html和v-text专门用来渲染标签内容的在一定程度上可以避免 mustache语法在加载缓慢时闪烁问题 v-html="变量" v-text="变量" 如果标签本身有内容那么加载完成后会被覆盖显示变量所指向的内容如果使用mustache语法渲染那么会出现闪烁问题要使用这两个指令渲染哪怕加...
复制链接

扫一扫