关于vue指令v-on、v-bind等笔记

45 阅读 0 评论 30 点赞

我是靠谱客的博主含糊皮带，最近开发中收集的这篇文章主要介绍关于vue指令v-on、v-bind等笔记，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.v-on指令

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

 v-on 缩写  v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click
    	<!-- 完整语法 -->
    	<a v-on:click="doSomething">...</a>
    	<!-- 缩写 -->
    	<a @click="doSomething">...</a>

2.v-bind 指令

 v-bind指令用于设置HTML属性：v-bind:href  缩写为 :href

 	<!-- 完整语法 -->
    	<a v-bind:href="url">...</a>
    	
   .	<!-- 缩写 -->
    	<a :href="url">...</a>

3.Compute 计算属性

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

4.组件注册

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

5. 配合额外的参数使用 $emit：

Vue.component('magic-eight-ball', {
•	  data: function () {
•	    return {
•	      possibleAdvice: ['Yes', 'No', 'Maybe']
•	    }
•	  },
•	  methods: {
•	    giveAdvice: function () {
•	      var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
•	      this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
•	    }
•	  },
•	  template: `
•	    <button v-on:click="giveAdvice">
•	      Click me for advice
•	    </button>
•	  `
})
<div id="emit-example-argument">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>
new Vue({
  el: '#emit-example-argument',
  methods: {
    showAdvice: function (advice) {
      alert(advice)
    }
  }
})

6. forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。

7.选择框的设定

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
•	text 和 textarea 元素使用 value 属性和 input 事件；
•	checkbox 和 radio 使用 checked 属性和 change 事件；
•	select 字段将 value 作为 prop 并将 change 作为事件