如何利用Vue.js库中的v-bind绑定样式属性

利用Vuejs库中的v-bind绑定样式属性：

第一步，创建静态页面vbindhtml，并引入vuejs文件

第二步，在主体里插入一个div标签元素，并在div中插入img元素，利用v-bind绑定img的src属性

第三步，利用Vuejs代码绑定src属性，默认为项目中的

第四步，由于比较小，添加一个间隔，padding属性

第五步，预览该静态页面，这时在页面上显示一个小

第六步，打开浏览器下方调试工具，可以看到div中的img的src属性值

1双向绑定可以绑定到同一个数组

<input type="checkbox" value="Jack" v-model="checkedNames">

<label for="jack">Jack</label>

<input type="checkbox" value="John" v-model="checkedNames">

<label for="john">John</label>

<input type="checkbox" value="Mike" v-model="checkedNames">

<label for="mike">Mike</label>

<br>

<span>Checked names: {{ checkedNames | json }}</span>

这样可以不做任何处理，获得所有checked的checkbox。

2可是如果需要初始化渲染，一部分checkbox被预选中，v-model需要绑定一个boolen值checked:

<tr v-for="item in list">

<td>

<input type="checkbox" :value="itemvalue" v-model="itemchecked" />

</td>

</tr>

new Vue({

el: 'body',

data: {

list: [{checked:true,value:'a'},{checked:false,value:'b'}]

}

});

Vuejs（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vuejs 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，其中比较关键的是数据劫持，下面咱们看一个例子。

var obj = {} ObjectdefineProperty(obj,'name',{    get:function(){        consolelog("获取了");           },    set:function(){        consolelog('修改了');    }})objname = 'fei';objname

ObjectdefineProperty( )是用来做什么的？它可以来控制一个对象属性的一些特有 *** 作，比如读写权、是否可以枚举。

思路分析

实现mvvm主要包含两个方面，数据变化更新视图，视图变化更新数据：

三人行慕课

关键点在于data如何更新view，因为view更新data其实可以通过事件监听即可，比如input标签监听 'input' 事件就可以实现了。所以我们着重来分析下，当数据改变，如何更新视图的。

数据更新视图的重点是如何知道数据变了，只要知道数据变了，那么接下去的事都好处理。如何知道数据变了，其实上文我们已经给出答案了，就是通过ObjectdefineProperty(

)对属性设置一个set函数，当数据改变了就会来触发这个函数，所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了。

三人行慕课

思路有了，接下去就是实现过程了。

实现过程

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

1实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

流程图如下：

三人行慕课

function objServer(obj){     let keys = Objectkeys(obj);    keysforEach((item)=>{          definedActive(obj,item,obj[item])    })        return obj; } function definedActive(obj,item,val){    ObjectdefineProperty(obj,item,{        get(){            consolelog(`${item}获取了`)        },        set(newVlaue){            val = newVlaue;           consolelog(`${item}修改了`)        }    })}  let obj = objServer({    a:1,    b:2}) objaobjb obja = 2;objb = 3;

<el-form-item label="申请类型" prop="applyType">

<el-select v-model="paramptpFprojInfapplyType" :disabled="isDisabled"

clearable placeholder="请选择" size="small">

<el-option

v-for="item in applyTypes"

:key="itemvalue"

:label="itemlabel"

:value="itemvalue">

</el-option>

</el-select>

</el-form-item>

applyTypes 这个是个数组形式，存放的就是下拉框的内容，只要改变这个数组，自然下拉框的内容也就变了啊

Dep是Observer与Watcher之间的纽带，也 可以认为Dep是服务于Observer的订阅系统 。Watcher订阅某个Observer的Dep，当Observer观察的数据发生变化时，通过Dep通知各个已经订阅的Watcher。

Dep提供了几个接口：

addSub 和 depend这两个方法是用来关联Watcher实例和Dep实例的，这两种实例的关系是多对对的关系：

•  一个Dep实例可以关联多个Watcher实例

•  一个Watcher实例可以关联多个Dep实例

除了这些接口以外，Dep定义了两个实例属性和一个静态属性：

以上这些都很容易理解，难的在于depjs里面还定义了一个targetStack的东西：

笔者本着求知的精神，千辛万苦终于找到了大神的讲解：

到此为止，我们就明白了Dep类的实现原理，下一篇我们将了解Watcher类的实现。

以上就是关于如何利用Vue.js库中的v-bind绑定样式属性全部的内容，包括:如何利用Vue.js库中的v-bind绑定样式属性、vuejs怎样实现列表中checkbox的双向绑定及初始化渲、vue中数据双向绑定的原理是什么等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！