总结3

作者: 糖心m | 来源:发表于2017-07-24 23:23 被阅读18次

1.jQueryattrprop的区别

那么,什么时候使用attr,什么时候使用prop??

1.添加属性名称该属性就会生效应该使用prop.

2.是有true,false两个属性使用prop.

3.其他则使用attr

相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties)。只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes。prop应运而生了。

attr:

描述:获取匹配的元素集合中的第一个元素的属性的值。

attr( attributeName )

attributeName

类型: String

要获取的属性名称.attr()方法只获取第一个匹配元素的属性值。

prop:

描述:获取匹配的元素集中第一个元素的属性(property)值

prop( propertyName )

propertyName

类型: String

要得到的属性的名称.prop()方法只获得第一个匹配元素的属性值 。如果元素上没有该属性,或者如果没有匹配的元素。那么该方法会返回undefined值。

2.Angular绑定策略:

在angularjs的指令中存在着三种绑定策略,他们分别是’=’,’@’,’&’

全文讨论围绕下面这个例子,可在进入codepen编辑

See the Pen EjGbeB by Simplefatty (@Dreaking) on CodePen.

‘=’绑定策略

‘=or(=attr)’,双向绑定,将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像本地的数据双向绑定一样,本地属性会反映出父级数据模型中发生的变化,使用可以是=,自动绑定or = attr(属性名);

控制器中,我定义了title和text的值,这里

1

ng-transclude将指令包裹的内容放到了这段标签里面,即编译过后应该是

{{text}}

12345

使用可以是=,自动绑定or = attr(属性名);

从上面的例子我们可以知道

scope : {

title: '=expanderTitle'

}123

指令内的title绑定的值为expanderTitle中定义的值,即title

于是我们可以在template中引用{{title}},这里的{{title}}便是在指令隔离作用域上的scope(指令的隔离作用域便是通过这种方式来跟父级作用域联系的),这里的scope也可以这样写

scope : {

expanderTitle: '='//自动绑定

}123

这时候如果在template中想引用控制器作用域上的title,则要将template中的{{title}}改成{{expanderTitle}},这里可以理解是在指令的隔离作用域上给了父作用域上的title一个别名expanderTitle

@’绑定策略

‘@(or @attr)’,本地作用域属性,使用@将本地作用域同DOM属性的值进行绑定。

这里如果把指令上的scope改成

scope : {

title: '@expanderTitle'//自动绑定

}123

这个时候的{{title}}的值就是在DOM属性中expanderTitle的值,即title

同样也可以这样写

scope : {

expanderTitle: '@'//自动绑定

}123

这个时候把{{title}}改成{{expanderTitle}}就跟上面效果一样;

‘&’绑定策略

& or(&attr)’,父作用域绑定,通过&符号可以对父作用域进行绑定,已变在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。

这里把代码改一下,在指令scope中添加

onSend: '&'1

指令中的template改为

template : '

'

+ '

{{title}}'

+ '

'

+ '',1234

父级控制器中添加sendSomething方法

$scope.sendSomething=function(name){

alert(name);

}123

Dom中添加on-send的属性

{{text}}

123

这里便把指令中的onSend中的包装函数sendSomething在父级作用域中执行了,执行结果是弹出something;

同样这里的scope也可以改成onSend:’&onSend’形式;

3.Vue和angular区别?

1.vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架。

2.vue的双向邦定是基于ES5中的getter/setter来实现的,而angular而是由自己实现一套模版编译规则,需要进行所谓的“脏”检查,vue则不需要。因此,vue在性能上更高效,但是代价是对于ie9以下的浏览器无法支持

3.vue需要提供一个el对象进行实例化,后续的所有作用范围也是在el对象之下,而angular而是整个html页面。一个页面,可以有多个vue实例,而angular好像不是这么玩的

4.vue真的很容易上手,学习成本相对低,不过可以参考的资料不是很丰富,官方文档比较简单,缺少全面的使用案例。高级的用法,需要自己去研究源码,至少目前是这样。

相关文章

网友评论

      本文标题:总结3

      本文链接:https://www.haomeiwen.com/subject/xssikxtx.html