Introduction to Vue and environment construction

A single page application (SPA) is a web application that loads a single HTML page and dynamically updates that page as the user interacts with the application

The browser will load the necessary HTML, CSS and JavaScript at the beginning. All operations are completed on this page and are controlled by JavaScript.

Therefore, modular development and design are very important for single-page applications.

advantage:

Provides a more engaging user experience: with the immediacy of desktop applications and the execution and accessibility of websites
Changes in the content of a single-page application do not require reloading the entire page, making the web application more responsive and engaging
Single-page applications do not have to switch between pages, so there will be no "white screen phenomenon", nor will there be suspended animation and "flickering" phenomena.
Single-page applications have less pressure on the server than the server. The server only needs to output data, without having to worry about display logic and page synthesis, and the throughput capacity will be increased several times.
Good front and rear end separation. The back-end is no longer responsible for template rendering and page output. The back-end API is universal, that is, the same set of back-end program codes can be used for various clients such as web interfaces, mobile phones, and tablets without modification.

Vue component development

Component-based development is one of the most powerful features of Vue. Programmers use independent and reusable small components to build large-scale applications, making development faster and more agile.

Increase maintainability.

Componentization, as the name suggests, extracts duplicate code and merges it into components and into small units.

The most important thing about components is reuse. They are located at the bottom of the framework. All other functions depend on components and can be used by different functions.

Multiple components can be combined into a component library, components can also be nested, and small components can be combined into large components.

Make good use of component-based development to develop a page, just like building blocks, splicing the various components together, and finally integrating them together to form a complete system.

Using component-based development can reduce the coupling of the entire system, and replace different components to quickly complete requirements while keeping the interface unchanged.

Under component development, the entire system is combined through components. When a problem occurs, the component can be removed directly through troubleshooting, or the problem can be quickly located based on the component that reported the error. Because of the low coupling between each component and its single responsibility, the logic will be simpler than analyzing the entire system, allowing for rapid positioning.

Since each component has a single responsibility and the components are reused in the system, optimizing along with the code can achieve an overall upgrade of the system and improve system maintainability.

Node.js completes server functions

When Chrome was released in 2008, the efficient execution of its JavaScript engine V8 caught the attention of Ryan Dahl. In 2009, Ryan used Chrome's V8 engine to create an asynchronous I/O framework based on the event loop - Node.js was born.

Features:

Asynchronous I/O framework based on event loop, which can improve I/O throughput

Single-threaded operation can avoid the problem of multi-threaded variable synchronization

JavaScript can be used to write back-end code, and the front-end and back-end programming languages are unified.

ElementUI effectively implements the interface

Use ElementUI to implement background management page

Used in combination with Vue

Flexbox layout and SASS

Flexible box is a new layout mode of css3

(Flexible Box) is a layout method that ensures that elements have appropriate behavior when the page needs to adapt to different screen sizes and device types.

Paired with SASS, it is easier to maintain.

2. Vue components

1. Globally register components

Components: In Vue, components are independent structural units that constitute the page. Components mainly exist in the form of page structure. Different components also have basic interactive functions.

Component features:

It can reduce the writing of duplicate codes and improve development efficiency.

Reduce the degree of coupling between codes and make the project easier to maintain and manage

Implement complex project functions based on business logic

Use Vue.component to define global components. The global component definition format is as follows:

Vue.component(
          “[组件名]”,

          {       data:function()

                  {//“:function”可以省略
                          return{  name:”[值]”  }
                  },
                  template:”[组件内容]”
          }
)

The first parameter is the definition component name.

The second parameter data must be a function, which returns the component's data.

The third parameter defines the content of the component.

for example:

Vue.component(
          “my-component”,

          {       data ()

                  {
                         return{  name:”One”  }

                  },

                  template:”<div>我是全局组件{
   
   {name}}</div>”
          }
)

Case:

