Vue基础之常用指令

1. v-on:

   v-on指令是常见指令之一 ,主要用来在dom上绑定事件。其中v-on: 可以用  @代替例子如下

v-on:click="handleClick"

 2.v-bind

 v-bind 用来为标签属性绑定动态值,其中v-bind: 可以用 : 代替例子如下

// message是动态值
v-bind:title="message"

 3.v-model

  v-model用来为输入控件双向绑定数据 用户输入改变就会改变绑定的数据 数据改变也会改变控件的展示数据

v-model="inputVal"

 4.v-if

  v-if可以用来控制某个控件的展示与否 例子如下

 

// show是变量 true/false
v-if="show"

 5.v-html

  v-html 可以用来展示html标签而不会被自动转义

/*
   data(){
        return {
          message"<strong>hello world</strong>"
     }
  }

*/
v-html="message"

 6.v-once

  注册了v-once的标签 只会渲染一次v-once中的变量  即使变量变化也不会重新渲染

/*
  data(){
     return{
         message: "hello world"   
    }
  }
*/
v-once="message"

 7.动态属性名

  当属性名 不确定时 可以用[name]动态指定属性名

 

8.阻止默认事件修饰符 

  比如在点击事件时 可以用@click.prevent = "handleClick" 就可以在绑定事件的同时指定默认事件。