vue 指令

最新推荐文章于 2024-03-08 19:18:48 发布

ThinkPet

最新推荐文章于 2024-03-08 19:18:48 发布

阅读量215

点赞数

分类专栏： WEB前端文章标签： vue 指令

本文链接：https://blog.csdn.net/ThinkPet/article/details/86671804

版权

WEB前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 指令</title>
    <style>
      [v-cloak]{
          display: none;
      }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用v-cloak 能够解决网速慢时 插值表达式闪烁的问题 -->
        <p v-cloak>++++ {{msg}}  - - --</p>
        <h4 v-text="msg">======</h4>
        <!-- 默认v-text 是没有闪烁问题的 -->
        <!-- v-text会覆盖元素中原本的内容，但是插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空 -->
    
       <div v-html="msg2">=-=-=-=-=-=</div>
       <!-- v-html 会输出带html标签的文本,html标签也会被解析 -->
       <!-- v-text v-html 都会覆盖原有元素中的内容 -->

       <input type="button" value="按钮" v-bind:title="mytitle + '123' ">
       <!-- v-bind 是一个用于绑定属性的指令 -->
       <!-- v-bind 简便用法如下 -->
       <input type="button" value="测试"  :title="mytitle">
       <!-- v-bind 指令可以被简写为  :要绑定的属性 -->
       <!-- v-bind 中，可以写合法的js表达式 -->

       <!-- vue中提供了 v-on:  事件绑定机制 -->
       <input type="button" value="按钮3" :title="mytitle"  v-on:mouseover="show">
       <!-- v-on:click 鼠标点击事件 -->
       <!-- v-on:mouseover 鼠标滑过事件 -->
       <input type="button" value="按钮4"  :title="mytitle"  @click="show">
    </div>
    <script src="./lib/vue.js"></script>

    <script>
      var vm =new Vue({
          el:'#app',
          data:{
              msg:'vue测试',
              msg2:'<h1>h1标签测试</h1>',
              mytitle: '这是一个自己定义的title'
          },
          methods:{  //这个methods属性中定义了当前vue实例所有可用的方法

            show:function(){
                alert('hello')
            }

          }
      })
    </script>

    <!-- 
        v-bind vue提供的属性绑定机制  缩写是 :
        v-on   vue提供的事件绑定机制  缩写是 @

     -->



</body>
</html>