Template Syntax — Vue.js | vue ||
VueusesanHTML-basedtemplatesyntaxthatallowsyoutodeclarativelybindtherenderedDOMtotheunderlyingcomponentinstancesdata.AllVuetemplatesaresyntacticallyvalidHTMLthatcanbeparsedbyspec-compliantbrowsersandHTMLparsers.Underthehood,Vuecompilesthetemplatesintohighly-optimizedJavaScriptcode.Combinedwiththereactivitysystem,Vuecanintelligentlyfigureouttheminimalnumberofcomponentstore-renderandapplytheminimalamountofDOMmanipulationswhentheappstatechanges.IfyouarefamiliarwithVirtualDOMconceptsandpreferthe...
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instances data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Under the hood, Vue compiles the templates into highly-optimized JavaScript code. Combined with the reactivity system, Vue can intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions[1] instead of templates, with optional JSX support. However, do note that they do not enjoy the same level of compile-time optimizations as templates.
Text Interpolation [2]The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):
template<span>Message: {{ msg }...