<div id="app">
      <my-component></my-component >
      <my-component></my-component >
      <my-component></my-component >
  </div>
  <script>
      Vue.component(
      'my-component',
      {	data ()
        { 
          return{  count:0  }
        },
        template:'<button v-on:click="count++">被单击{
   
   {count}}次</button>'
      }
  )
  var vm=new Vue({el:'#app'})
  </script>

2. Partially registered components

Register local components: Local registration components are implemented through the components attribute of the Vue instance.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <my-component></my-component >
    </div>
  <script>
      var com1={
        template:'<p>我是vm实例中的局部组件</p>'//com1对象定义了组件的内容
      }
      var vm=new Vue({
        el:'#app',
        //注册局部组件
        components:{myComponent:com1}
//myComponent是自定义组件的名字。com1是一个对象
      }
      )
  </script>  
  </body>
</html>

3. template (highly recommended)

Template template: Vue provides the <template> tag to define a structural template. You can write HTML code in this tag, and then bind it to the template attribute in the component through the id value. This method makes it easy to write functional copies efficiently. components.

Because components are written in this way, code hints and highlights can be displayed in the compiler, which not only improves the development experience, but also improves development efficiency.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{
   
   {title}}</p>
      <my-component></my-component >
  </div>

  <template id="tmp1">
    <p>{
   
   {title}}</p>
  </template>
  <script>
      Vue.component(
      'my-component',
      {	
        template:'#tmp1',
        data ()
        { 
          return{  
            title:'我是组件内的title',
            }
        },
      }
  )
  var vm=new Vue({el:'#app',
      data:{
        title:'我是vm实例的title'
      }
})
  </script>  
  </body>
</html>

4. Data transfer between components

Dependencies between components: Some tools can be used to transfer data between parent components (or parent containers) and child components.

Case: The props subcomponent receives the data passed by the parent container.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <Child name="八佰"></Child>
        <Child name="花木兰"></Child>
        <Child name="姜子牙"></Child>
    </div>
    <script>
        //'Child'是子组件
        Vue.component('Child',{
            props:['name'],
            //下面是子组件的内容
            template:
            `<div style="color:blue;font-size:30px;">
                今日上映电影:{
   
   {name}}
             </div>`
        })
        var vm=new Vue({
            el:'#app'
        })
    </script>  
  </body>
</html>

$emit transfers value: $emit can transfer the value in the child component back to the parent container. $emit can trigger events defined in the parent component, and the data information of the child component is completed by passing parameters.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <Parent></Parent>
    </div>
//定义子组件模板
    <template id="child">
        <div>
            <button @click="click">Send</button>
            <input type="text" v-model="message">
        </div>
    </template>
    <script>
       //'Parent'是父组件
    //父组件定义事件处理函数transContent，并接收payload参数
        Vue.component('Parent',{
            template:
            `<div>
                <Child @childFn="transContent"></Child>
                子组件传来的值：{
   
   {message}}
             </div>`,
            data(){
                return{
                    message:''
                }
            },
            methods:{
                transContent(playload){
                    this.message=playload
                }
            }
        })
        //Child组件
//触发父组件中绑定的childFn事件，并传递子组件中的message数据
        Vue.component('Child',{
            template:'#child',
            data(){
                return{
                    message:'子组件的消息'
                }
            },
            methods:{
               click(){
                    this.$emit('childFn',this.message);
                }
            }
        })
        var vm=new Vue({
            el:'#app'
        })
    </script>  
  </body>
</html>

5. Component switching

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <a href="#"@click.prevent="flag=true">登录</a>
        <a href="#"@click.prevent="flag=false">登录</a>
        <login v-if="flag">
        </login>
        <register v-else="flag"></register>
    </div>
    <script>
        Vue.component('login',{
            template:'<div>登录页面</div>'
        })
        Vue.component('register',{
            template:'<div>注册页面</div>'
        })
        var vm=new Vue({
            el:'#app',
            data:{flag:true}
        })
    </script>  
  </body>
</html>

Initial page and when clicking to log in:

When clicking to register:

