The Basics
Before we can get too far into understanding Vue, we need to cover a few things. We start off by learning what options we have when creating an instance of Vue. After we have an understanding of what we can provide Vue to make it suit our needs, we look a
- PDF / 671,978 Bytes
- 19 Pages / 504 x 720 pts Page_size
- 67 Downloads / 287 Views
The Basics Before we can get too far into understanding Vue, we need to cover a few things. We start off by learning what options we have when creating an instance of Vue. After we have an understanding of what we can provide Vue to make it suit our needs, we look at how we can start binding it to HTML, with a look at the templating syntax.
Vue Options Before we get too far, we should learn more about the options that are available when creating a Vue instance. In Chapter 1, we created an instance by using the bare minimum of options to get Vue to render the data and the el property on the page in order to specify where the Vue instance should be and what data it would have access to.
Note Technically, we could create a Vue instance with just the el property, but it couldn’t do much.
El The el property we talked about allows us to specify where our Vue instance will mount on the page. The value you provide can be a string that is a CSS selector (such as #app), as shown in Listing 2-1, or an HTMLElement, as shown in Listing 2-2.
Listing 2-1. Mounting Vue with a CSS Selector var app = new Vue({ el: '#app', data: {
© Brett Nelson 2018 B. Nelson, Getting to Know Vue.js, https://doi.org/10.1007/978-1-4842-3781-6_2
9
Chapter 2
The Basics
propertyName: 'Hello from Getting to Know Vue.js! This was mounted by passing in an CSS Selector' } });
Listing 2-2. Mounting Vue with an HTMLElement var element = document.getElementById('app'); var app = new Vue({ el: element, data: { propertyName: 'Hello from Getting to Know Vue.js! This was mounted by passing in an HTMLElement' } }); When Vue is mounted to the HTML element that is provided, it replaces it with the Vue created DOM. The Vue DOM will contain the HTML that we provide as the template or the contents produced from the render function we provide. More on the template and render functions shortly. If template and render are not provided, the HTML on the element that was provided as the mounting point will be used as the template for Vue to render the DOM. This is how we are able to inject our propertyName from the data into the HTML that was rendered without a template. It’s not rendering the DOM created from our HTML, it’s rendering the DOM created by Vue when it extracts the DOM we wrote and uses that as the template. This is how Listing 2-3 becomes Figure 2-1.
Listing 2-3. No Template Vue App
10
Chapter 2
The Basics
This will be replaced!
12
Chapter 2
The Basics
Figure 2-2. Vue app rendered with a template It is also possible to use the template property to provide a CSS selector to target an HTML element that has an ID. We do this by starting the template string with a hash tag (#). This can be done with a
emptyObject: {{ emptyObject }}
emptyString: {{ emptyString }}
nullProperty: {{ nullProperty }}
Figure 2-4. Rendering empty values
17
Chapter 2
The Basics
Names of the properties of the data object must not start with
Data Loading...
