Learning Notes

# wanmao

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

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
React Hello World
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; }
`;

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
Hello World!
<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>

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
React Hello World
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; }
`;

  
        Copied!
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; }
`;

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
{
  "horizontal": true
}

  
        Copied!
1
2
3

← Introduction →