.vue files ?

After learning the backend concept, I have learned about the frontend concept for these weeks. Especially, I have a chance to work with the .vue files to build the frontend in my homework 6. Although I was given some lectures about the .vue file in class, I am not really sure about what I am supposed to do in these files. Moreover, there were a lot of new syntax that I had never seen before. Thus, I did some searches with a hope that I could find a good resource to help me learn about .vue file.

Vue Files is one of the resources that I find useful. This website will introduce to readers an overview of a Vue project, like what folders and files should be included in a Vue project. In particular, the site will focus on describing in detail what a .vue file is and what blocks should be included in a .vue file and how to write each block. From the web, I learned that a .vue file is a custom file format that uses HTML to describe a Vue component. Each component consists of three types of blocks, which are <template>, <script>, and <style>. Each block will contain different types of code. Specifically, <template> contains HTML code; <script> contains JavaScript code, and <style> contains the CSS style of the component.

Moreover, according to the webpage, I have learned a lot of new syntax which is used to build a template of a component. First of all, text interpolation whose syntax is {{myVariable}} is used only to specify any valid JavaScript expressions in the template; and it cannot be used to modify any HTML code. Moreover, the website also introduces to readers about directives which are Vue- specific syntax elements used in the template. For example, v-model is used to take inputs and to update the variable values. v-if/ v-else/ v-else-if is a conditional statement that works in the same way as the equivalent in JavaScript. v-for is used as a loop statement to generate lists of elements in the template. v-on is used to define an action to take if an event occurs, such as click, mouseover, focus, etc.

Furthermore, in the components section, the website also introduce some elements could be written in the vue component’s script block, such as name, data(), methods, props, mounted(), computed, watch, etc. The website also provide syntax and the purpose of each element to help readers understand and be able to write a complete vue component’s script.

In short, I believe this site is well worth my reading as it contains all the information that I need to do my homework-6. Furthermore, I find it useful because besides providing information about the .vue file, it also has specific examples for each syntax, so readers can practice with the new syntax directly on the website.