vue-数据绑定

vue-数据绑定

在使用数据绑定的过程中发现了一些问题，但是从官方文档和一些教程中都没看到满意的答案，作为一个小白，干脆把自己做的这个小例子和一些思考写下来 。

v-model和v-bind等绑定数据方式有什么不同

绑定数据有三种方式
（1）一种是插值，也就是{{name}}的形式
（2）一种是v-bind
（3）还有一种是v-model
其实可以看成两类，一类是双向绑定，一类是单向绑定

单向绑定
用vue实例里的data的变量，动态给模板里对应的部分赋值，也就是说data变量的值决定了它在组件中实际的值.
data的变量—>模板中具体的值

（1）插值{{name}}和v-bind就属于单向绑定
{{name}}的形式比较好理解，就是以文本的形式和实例data中对应的属性进行绑定。当data.name改变的时候，文本内容name也会相应改变
(2)v-bind类似，v-bind的语法大概是这样

<p v-bind:class="status">
data(){
	return {
			status:''
	}
}

data.status值会赋值给模板里的class的属性值，也就是说data.status的值改变，对应的class后面的属性值也会跟着改变。适合html的大部分属性，适用于css的动态效果
还有一个需要注意到的地方是，单向绑定，data里面的值会影响到控件里具体渲染的值，因此我们也可以动态改变data的值来修改v-bind、{{}}渲染的值

在这里我们实现，用按钮动态改变data.status的值，我们可以发现对应div :class后面的类名也随之动态改变

<template>
    <v-app>
        <v-container>
            <v-flex>
                    <div :class="status">{{status}}</div>
                <v-btn @click="change">ChangeStatus</v-btn>
            </v-flex>
        </v-container>
    </v-app>
</template>

<script>
    export default {
        data (){
            return {
                status:'RUNNING'   
            }
        },methods:{
            change(){
                if(this.status=='RUNNING')
                	this.status='STOPPED';
                else
               		this.status='RUNNING'
            }
        }
    }
</script>
<style>
.RUNNING{
    color:red;
}
.STOPPED{
    color:yellow
}
</style>

效果如下：
最开始的时候，v-bind的class使用的是status=RUNNING，当按钮按下时，改变了data里面的status变量，可以看到对应的v-bind:class也随之改变

点击按钮后，改变为

双向绑定
v-model主要实现的就是双向绑定，一方面它会和v-bind和{{name}}一样，当data.name的值发生改变的时候，随之改变。同时，另一方面，组件中的v-model的input值的改变，也会让实例里的data.name发生改变。v-model主要是用在表单控件上。
data.name改变—>中的name的值
input中的name改变---->data.name改变

<label><input v-model="name">{{name}}</label>
data:{
	return{
		name:""
	}
}

v-bind是怎么实现动态绑定的

网上大部分的v-bind绑定的语法分为对象语法和数组语法，常用的属性绑定有：
v-bind绑定html的class
v-bind绑定内联样式style

对象语法
（1）可以向class传递一个对象
json格式写法

<div class="static"
v-bind:class="{ red:isRunning, yellow:isStoped, green: isNotset }">
</div>

data: {
	isRunning: true,
	isStoped: false,
	isNotset: false
}

在渲染时，class的哪些属性值会被显示，取决于isRunning,isStoped,isNotset三个变量的布尔值，他们中的一个或者多个都可以被显示。同时，v-bind:class属性可以和普通的class属性共存。

object写法

<div class="static"
v-bind:class="classProject">
</div>

data: {
classProject: {
	red: true,
	yellow: false,
	green: false
	}
}

同理，和上面的属性类似，只是把这些属性都封装到了一个object里面

数组语法
（1）用数组列表添加多个类名

<div v-bind:class="[activeClass, errorClass]">
data: {
	activeClass: 'active',
	errorClass: 'text-danger'
}
//给这些变量赋具体的值

（2）条件切换表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

用三元表达式，isActive的值将决定是使用activeClass还是errorClass

一个简单的小例子

我做了一个小例子，这个例子是想要实现，不同的status（RUNNIING,STOPPED,NOTSET）值，这个控件会展示不同的效果。
因为status多于两个，不方便使用三元表达式。

根据上面常用的语法，我先写了一个比较复杂的

<template>
    <v-app>
        <v-container>
            <v-flex>
                <div v-for="item in items">
                    <div :class="{red:item=='RUNNING',yellow:item=='STOPPED',green:item=='NOTSET'}">{{item}}</div>
                    <!--这里的布尔值是直接通过一个==判断来实现的，不一定要是一个boolean类型的变量-->
                </div>
            </v-flex>
        </v-container>
    </v-app>
</template>

<script>
    export default {
        data (){
            return {
                items:['RUNNING','STOPPED','NOTSET']    
            }
        },methods:{
        }
    }
</script>
<style>
.red{
    color:red;
}
.yellow{
    color:yellow
}
.green{
    color:green
}
</style>

普遍出现的v-bind语法基本都是通过布尔值来控制某个类名是否出现，但后来我发现，其实可以直接用变量给class赋值，并不需要全都使用boolean类型的值那么复杂

<template>
    <v-app>
        <v-container>
            <v-flex>
                <div v-for="item in items">
                    <div :class="item">{{item}}</div><!--直接将item的值赋值给class-->
                </div>
            </v-flex>
        </v-container>
    </v-app>
</template>

<script>
    export default {
        data (){
            return {
                items:['RUNNING','STOPPED','NOTSET']    
            }
        },methods:{
        }
    }
</script>
<!--class类名对应的样式-->
<style>
.RUNNING{
    color:red;
}
.STOPPED{
    color:yellow
}
.NOTSET{
    color:green
}
</style>

可以看到直接用变量赋值也是可以的。

以下是主要参考的两篇博客
[1]vue中v-model和v-bind绑定数据的异同: https://www.tangshuang.net/3507.html
[2]Vue- 对象语法 v-bind:class与对象语法的使用（重要: https://blog.csdn.net/a250758092/article/details/58604172

总而言之，刚刚开始接触vue，可能直接参考官网上的一些文档可能并不会了解到原来可以这么用那么用，而且官网上有些解释稍微显得有些晦涩和简单。自己动手试了一下以后才会更加理解。
上面写的语言可能不够专业，就是自己的一些学习的理解，如有错误，愿闻其详。