文档章节

02_表单空间绑定

AllenOR灵感
 AllenOR灵感
发布于 2017/09/10 01:18
字数 392
阅读 1
收藏 0

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

本文转载自:http://www.jianshu.com/p/2b5b2a39ec78

共有 人打赏支持
AllenOR灵感
粉丝 10
博文 2635
码字总数 83001
作品 0
程序员
开源 Web 开发平台 Meteor 的路线图

Meteor是一个开源的的Web开发框架,可以帮助你在短时间内创建高质量的Web应用程序,无论你是有经验的开发者还是新手。 今年7月份,Meteor获得了来自Andreessen Horowitz和Matrix Partners两家...

oschina
2012/11/26
2.9K
6
PHP 开源网站管理系统 - POSCMS

POSCMS 介绍 PHP 开源网站管理系统(PhpOpenSourceCMS,简称POSCMS)以开放、开源、灵活为产品理念,基于 PHP+MYSQL+CI 框架开发的开源 Web 内容管理系统,程序完美兼容 PHP7 ,并在 PHP7 基...

天睿云计算
2017/05/19
0
1
又拍云 WordPress 远程附件上传插件【升级版】

又拍云以 CDN 为核心业务,另外提供云存储、云处理、云安全、流量营销等服务,有开放且可扩展的API,以及开放的SDK和第三方插件,还针对开发者启动了 又拍云联盟 活动,可以每月获取免费空间...

yvette233
2017/03/06
365
3
nice Validator 0.5.0 发布,jQuery智能表单验证

简单、智能、令人愉悦的表单验证方案。内置强大的验证机制,适用于各种简单和复杂的应用场景。 支持自动初始化,完全不用写js也可以验证表单。 支持主题机制,多规则绑定,事件驱动,国际化。...

JonyZhang
2013/10/08
915
7
02-老马jQuery教程-jQuery事件处理

1. 绑定简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件的方式,可以让我绑定多个事件处理程...

aicoder
2017/11/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java序列化(四) - 实现Externalnalizable接口

实现Externalnalizable接口 实现Externalnalizable接口 package meng.springboot.demo.obj;import java.io.Externalizable;import java.io.IOException;import java.io.ObjectInput......

晨猫
26分钟前
0
0
php 日志库获取调用方的代码文件地址和代码行数

在使用其他语言的打印日志的时候,经常能看到打印日志时带上文件地址和代码行数,对于调试和查找问题非常方便,但是 php 日志库里则很少见到这个功能,但这个功能还是可以实现的。 关键点就是...

anoty
32分钟前
7
0
Android Studio如何批量导入全部包import

当需要导包时,Android Studio有单个导包快捷键 Alt+Enter 但是没有全部的包 但是可以在设置里设置Auto Import自动导入功能

lanyu96
34分钟前
0
0
六款优秀的 Linux 基准测试工具

基准测试是指运行计算机程序去评估硬件和软件性能的行为。硬件基本测试包括评估处理器,内存,显卡,硬盘,网络等不同组件的性能。基准测试有两类: 复合和应用。复合基准对一个硬件执行压力...

openthings
36分钟前
2
0
什么是阿里云容器服务?

关于阿里云容器服务的详细内容:阿里云容器服务使用教程 容器服务(Container Service)提供高性能可伸缩的容器应用管理服务,支持用 Docker 容器进行应用生命周期管理,提供多种应用发布方式...

mcy0425
37分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部