vue指令 v-bind v-on v-model v-text v-html

一、v-bind--给标签属性设置vue变量的值

格式：v-bind:原生属性名="vue变量" / :原生属性=“vue变量”

 1、准备数据

data() {
    return {
      name: "小vue",
      obj: {
        age: 9,
        hobby: "eat",
      },
      a: "kk",
      ceshi: "abc",
      myLink: "https://www.baidu.com",
      myImg: "http://www.itcast.cn/2018czgw/images/logo2.png",
      count: 1,
    };
  },

2、使用v-bind

1.2.1给元素设置id值(v-bind可以直接省略 )

    
{{a}}
    
{{ceshi}}

1.2.2给a链接设置href属性

    百度
    百度

1.2.3给图片设置src属性

1.2.4给元素直接设置值

二、v-on:事件名--给元素设置事件

格式：v-on:事件/@事件

2.1给按钮设置点击事件

{{count}}

2.2给按钮点击事件封装函数

    {{count}}
    {{count}}
    {{obj.age}}

methods: {
    addFn() {
      this.count = this.count + 1;
    },
    seFn() {
      this.obj.age = this.obj.age + 1;
    },
  },

2.3把v-on简写成@

{{count}}
{{ count }}

2.4vue事件处理函数中，拿到事件对象

百度
百度

cFn(e){
      e.preventDefault()
    },
cFn1(num,e){
      e.preventDefault()
      console.log(num);
    }

2.4.1事件后面.修饰符

.stop--阻止事件冒泡

  阻止冒泡

.prevent--阻止默认行为

百度

.once--只执行一次指令

once

键盘事件 .enter--按下enter键执行

键盘事件.esc--按下取消键执行

三、v-model双向绑定

v-model用在哪里？暂时用在表单标签上（input select textarea）

v-model的作用：把vue的数据变量和表单的value属性双向绑定在一起

3.1v-model在input框上的使用

3.2v-model在select上的使用

北京
南京
天津

3.3v-model在遇到复选框时

非数组 关联的是复选框的checked属性

数组 关联的是value属性

使用方法一

布尔

flag:true,

使用方法二

喝酒
吃
打游戏

hobby:["喝酒"]

3.4v-model在input框中的应用总括

3.5v-model的三个常用修饰符 number trim lazy

{{num+1}}

此时有无lazy的效果等同于@input和@change

export default {
  data(){
    return {
      num:'',
      name:'',
      text:''
    }
  },
  methods:{
    fn1(){
      console.log('fn1');
    },
    fn2(){
      console.log('fn2');
    }
  }
}

四、v-text和v-html

 

{{str}}

export default {
  data(){
    return {
      str:'
hjkgd
'
    }
  }
}