文档章节

02_表单空间绑定

AllenOR灵感
 AllenOR灵感
发布于 2017/09/10 01:18
字数 392
阅读 1
收藏 0
点赞 0
评论 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
博文 2634
码字总数 82983
作品 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
angular 课堂笔记 复习 脏值检测,表单验证

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

毛太不容易
01/12
0
0
一步一步搞定InfoPath(02)--配置VSTA

一步一步InfoPath(02)--安装VSTA环境 VSTA(Visual Studio Tools for Applications)安装 计算机需要安装了 Microsoft .NET Framework 2.0 或更高版本。默认情况下,当您安装 InfoPath 时,并...

技术小胖子
2017/11/15
0
0
Flask入门 表单Flask-wtf form原生与Bootstrap渲染(七)

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

善良小郎君
06/02
0
0
nice Validator V1.0.10 发布,领先的表单验证解决方案

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

我想有个家
2017/03/24
1K
4
JEPF 3.3.1 发布,我们的软件机床

JEPF 3.3.1 发布了,更新如下: 修复Bug [B00195]工作流修改历史记录分支排序问题. [B00196]视图操作不方便问题,选中字段,点击列会取消其他选中问题解决. [B00197]显隐表达式indexof表达式...

JESAAS
2017/02/13
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

rabbitmq学习记录(三)

工作队列:一个生产者,多个消费者,生产者直接将消息发送到rabbitmq的队列之中 默认采用的是轮询分配:即不管消费者处理信息的效率,队列给所有消费者轮流发送一条信息,直至消息发送完毕 ...

人觉非常君
21分钟前
0
0
Java 之 反射

反射,剖析 Java类 中的 各个组成部分,映射成 一个个 Java对象,多用于 框架和组件,写出复用性高的通用程序。 测试类代码如下: class Person { private String name; public St...

绝世武神
24分钟前
0
0
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
30分钟前
0
0
多 SSH Key 实现同一台服务器部署多 Git 仓库

本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 SSH Key 进行 gi...

yeahlife
32分钟前
0
0
003. es6数值的扩展

一、普通扩展 Number 方法,将字符串、数值转为十进制 : Number('0b111') Number.isFinite() 用来检查一个数值是否为有限的:Number.isFinite(15) Number.isNan() 用来检查一个值是否为NaN N...

秋季长青
46分钟前
0
0
C语言数组和指针的语法糖

对于C语言,我可以这样秀:比如当创建一个数组arr[n]之后,一般我们去遍历数组的时候是for (int i = 0; i < n; i++) { a[i]; }但是我知道下表访问符[]是个语法糖,也就是说a[i]在编译器看来是...

ustbgaofan
55分钟前
0
0
Call to undefined function bcmath()的解决方法

乐意黎的ECS主机环境,Centos7.2 + PHP7 由于使用了bcdiv()函数,运行时总在抛错。 Fatal error: Call to undefined function bcmath() in /usr/loca/apache/htdocs/... on line 4 一查得知:......

dragon_tech
今天
0
0
css优先级

..

architect刘源源
今天
0
0
【转】Twitter的分布式自增ID算法snowflake

结构 snowflake的结构如下(每部分用-分开): 0 - 0000000000 0000000000 0000000000 0000000000 0 - 00000 - 00000 - 000000000000 第一位为未使用,接下来的41位为毫秒级时间(41位的长度可以...

talen
今天
0
0
hive支持行级修改

Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置。要想支持行级insert、update、delete,需要配置Hive支持事务。 一、Hive具有ACID语义事务的使用场景 1. 流式...

hblt-j
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部