Vue——03——vue的指令v-cloak,v-text,v-html,v-bind,v-on,等

最新推荐文章于 2024-06-27 22:42:30 发布

野生小米椒

最新推荐文章于 2024-06-27 22:42:30 发布

阅读量167

点赞数

分类专栏： VUE框架

本文链接：https://blog.csdn.net/x1037490413/article/details/107037741

版权

VUE框架专栏收录该内容

33 篇文章 0 订阅

订阅专栏

调慢浏览器加载网页，Network ->Online-> Slow 3G
在vue中使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
   <style>
       [v-clock]{
           display: none;
       }
   </style>
</head>

<body>
    
<!-- v-cloak能够解决插值表达式闪烁问题
v-text是没有闪烁问题的 v-text会覆盖元素中原本的内容，但是插值表达式不会把整个元素的内容清空
v-bind:是vue提供的用于绑定属性的指令，可以写合法的JS表达式
v-on提供事件绑定机制
-->
   <div id="app">
       <p v-clock>+++++++{{msg}}-------</p>
       <h4 v-text="msg">========</h4>
       <h1 v-html="msg2"></h1>
       <!-- 也可以变量title+字符串 -->
       <input type="button" value='按钮' v-bind:title="mytitle+'123'">
       <!-- 可以简写省略掉v-bind -->
       <input type="button" value='按钮':title="mytitle+'123'">
       <input type="button" value="按钮" v-on:click="show">
       <!-- 缩写 -->
       <input type="button" value="按钮" @click="show">
   </div> 
   <script src="../lib/vue.js"></script>
    <script>
     var vm=new Vue({
         el:'#app',
         data:{
             msg:'123',
             msg2:'<h1>我是h1标签</h1>',
             mytitle:"这是一个title"
         },
         methods:{//这个methods属性中定义了当前vue实例所有可用的方法
                show:function(){
                    alert('你好');
                }
         }
     })

    </script>


</body>

</html>