How to Get Up and Running With Vue

In the introductory post for this series, we talked a bit about how web designers can benefit by using Vue. In this tutorial, we'll learn how to make Vue work while answering the initial questions you may have.

How to Add View to Your Project

View is just JavaScript, which means you can load it by including a script tag in your HTML document. The Vue site recommends using a CDN like https://cdn.jsdelivr.net/npm/vue to be sure to get the latest version. You can also use other version-specific links like https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js .

Note : If you are creating a production application, it is recommended to use a packet controller as yarn to manage all your dependencies, and deploy to sites powered by CDN. This is especially important if you want to build View in your JavaScript package, for example using something like Webpack .

Presentation of Markup and Models

When creating a "view" view, you can use the option el in the # 39; configuration object to connect your instance to the DOM. The option el must be a CSS element or a selection string. This element can also contain model code. So, in the HTML of your page, you could have something like:

And then in your JavaScript, you would have something like:

Note again that the string "# app" refers to the div in your HTML code. View will replace the internal contents of this div by the result of the rendering step of View

What Does View in the Background

We have established that Vue allows us to separate our view from our data. Some logic can be executed in the view itself, but we can avoid the following models that lead to the wrong code or state:

  • Storing / reading data in the DOM
  • DOM update using direct DOM manipulation and modification rather than model rendering
  • Using procedural methods to disjunctively evaluate state that often leads to a DOM representation that does not match the expected state

How does it work?

View allows you to set information in the option data . Any key-value pair passed inside this object will be observed for the changes, and all that will depend on this data will be re-rendered when the data changes.

What does this mean essentially? is that the object data is reactive . If you are using JavaScript's built-in data manipulation methods, the change will trigger the Vue rendering engine magic

For example, if your data object is configured like this:

With this model code:

And later, you add elements, like this:

The template would be automatically re-rendered, iterating ( loop on

Important Warning for Reactivity

The JavaScript function allowing View to see the object (getters and setters objects) does not provide information when new keys are added or existing keys are deleted, the addition and deletion of keys does not trigger any re-rendering.So, in the same example above, if the initial data object is empty ( items: [] is not present):

Any modification of vm.items will not trigger a re-edit. From View documentation:

"View does not dynamically allow the addition of new responsive properties to an already created instance."

Moreover, it is important to note that when adding elements to an array using the syntax array [index] = # new value & # 39; ; the re-rendering will not be triggered. Instead, you must use Splice or the View View method, which is beyond the scope of this article. See the list of warning phrases in the documentation for Vue

Working with jQuery and other libraries

View not in conflict with jQuery, Underscore or any other popular JavaScript library. However, you should think twice about trying to use Vue with another JavaScript framework like React.

It is likely that you do not necessarily need jQuery in addition to Vue, but it is possible that you want to use it in other areas of your application that are not rendered by Vue.

Vue also provides "hooks" to integrate with other libraries, for example, to perform animations.

Using Babel or another Transpiler

Vue does not require Babel so that you are productive with it. However, Babel will allow you to use some of JavaScript's leading features, such as model chains and more sophisticated table manipulation techniques.

View does not require any special building system. who are used to writing small amounts of JavaScript, while remaining powerful enough to be integrated into more complex compilation systems and full-featured legacy applications.

Using multiple views on the same page

Not only can you have multiple View instances on the same page, but you can even reference the same underlying data object on the same page . For example, in our previous data list example, if our JavaScript looked like this:

The result of using this model would be the same as our previous example:

However, we can also add a second instance of View that refers to the same underlying data representation like this:

We could then show, for example, the number of elements in the list:

Of course, this may not be the desired behavior. You can create two components that are not related to the same underlying object, and it will work without any problem.

If you want to create two separate instances, start with with the same underlying object, you can use the Object.assign method to create new copies of the same object.

Conclusion

Vue is an excellent choice for developers who want a lightweight frame that is easy to adopt, but who anticipate needing a more robust frame at the same time. to come up. View will adapt to your needs. Understanding how to use Vue in various scenarios (and having an idea of ​​what is going on beneath the surface) will provide you with a very powerful set of tools with which you will be productive from the first day.

In the next tutorial we're going to It will cover more of the unique value that Vue provides by looking at some examples of Vue's own code. We'll see each other there!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.