vue基础操作

vue基础语法

• v-text && v-html

  v-text会将整个content内容显示到页面

  v-html同样会将content内容显示到页面，但是若content内容是html格式，会解析

  如下面示例，content是a标签，v-text会直接显示；而v-html会将其解析为a标签。

      <div id="app">
        hello world
        <p v-text="content"></p>
        <p v-html="content"></p>
      </div>
  
      <script>
        var app = new Vue({
          el: "#app",
          data: {
            content: "<a href = 'http://www.baidu.com'>百度</a>",
          },
        });
      </script>  
  

  

• v-bind

  语法 <h1 v-bind:title="title”>或者

  <h1 id="app" :title="title" class="cls">{{ msg }} haode</h1>
  
  <script>
        var app = new Vue({
          el: "#app",
          data: {
            msg: "this is h1 ",
            title: "this is my tittle",
          },
        });
  </script>
  
  

• v-on:click 点击事件

• v-on:dblclick 双击事件

• v-on:click 等价于 @click

      <div id="app">
        <p><input type="button" value="点击事件on" v-on:click="doit" /></p>
        <p><input type="button" value="点击事件@" @click="doit" /></p>
        <p><input type="button" value="双击事件@" @dblclick="doit1" /></p>
        <p @click="changemassane">{{ message }}</p>
      </div>
      
      
      <script>
        var app = new Vue({
          el: "#app",
          data: {
            message: "love you",
          },
          methods: {
            doit: function () {
              window.alert("点击事件！");
            },
            doit1: function () {
              window.alert("双击事件!");
            },
            changemassane: function () {
              this.message += ", me too!";
            },
          },
        });
      </script>
  

  ---

• 修饰符

  • .stop 阻止冒泡

    多个嵌套元素，都绑定了监听事件，点击该元素后，只执行该元素的方法，不会执行父元素的方法。

    例如：<div @click="fun1"><p @click="fun2"><button @click.stop="fun3">

    此时，点击button，只会执行fun3，不会执行fun1和fun2。

    若button中无.stop时，fun1 fun2 fun3都会执行

  • .once 只执行一次

  • .prevent 阻止默认事件

    比如a标签，绑定添加.prevent修饰符后，不会跳转页面，只执行绑定的click方法

  • .self 只有点击本身元素时，才会触发绑定的事件

    如.stop示例所示，若p标签添加.self修饰符，当点击button时，fun1 和fun3会执行，fun2不执行

  • .capture 捕获机制

    默认是冒泡机制，即从内层元素开始执行，然后执行父元素方法

    捕获机制正好和冒泡机制相反。