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可以直接省略 )

    <P v-bind:id="a">{{a}}</P>
    <P :id="ceshi">{{ceshi}}</P>

1.2.2给a链接设置href属性

    <a v-bind:href="myLink">百度</a>
    <a :href="myLink">百度</a>

1.2.3给图片设置src属性

    <img v-bind:src="myImg" alt="">
    <img :src="myImg" alt="">

1.2.4给元素直接设置值

<p :id="'iii'"></p>

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

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

2.1给按钮设置点击事件

<button v-on:click="count=count+1">{{count}}</button>

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

    <button v-on:click="addFn">{{count}}</button>
    <button v-on:click="addFn()">{{count}}</button>
    <button v-on:click="seFn">{{obj.age}}</button>

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

2.3把v-on简写成@

<button v-on:click="addFn">{{count}}</button>
<button @click="addFn">{{ count }}</button>

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

<a href="www.baidu.com" @:click="cFn(e)">百度</a>
<a href="www.baidu.com" @:click="cFn1(4,$event)">百度</a>

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

2.4.1事件后面.修饰符

.stop--阻止事件冒泡

<div @click="fn4">
  <button @click.stop="fn3">阻止冒泡</button>
</div>

.prevent--阻止默认行为

<a href="www.baidu.com" @click.prevent="sonFn()">百度</a>

.once--只执行一次指令

<button @click.once="fn5">once</button>

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

<input type="text" @keyup.enter="fn6">

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

<input type="text" @keyup.enter="fn6">

三、v-model双向绑定

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

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

3.1v-model在input框上的使用

<input v-model="val">

3.2v-model在select上的使用

<select v-model="from">
<option value="北京市">北京</option>
<option value="南京市">南京</option>
<option value="天津市">天津</option>
</select>

3.3v-model在遇到复选框时

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

数组 关联的是value属性

使用方法一

<input type="checkbox" v-model="flag">布尔

flag:true,

使用方法二

<label><input type="checkbox" v-model="hobby" value="喝酒"/>喝酒</label>
<label><input type="checkbox" v-model="hobby" value="吃"/>吃</label>
<label><input type="checkbox" v-model="hobby" value="打游戏"/>打游戏</label>

hobby:["喝酒"]

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

<template>
  <div>
    <!-- 单选框 -->
    <input type="text" v-model="username" />
    <!-- 密码框 -->
    <input type="password" placeholder="请输入密码" v-model="password">
    <!-- 下拉框 -->
    <select v-model="city">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="hz">杭州</option>
    </select>
    <!-- 多选框 hobby是字符串对应布尔值 hobby是数组对应value-->
    <div>
      <input type="checkbox" v-model="hobby" value="吃饭">吃饭
      <input type="checkbox" v-model="hobby" value="睡觉">睡觉
      <input type="checkbox" v-model="hobby" value="打豆豆">打豆豆
    </div>
    <!-- 单选框 -->
    <div>
      <input type="radio" value="男" v-model="gender">男
      <input type="radio" value="女" v-model="gender">女
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "zs",
      password:'',
      city:'bj',
      hobby:[],
      gender:''
    };
  },
};
</script>

<style>
</style>

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

<input type="text" v-model.number="num">
<h1>{{num+1}}</h1>
<input type="text" v-model.trim="name">
<input type="text" v-model.lazy="text">

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

<input type="text" @input="fn1">
<input type="text" @change="fn2">

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

四、v-text和v-html

 

<div v-text="str"></div>
<div>{{str}}</div>
<div v-html="str"></div>

export default {
  data(){
    return {
      str:'<h1>hjkgd</h1>'
    }
  }
}