Component switching can also be achieved through the is attribute of the component, using the is attribute to match the name of the component.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <a href="#"@click.prevent="comName='login'">登录</a>
        <a href="#"@click.prevent="comName='register'">注册</a>
        <component v-bind:is="comName"></component>
    </div>
    <script>
        Vue.component('login',{
            template:'<div>登录页面</div>'
        });
        Vue.component('register',{
            template:'<div>注册页面</div>'
        });
        var vm=new Vue({
            el:'#app',
            data:{comName:''}
        })
    </script>  
  </body>
</html>

3. Vue environment construction

1. The prerequisite for installing Vue is to install node.js

下载链接：Download | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/en/download/

I chose 64bit in zip format

After unzipping, double-click to install, and continue all the way until the installation is complete. There is nothing special.

(You can also directly download the resources I uploaded)

https://download.csdn.net/download/pzcxl/87849399https://download.csdn.net/download/pzcxl/87849399

After the installation is successful, configure the node's environment variables (This PC -> Properties -> Advanced System Settings -> Environment Variables), edit the path of the system variable, and then click New to enter the installation path of
node.

After the environment is configured successfully, cmd brings up the command prompt interface, enter node -v and npm -v to check whether the installation is successful.

2. Install vue scaffolding

The scaffolding is official, the installation command is:

①npm i -g @vue/cli (install scaffolding)

②npm i -g @vue/cli-init (compatible with 2.0 (supports npm run dev and other commands))

③After installing the above two, configure the environment variables of vue, find the directory of vue.cmd (if you forget where it is installed, you can search the whole disk), copy the path, and add the environment variable to the path, as shown below:

④Continue to enter in the command prompt: vue --version or vue -V to view the current version. as follows

3. Create a new vue project in visual studio code

1. Create an empty file on your computer to store the vue project (in vue, the project name cannot contain Chinese characters, capital letters, or special symbols. The project name can be in lowercase and separated by dashes)

2.打开visual studio code软件（去官网下载就可以Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/）

Click File->open Folder->
select the new empty folder, click OK, then click ctrl+shift+~ keys at the same time to open the terminal window and enter vue init webpack [project name]

3. Will it appear after success? Project name [project name]

4. Click the enter key and you will be asked to select some options. Just press enter to finish them all.

Wait for the download to complete, it may take a long time, don’t rush

5. The following page appears, indicating that the project was successfully created. The following project structure appears in the upper left corner, and you can develop the vue project.

As shown in the picture above, vue.js needs to be downloaded from the official website. The steps are as follows:

4. Download the source code of vue.js file

1. We click on the link below to go to vue.jsthe official website, vue.jsthe official website link address: https://cn.vuejs.org https://cn.vuejs.org/ 2. After entering the official website, select the document vue 2 文档, as shown in the figure below:

3. After entering the Vue 2 homepage, click the Start button.

4. On vue 2the page, slide the mouse down until you see <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>, as shown below Show

5. Open a new browser window and copy the srcfile js(such as https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js ) to the address bar of the window, as shown in the figure below :

6. Click Ctrl+A to copy everything, paste it into the new vue.js file, and save it.

After completing the above steps, let's try the program just now.

3. Vue program running

1. Create a new page index.html and enter the newly created vue.js just now

The complete code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <my-component></my-component >
      <my-component></my-component >
      <my-component></my-component >
  </div>
  <script>
      Vue.component(
      'my-component',
      {	data ()
        { 
          return{  count:0  }
        },
        template:'<button v-on:click="count++">被单击{
   
   {count}}次</button>'
      }
  )
  var vm=new Vue({el:'#app'})
  </script>  
  </body>
</html>

2. Click the Run and Debug button on the left

3. After selecting the browser, you can see the page

These three buttons have no influence on each other. Clicking each time will increase the number of clicks by one.

The above is the introduction of Vue, environment setup and the running of the first program.

If there are any mistakes, I hope everyone can criticize and correct me, and I will not hesitate to teach you.