In Vue, a component is essentially a Vue instance with pre-defined options. If we think about it, almost any type of application interface can be abstracted into a tree of components: The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. Message: 'You loaded this page on ' + new Date(). Hover your mouse over me for a few seconds In addition to text interpolation, we can also bind element attributes like this: The HTML is our entry point, but everything else happens within the newly created Vue instance.
A Vue app attaches itself to a single DOM element ( #app in our case) then fully controls it. Note that we no longer have to interact with the HTML directly. You should see the rendered example above update accordingly. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. The data and the DOM are now linked, and everything is now reactive. We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. If you prefer something more interactive, you can also check out this tutorial series on Scrimba, which gives you a mix of screencast and code playground that you can pause and play around with anytime. Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools. The Installation page provides more options of installing Vue. Or, you can create an index.html file and include Vue with: Feel free to open it in another tab and follow along as we go through some basic examples. The easiest way to try out Vue.js is using the Hello World example.
If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required. The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript.
Watch a free video course on Vue Mastery Getting Started
0 kommentar(er)
