Vue 第一天 v-cloak 防闪烁，v-bind 属性绑定，v-on事件绑定，v-text文本绑定，事件修饰符 stop,prevent,once,capture,self作用

所有 HTML元素必须都在指定的范围。

 <div id="app">
    被操作的元素和数据必须在此div内部。
 </div>

  <script >

   const vm=new Vue({

    el:'#app'

});

</script>

1.如何解决差值表达式闪烁问题

<style>

<!-- 新建属性选择器-->

[v-cloak]{

 display:none;

}

</style>

<body>

<div  v-cloak   > {{msg}}</div>

<script>

const obj=new Vue({

 data:{
 msg:'123'

  msg1:"<a>123</a>"
 }

});

</script>

</body>

网页加载是不会再出现 {{}} 插值表达式闪烁问题；

2. v-text作用

v-text 只能显示文本，即将 msg结果显示再 div中；

3.v-html 作用是能将 msg1 渲染成超链接；

不能渲染 html 代码

4. v-bind 作用

将按钮的 msg的值绑定到按钮的title 属性； v-bind 能将 某个属性值当做JavaScript表达式， <input type="button" v-bind:title="msg+' 456' " /> 这样操作后 title 值变成 123456，为方便大家使用可将 v-bind: 直接写作 :title="msg+'123' " 同样能达到上述结果。v-bind只能实现数据单项绑定

5.v-on 作用

v-on 专门用于绑定事件.

<body>
    <div id="app">
        <input     v-on:click="show" class="sch" >
        <button    @click="show"> {{msg}} </button>

    </div>
    <script src="Vue.js" type="text/javascript"></script>
            <script type="text/javascript">
         const ob = new Vue({
            el:"#app",
            data: {
                msg: "123",
                msg1:"123456"
            }, methods: {
                show: function () {

                    alert("v-on 绑定事件！！");

                }

            }
              

        });
    </script>
    
</body>

以上绑定了文本框和按钮的单击事件； v-on:click 可以省略写作 @click

6.vue 中访问 data 中的数据

可以用 this.变量，如 this.msg

7. stop 和prevent 作用

stop 阻止冒泡事件发生； prevent 阻止默认行为发生；

  <div class="outer" @click="outerClick">
            外部外部外部外部外部
            <div class="inner" @click.stop="innerClick">   内部 </div>
            外部外部外部外部外部
        </div>

 <a href="http://www.baidu.com" @click.prevent="outerClick"    > 百度</a>

在@click 后边加上 .stop 可阻止时间冒泡。 @click.prevent 可阻止超链接的默认行为发生，即点链接不能链接到百度。

8.capture 作用

  <div class="outer" @click.capture="outerClick">
            外部外部外部外部外部
            <div class="inner" @click="innerClick">   内部 </div>
            外部外部外部外部外部
  </div>

在外层div 的单击事件中加入 .capture 关键字当点击 “内部”文字时先触发外层div事件，再触发内部div单击事件

9. self 作用： self 放在外层点那个元素触发那个元素的单击事件

外部外部外部外部外部

外部外部外部外部外部

</div>

10. once 代表事件只发生一次

<button @click.once="outerClick"> 按钮 </button>
按钮的单击事件只发生一次

上述 7-10 事件修饰符可以串联 @click.prevent.once 表示阻止默认事件一次。

<a href="http://www.baidu.com" @click.prevent.once ="outerClick"> 百度</a>

第二次不在阻止。第二次点击可访问百度网站

11. vue 给元素设置 class

注意 a,b 两个修饰类必须定义在 head 标记内部。否则不起作用。

<head>
<style>

        .a {
            font-size: 80px;
        }

        .b {
            color: green;
        }
.f{
  font-size:80px;
}

    </style>
</head>

<body>
<div :class="['a','b']">   vue 绑定 多个class   </div>

</body>

:class 中可以写表达式

 <div :class="['a','b' ，{   'f':flag }]">   vue 绑定 多个class   </div>

data 中 flag 为 true 则应用 f 类，否则不应用。其他细节见教程 https://www.bilibili.com/video/BV11s411A7h6?p=15

posted on 2021-10-14 23:56 码农at突泉阅读(137) 评论(0) 收藏举报

刷新页面返回顶部

码农at突泉