02_表单空间绑定

数据双向绑定(input即时展示)

Vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="demo">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>

<script>
var demo = new Vue({
    el: '#demo',
    data: {
        message: 'Hello Vue.js!'
    }
})
</script>
</body>
</html>

ReactJS 不采用ES6、不采用JSX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="root"></div>

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="remarkable.js"></script>
<script>
var MarkdownEditor = React.createClass({

    getInitialState: function() {
        return {value: 'Type some *markdown* here!'}
    },

    handleChange: function(e) {
        this.setState({value: e.target.value});
    },

    getRawMarkup: function() {
        var md = new Remarkable();
        return { __html: md.render(this.state.value) };
    },

    render: function () {
        return (
            React.createElement(
                'div',
                {className: 'MarkdownEditor'},
                React.createElement('h3', null, 'Input'),
                React.createElement(
                    'textarea',
                    {type: 'text',
                     onChange: this.handleChange,
                     defaultValue: this.state.value,
                     rows: '8'}
                ),
                React.createElement('h3', null, 'Output'),
                React.createElement(
                    'div',
                    {className: 'content',
                    dangerouslySetInnerHTML: this.getRawMarkup()})
            )
        )
    }

});

ReactDOM.render(
    React.createElement(MarkdownEditor),
    document.getElementById('root')
);
</script>
</body>
</html>

ReactJS 采用ES6 不采用JSX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="root"></div>

<script src="babel.js"></script>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="remarkable.js"></script>
<script type="text/babel">
class MarkdownEditor extends React.Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = { value: 'Type some *markdown* here!' };
    }

    handleChange(e) {
        this.setState({ value: e.target.value });
    }

    getRawMarkup() {
        var md = new Remarkable();
        return { __html: md.render(this.state.value) };
    }

    render() {
        return React.createElement(
            "div",
            { className: "MarkdownEditor" },
            React.createElement("h3", null, "Input"),
            React.createElement(
                "textarea",
                {onChange: this.handleChange,
                 defaultValue: this.state.value,
                 rows: '8'}
            ),
            React.createElement("h3", null, "Output"),
            React.createElement(
                "div",
                {className: "content",
                dangerouslySetInnerHTML: this.getRawMarkup()}
            )
        );
    }
}

ReactDOM.render(
    React.createElement(MarkdownEditor, null),
    document.getElementById('root')
);
</script>
</body>
</html>

ReactJS 采用ES6 采用JSX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="root"></div>

<script src="babel.js"></script>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="remarkable.js"></script>
<script type="text/babel">
class MarkdownEditor extends React.Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {value: 'Type some *markdown* here!'};
    }

    handleChange(e) {
        this.setState({value: e.target.value});
    }

    getRawMarkup() {
        var md = new Remarkable();
        return { __html: md.render(this.state.value) };
    }

    render() {
        return (
            <div className="MarkdownEditor">
            <h3>Input</h3>
            <textarea onChange={this.handleChange}
                       defaultValue={this.state.value} />
            <h3>Output</h3>
            <div className="content"
                 dangerouslySetInnerHTML={this.getRawMarkup()} />
            </div>
        );
    }
}

ReactDOM.render(
    <MarkdownEditor />,
    document.getElementById('root')
);
</script>
</body>
</html>

02_表单空间绑定

数据双向绑定(input即时展示)

推荐阅读更多精彩内容