DOM operation of raw JS is difficult.
It is a very difficult task as shown below, but is the only way to solve this problem is to use frameworks such as react and vue, which are very grammatical?
http://qiita.com/kouh/items/dfc14d25ccb4e50afe89
Do you know how to basically write functions and grammar in raw JS and use only the DOM manipulation part such as react, or a virtual dom framework with almost the same function grammar as raw?
For example, {{t.name}} on the following page.
http://qiita.com/icoxfog417/items/49f7301be502bc2ad897
<div v-for="tintodos"
v-bind:class="['todo-default', t.doing?'todo-doing':']"
v-on: click = "begin($index)" >
{{t.name}}
</div>
Can you write in a normal raw JavaScript style without using the unique grammar of vue like the one above?
Additional
The fact that the tag can be written as it is is certainly attractive considering the difficulty of typing createElement and addChild every time, so I would like to incorporate it.
However, I think it would be ideal if only the HTML tag could be incorporated into the raw JS.
JSX extends JavaScript and TypeScript syntax.
Basically, a tool, such as a transcompiler, converts it into a call to a function that builds a (virtual) DOM.
You can write code that calls these functions directly without using JSX.
https://facebook.github.io/react/docs/react-without-jsx.html
//JSX
class Hello extensions React.Component {
render() {
return<div>Hello {this.props.toWhat}</div>;;
}
}
// JSX Not Used
class Hello extensions React.Component {
render() {
return React.createElement('div', null, `Hello${this.props.toWhat}');
}
}
If you think React.createElement is too long, you can use a short function such as react-hyperscript.
You can also control what functions are converted to as a result of the transcompilation, so you can use them to build DOMs for libraries other than React.
https://jp.vuejs.org/v2/guide/render-function.html#JSX
http://mithril-ja.js.org/jsx.html
The Vue template does not extend the JavaScript syntax, but, like JSX, it is converted into a function call for building a virtual DOM.
If you want to write a code that directly calls a function for construction, you can use Vue instead.
https://jp.vuejs.org/v2/guide/render-function.html
As discussed above, most frameworks should also have a way to build a (virtual) DOM with JavaScript function calls, regardless of template.
In addition, I think this is often the standard method for smaller frameworks.
For example, Mithril has a function m for the HyperScript series.
© 2024 OneMinuteCode. All rights reserved.