Example p302

In this example, we create a Vue component vm to show weather information. Two data properties of the component object, temperature and rain are displayed in the HTML template using the mustache notation {{ property }}. An important feature of Vue is reactivity. When a property in data changes, Vue will update the HTML content generated from the properties.

We can also bind an HTML attribute (e.g. src of <img>) using the Vue directive v-bind:attr. In this example, we write v-bind:src="conditionURL" or :src="conditionURL" to bind the image URL attribute src to the data property conditionURL. If the property changes, Vue will automatically update the HTML attribute.

Temperature: {{ temperature }}°C

Rain: {{ rain }}%

Try the following

• Inspect the variable vm.temperature, vm.rain, etc
• Change their values, and check that the updates are shown
• Change the weather condition image to vm.conditionURL='image/sunny.png'
• The way to define the data property looks complicated at first. You need to define a function that returns a JavaScript object containing the properties of your component instance.
• Add a property humidity to the component. Add HTML code to show the property in the template.
• Check out two other ways to provide templates in p302-a.html and p302-b.html.