JS动态绑定背景图片cover失效

JavaScript017

JS动态绑定背景图片cover失效,第1张

1、正常写JS动态css代码的时候,background-image:url(图片地址)。

2、这个图片地址能够直接不使用引号,但是使用绑定背景图片cover的时候,图片地址就必须加上引号。这是JS动态绑定背景图片cover失效的原因。

状态提升

定义:  两个或者多个组件共同使用共有状态的方式

使用范围:  两个组件提升到最近的父组件来完成状态的变化和保存;

解析:  一个组件有入参和出参

入参:使用

属性,但是子类元素不可以擅自修改其属性

            类比于受控组件 <input value={template} onChange={handChane}>

            自定义子组件也接收父组件传过来的 template  和方法 onTemplateChange(名字可以自定义)

            子组件可以调用this.props.onTemplateChange 

            父组件    在子组件标签引用  <TemplateChange  template={deelTemplate}   onTemplateChange = {this.handChange}></TemplateChange>

并且需要在render中 处理返回的参数,并使页面做出重新渲染

render(){

const deelTemplate = deelTools(this.state.template)

}

最好是在元素生成的时候就加上事件,不然的话比较麻烦。

在jquery中,你也可以用live()和delegate()这样的方法绑定元素,是实时监听的。

但是最好还是在元素生成的时候就加上事件:

$('#btn').bind('click', function(event) {

    /* Act on the event */

    $("<li>Hello</li>").appendTo("#list").bind('click', function(event) {

      /* Act on the event */

      console.log($(this).text())

    })

    

  })

在mootools中对应的方法:

// Creating an new anchor with an Objectvar myAnchor = new Element('a', {

    href: 'http://mootools.net',

    'class': 'myClass',

    html: 'Click me!',

    styles: {

        display: 'block',

        border: '1px solid black'

    },

    events: {

        click: function(){

            alert('clicked')

        },

        mouseover: function(){

            alert('mouseovered')

        }

    }})