Vue杂记之——v-model&&v-bind

写在前边

暑假的时候学vue，但是当时没有整理导致后来使用的时候对一些基础概念有些遗忘，尤其是自己的理解出现了些许偏差。在此查漏补缺

作为vue最基础的指令，v-bind和v-model无疑在数据传递，绑定等方面有着多种多样的应用，下面我们对他们进行一次汇总

v-bind

简写

• “v-bind:“可以简写作”:”

绑定class

• 动态切换

v-bind:class="{}"的写法可以动态的切换class，使得用户可以通过js切换不同样式的css，语法相较jq的addClass，removeClass更加简单直观

<!-- HTML -->
<ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<!-- JS -->
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true
    }
})

如图，可以通过控制对象中类命的至来决定是否选择其对应的css样式

• 直接绑定

亦可直接绑定数据中的对象,相当于上一种情况的一种封装，在data种更容易辨别（尤其在data种属性较多的情况下）

<!-- HTML -->
<ul class="box" :class="classObject">
    <li>Vue</li>
    <li>Node</li>
    <li>React</li>
</ul>

<!-- CSS -->
var vm= new Vue({
    el:‘.box‘,
    data:{
        classObject:{
            "textColor" : true,
            "textSize" : false //不渲染，注意看下面的截图
        }
    }
})

数组语法

• 将数组传给v-bind:class，以应用一个class列表

<!-- HTML -->
<ul class="box" :class="[classA, classB]">
    <li>Vue</li>
    <li>Node</li>
    <li>React</li>
</ul>

<!--JS-->
var vm= new Vue({
    el:".box",
    data:{
        classA : "textColor",
        classB : "textSize"
    }
})

• 同时还可以根据条件切换class哦
  • 比如三目运算符

<!-- HTML -->
<ul class="box" :class="[isA ? classA : classB]">
    <li>Vue</li>
    <li>Node</li>
    <li>React</li>
</ul>

<!-- JS -->
var vm= new Vue({
    el : ".box",
    data : {
        classA : "textColor",
        classB : "textSize",
        isA : false 
    }
})

• 对于多个class还可以这样

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

绑定内联样式

• （这个真的不太想写了，和上边的基本一样，只不过将属性弄到了data里边）

<!--HTML-->
<div id="box" :style="styleObject">Hello World</div>

<!-- JS -->
var vm= new Vue({
    el:‘#box‘,
    data:{
        styleObject:{
            color : "red",
            fontSize : "30px"
        }
    }

v-model

Vue种，v-model主要用域在input（中的button，select）、textarea元素上进行双向数据绑定。但其本质是语法糖，负责舰艇用户的输入事件以及更新数据

举个栗子：

<input v-model="message">
<input v-bind:value="message" v-on:input="message = $event.target.value" />
<input :value="message" @input="message = $event.target.value" />

虽然这哥仨长得不一样，但是本质上实现的功能是一样的

• v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data选项中声明初始值

由于是双向绑定，所以无论更改父组件的值还是子组件的值，其对应（子/父）组件的值

不过具体细节呢，由于本人才疏学浅，就暂且不误导大家啦，下面的部分是我从简书大佬“Yi罐可乐”那里搬运的，Vue 进阶教程之：详解 v-model

大佬主要解决了我对v-model中input作为触发事件名称的疑问，下面我们来一起看一下：

<div id="demo">
  <currency-input v-model="price"></currentcy-input>
  <span>{{price}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>
<script>
Vue.component('currency-input', {
  template: `
    <span>
      <input
        ref="input"
        :value="value"
        <!--为什么这里把 'input' 作为触发事件的事件名？`input` 在哪定义的？-->
        @input="$emit('input', $event.target.value)"
      >
    </span>
  `,
  props: ['value'],// 为什么这里要用 value 属性，value在哪里定义的？貌似没找到啊？
})

var demo = new Vue({
  el: '#demo',
  data: {
    price: 100,
  }
})
</script>

事实上，这一切都是语法糖

<currency-input v-model="price"></currentcy-input>
<!--上行代码是下行的语法糖-->
<currency-input 
    :value="price" 
    @input="price = arguments[0]">
</currency-input>

给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 ‘input’ 值作为给组件绑定事件时的事件名