数据双向绑定(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>
