文档章节

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灵感
粉丝 11
博文 2635
码字总数 83001
作品 0
程序员
私信 提问
angular 课堂笔记 复习 脏值检测,表单验证

脏值检测表单验证表单元素name属性会映射到作用域上,Form元素name属性会直接映射到作用域上Input等表单元素name属性会映射到form元素对应 脏值检测 表单验证 表单元素 name属性会映射到作用...

毛太不容易
2018/01/12
0
0
PHP 开源网站管理系统 - POSCMS

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

天睿云计算
2017/05/19
0
1
Flask入门 表单Flask-wtf form原生与Bootstrap渲染(七)

(1) 原生的表单 模板页面,form表单 在manage.py中 在manage.py中将路由函数合并 (2) Flask-wtf表单 说明 : 是一个用于表单处理,校验并提供csrf验证的功能的扩展库 安装 : 作用: Flask-wtf能保...

善良小郎君
2018/06/02
0
0
PHP 开源网站管理系统poscms正式发布

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

天睿云计算
2017/02/15
3
0
02-老马jQuery教程-jQuery事件处理

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

aicoder
2017/11/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7安装RabbitMQ详细过程

由于RabbitMQ是基于Erlang语言开发,所以在安装RabbitMQ之前,需要先安装Erlang 1、环境: centos 7.1 内核版本3.10.0-229.el7.x86_64 Erlang 19.0.4版本 RabbitMQ 3.6.14版本 2、在线安装E...

秋至丶枫以落
19分钟前
1
0
6个使用KeePassX保护密码的技巧

虽然安全是个深奥的主题,但是你可以遵循几个简单的日常习惯来减小攻击面。本文将解释确保密码信息安全的重要性,并给出如何充分利用KeePassX的建议。 日益互联的数字世界使安全成为一个重要...

Linux就该这么学
21分钟前
1
0
2018最佳GAN论文回顾(下)

继上一篇《2018最佳GAN论文回顾(上)》,我又继续介绍了一个对于GAN的基于样式的生成器体系结构的新论文,提出了一个新的模型来应对这种挑战。 一种用于生成式对抗网络的基于生成器体系结构...

阿里云官方博客
23分钟前
0
0
UnsatisfiedLinkError sawindbg.dll

方法:搜索sawindbg.dll,然后将文件报错的目录下

洛水
今天
5
0
说说不知道的Golang中参数传递

本文由云+社区发表 导言 几乎每一个C++开发人员,都被面试过有关于函数参数是值传递还是引用传递的问题,其实不止于C++,任何一个语言中,我们都需要关心函数在参数传递时的行为。在golang中...

腾讯云加社区
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部