First, front-end development tool vscode

Front-end code writing tools, using VScode: VScode official website after the installation, you can first install the following plug-ins, convenient subsequent development.

Write code

1. Vscode shortcut key to generate HTML code

Create a new HTML file in vscode and enter an English exclamation mark! , click to quickly generate HTML base code.

2. The introduction of vue. Js

To use vUE, import. Download your own:

Link: https://pan.baidu.com/s/1PaML9ugU7iKt6EM4TrSsPg extraction code: ikd4Copy the code

For the moment, put the downloaded vue.js in the same directory as the file and import (vue.min.js or vue.js).

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <! <div id="app"> <! -- {{}} interpolation, </div> <script SRC ="vue.min.js"></script> <script> // create a vue object new vue ({el: '#app',// bind vue scope data: {// define the model data to display in the page message: 'Hello vue! ' } }) </script> </body> </html>Copy the code

3. The structure of vue

At its core, vue.js is a system that allows you to declaratively render data into the DOM using a concise template syntax, without the need for DOM manipulation. In jQuery, for example, you need to find the DIV node, get the DOM object, and then perform a series of node operations.

// Create a vue object new vue ({el: '#app',// bind vue scope data: {// define the model data displayed in the page message: 'Hello vue! ' } }) </script>Copy the code

Here we create a vue object that is bound to the div element

. Finally, use difference expressions in HTML to retrieve the field data in data.

4. Value of interpolation expressions

{{message}}, 2 curly braces, write the field in data in the middle.

. . <div id="app"> <! - {{}} interpolation formula, the data binding vue data - > {{message}} < / div >... .Copy the code

You can right-click in the vscode file and click open with live server, which is a plug-in to start installing, to see the page in the browser.

5. Vscode creates code snippets

Because learning vUE creates multiple HTML files, resulting in a lot of repetitive code, you can create snippets of code for direct creation.

Click File - Preferences - User Snippet - Create a new snippet/select the one created

The template here can be used directly and copied into the code snippet you create.

{ "vue htm": { "scope": "html", "prefix": "vuehtml", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", " <meta charset=\"UTF-8\">", "<meta name= "viewport" content= "width=device-width, initial-scale=1.0 ">", " <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">", " <title>Document</title>", "</head>", "", "<body>", " <div id=\"app\">", "", " </div>", " <script src=\"vue.min.js\"></script>", " <script>", " new Vue({", " el: '#app',", " data: {", " $1", " }", " })", " </script>", "</body>", "", "</html>", ], "description": "my vue template in html" } }Copy the code

To use it, you can directly enter the name of your fragment, such as “vue HTM “, and select it.