第一步,创建静态页面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中数据双向绑定的原理是什么等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)