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更加简单直观

    
A
    
B
    
C



var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true
    }
})

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

• 直接绑定

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

    
Vue
    
Node
    
React



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

数组语法

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

    
Vue
    
Node
    
React



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

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

    
Vue
    
Node
    
React



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

• 对于多个class还可以这样

绑定内联样式

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

Hello World


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

v-model

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

举个栗子：

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

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

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

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

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

  
  {{price}}

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

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