wanmao | Learning Notes

<template>
  <div class="box-vue">Vue {{ message }}</div>
</template>
<script>
  export default {
    data: () => ({ message: "Hello World" })
  };
</script>
<style>
  .box-vue {
    color: red;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "Hello World" };
  }
  render() {
    return <div className="box-react">React {this.state.message}</div>;
  }
}
App.__style__ = `
  .box-react { color: red; }
`;

1
2
3
4
5
6
7
8
9
10
11
12

<html>
  <div id="vanilla-box"></div>
</html>
<script>
  var box = document.getElementById("vanilla-box");
  box.innerHTML = "Hello World!";
</script>
<style>
  #vanilla-box {
    color: red;
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "Hello World" };
  }
  render() {
    return <div className="box-react">React {this.state.message}</div>;
  }
}
App.__style__ = `
  .box-react { color: red; }
`;

1
2
3
4
5
6
7
8
9
10
11
12

{
  "horizontal": true
}

1
2
3

# wanmao