Vue中的指令及应用合集(v-指令)

0. 模板语法

   {{ }}中绑定的也可以是单个表达式，不能是语句
   单个表达式：3 > 5 ?  'yes' :  'no'
   语句：var a = 20; // 凡是这种带分号的就是语句

    <p>{{ 3 > 5 ? 'yes' : 'no' }}</p>  
    // 页面渲染了 no

1. v-html 将字符串渲染成HTML标签

export default {
	 data(){
	    return{
	      link:"<a href='http://cn.vuejs.org'>vue官网</a>"
	    }
	  },
 }

    <p v-html="link"></p>

• 运行结果
  

2. v-bind:[ 缩写为‘:’ ] 动态绑定属性

export default {
  data(){
    return{
      classCurrent:"current"
    }
  },
}

<p v-bind:class="classCurrent"></p>
// 缩写
<p :class="classCurrent"></p>

• 运行结果
  

3. v-if/v-else 条件渲染，相当于if…else…

export default {
  data(){
    return{
      flag:'true'
    }
  },
}

// 如果v-if后的条件为true，则显示v-if指令标签的内容
// 否则，显示v-else指令标签的内容
    <p v-if="flag">是真的</p>
    <p v-else>是假的</p>

• 运行结果
  
• v-if/v-else也可以用于一整段代码的逻辑判断

    <div v-if="flag">
    	// flag为true,则只显示这部分内容
        <h3>我是第一段话</h3>
        <p>显示第一段话</p>
    </div>
    <div v-else>
        <h3>我是第二段话</h3>
        <p>显示第二段话</p>
    </div>

• 运行结果
  

4. v-show 控制内容显示/隐藏，相当于控制CSS的display:block/none;

如果需要频繁切换显示隐藏则使用 v-show，不需要频繁切换显示隐藏则使用v-if

export default {
  data(){
    return{
      flag:'true'
    }
  },
}

<p v-show="flag">测试v-show的显示隐藏</p>

• 运行结果
  
  

5. v-for 基于一个数组渲染一个列表ul>li

export default {
  name: 'HelloWorld',
  data(){
    return{
      lists:['苹果','菠萝','橘子','柠檬']
    }
  },
}

<ul>
   <h3>水果店里有什么？</h3>
   // :key="index"代表每一个li标签的唯一标识，方便Vue的工作
   <li v-for="(item,index) in lists" :key="index">{{ item }}</li>
</ul>

• 运行结果
  

6. v-for 将对象渲染为列表ul>li

export default {
  data(){
    return{
      info:{
        name:'苹果',
        price:'2.88/斤',
        condition:'已上架，未售完'
      }
    }
  },
}

<ul>
   <h3>苹果商品状态信息：</h3>
   <li v-for="(value,key,index) in info" :key="index">键-值：{{key}}:{{value}}</li>
</ul>

• 运行结果
  

7. v-on:[ 缩写为‘@’ ] 事件监听器，触发后可以运行事件关联的js代码

export default {
  data(){
    return{
      count:1
    }
  },
  methods:{
  // 事件处理方法addCountHandle
    addCountHandle(){
      // this指向当前组件对象
      this.count += 1;
    }
  }
}

// <button v-on:click="addCountHandle">加数按钮</button>
<button @click="addCountHandle">加数按钮</button>
<p>count值：{{count}}</p>

• 运行结果
  
• 事件处理函数中可以传入事件对象event，此处用了缩写e

methods:{
    addCountHandle(e){
      // this指向当前组件对象
      this.count += 1;
      e.target.innerHTML = '加数按钮' + this.count;
    }
}

• 运行结果
  
• 事件传参时用 $event

export default {
  data(){
    return{
      lists:['苹果','菠萝','橘子','柠檬'],
    }
  },
  methods:{
  // 接收参数item 和 $event传过来的事件对象event
    clickHandle(item,e){
       console.log(item);
       // 点谁谁变蓝
       e.target.style.color = 'blue';
    }
  }
}

<ul>
	// 传参时用 $event
    <li @click="clickHandle(item,$event)" v-for="(item,index) in lists" :key="index">{{item}}</li>
</ul>

• 运行结果
  
• 事件修饰符.prevent可以阻止默认事件，其他事件修饰符参考官方文档
  链接: Vue官方事件修饰符文档

 <a @click.prevent="preventHandle"   href="http://cn.vuejs.org">点我不跳转官网,而是触发preventHandle事件处理函数</a>

  methods:{
    preventHandle(){
      console.log('111');
    }
  }

• 运行结果
  

8. v-model 双向绑定表单数据，双向绑定即可读可写

• 何为双向绑定？v-model双向数据绑定是先用v-bind绑定value属性，再v-on指令给当前元素绑定一个input事件，即v-bind:value + v-on:input

export default {
    data(){
        return{
            message:""
        }
    }
}

// .lazy修饰符：就是表单失去焦点再提交数据进行展示 
   <input type="text" v-model.lazy="message">
   <p>表单输入数据展示:{{ message }}</p>

• 运行结果
  

9. v-slot:[缩写为‘#’] 为"具名插槽"传递插槽名称时使用

插槽用于组件之间传递HTML结构时使用

// App.vue
<SlotComponent>
	  <template v-slot:main>
        <p>我是主要文本</p>
      </template>

      <template v-slot:foot>
        <p>我是底部文本</p>
      </template>
</SlotComponent>

// SlotComponent.vue 
// 接收插槽结构用 <slot></slot>
<slot name="main">没有内容则显示默认值</slot>
<hr>
<slot name="foot">没有内容则显示默认值</slot>

10. 自定义指令

自定义指令一般单列出一个文件夹，因为项目越大，自定义指令越多，全放在main.js中，开发体验不好，代码耦合性过高，所以单独写出一个文件来。在main.js中引入自定义指令文件即可。

10.1 全局自定义指令

 //  src / directives / index.js
 import Vue from 'vue'

// 使用v-focus来使用这个指令
// v-focus
  Vue.directive('focus', {
    // inserted是指令提供的，相当于指令的生命周期
    // inserted自定义指令的钩子函数
    // inserted函数表示当绑定了该指令的元素被插入到dom时候会自动触发
    inserted(el){
      console.log(el); // HTML元素对象--当前元素对象
      el.focus();
    }
  })

// v-red
  Vue.directive('red',{
    inserted(el){
      el.style.color = "#ff0000";
    }
  })

// main.js 
import './directives'  // 全局自定义指令，在所有组件中生效

// 其他组件中，直接以 “v-..” 形式使用
<input type="text" v-focus>
<p v-red>Hello</p>

10.2 局部自定义指令

export default {
// 局部自定义指令 --- 只在当前组件中生效
directives: {
// 名字与指令对应的方式来添加自定义指令  v-green
  green: {
    	// 指令的定义
	    inserted: function (el) {
	      el.style.color="green";
	    }
  	}
  }
}

// 局部自定义指令的使用
<p v-green>我是局部指令</p>