Vue installation basic concepts simple instructions

The progressive JavaScript framework makes writing faster, more convenient and web pages load faster. It is a tool that must be learned for a high salary. Do more events in the least time,

How to learn Vue:

  • It's best to know the self-test of knowledge points every day - if you can't, you can only spend 30 minutes remembering conclusions and formulas

  • Remember the role of vue instruction, basic syntax - get a dictionary (one-to-one mapping)

  • Use it repeatedly in class examples, exercises, cases, assignments and projects

  • Learn how to find problems and solutions (make an error summary.md to avoid repeated entry into the pit)

Summary:

            Practice and write more, find out what you learn every day, and remember grammar, characteristics and functions

@vue/cli scaffold construction and foundation use

Benefits of scaffolding:               

  • Out of the box
  • 0 configure webpack
  • babel support
  • css, less support
  • Development server support

Installation method:

  Through global installation

yarn global add @vue/cli
# OR
npm install -g @vue/cli

Note: if there is no movement for a long time (95% of which is due to network speed problems), you can ctrl c

  • Reinstall
  • Or switch the network to avoid getting stuck

  After installation, check the version according to the following code. If the current version information is displayed, the installation is successful

vue -V

 @ vue/cli create project startup service

Objective: use the vue command to create a scaffolding project

==Note: the project name cannot contain capital letters, Chinese and special symbols==

1. Create project

# vue and create are commands, and vuecli demo is the folder name
vue create vuecli-demo

  2. Select template

==You can use the up and down arrows to select. If you make a mistake, ctrl+c will start again==

Choose what you need

  Choose how to download the dependent packages required by the scaffold project

If you have downloaded yarn, choose yarn   Use whichever you download,

  3. Press enter and wait to generate project folder + file + download necessary third-party packages

  4. Enter according to the prompt

Enter CD vuecil demo first

Then enter: npm run serve   # perhaps    yarn serve   According to your personal situation

confirm

  5. When the corresponding personal access path and others' access path appear, it means that you have succeeded

Then enter the corresponding description address on the browser according to the path

  When this picture appears, it means you are all right

Analyze the meaning of the directory and code

Note: the function of the file and the meaning of the file code

  node_modules are downloaded third-party packages
public/index.html – the web page where the browser runs
src/main.js – webpack packaged entry file
src/App.vue – Vue project entry page
package.json – dependent package list file

@Understanding of vue/cli project architecture

 

@vue/cli custom configuration

Because there is no webpack.config.js file in Vue, we can only create vue.config.js

Create vue.config.js at sre side by side

/* Overwrite configuration of webpack */
module.exports = {
  devServer: { // Custom service configuration
    open: true, // Open browser automatically
    port: 3000 //Modify port number
  }
}

 

eslint

In vue, it is a tool for checking code specifications. It is recommended to close it in early learning

example:

  Because variable a has never been used, the system will prompt an error

==Remember to see such errors in the future to prove that your code is not rigorous==

 

  Temporarily turn off the eslint check to avoid error reporting

 

@Explanation of vue/cli single vue file

Benefits of a single vue file: independent scopes do not affect each other

vue recommends using. vue files to develop projects

There can only be one root tag in the template

vue file - independent module - scope does not affect each other

Style works with the scoped attribute to ensure that the style is only effective for the tags in the current template

vue files are packaged together with webpack and inserted into index.html

<!-- template must, There can only be one root label, Affects the label structure rendered to the page -->
<template>
  <div>Welcome vue</div>
</template>

<!-- js relevant -->
<script>
export default {
  name: 'App'
}
</script>

<!-- The style of the current component, set up scoped, You can ensure that the style is only valid for the current page -->
<style scoped>
</style>

Finally: Vue files cooperate with webpack, package them, insert them into index.html, and then run them in the browser

About initialization interface cleaning

  • Delete the files in assets under src
  • Delete the files in components under src
  • Delete the content in App.vue under src
  • Finally, enter < Vue in App.vue according to Vue related plug-ins   Generate a new structure according to the prompt
<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

  Vue related instructions

Interpolation expression. Also known as Beard insertion method

Syntax: {expression}}

<template>
  <h1> {{ msg }} </h1>
  <h2> {{ obj.name }} </h2>
  <h3> {{ obj.age > 18 ? 'adult' : 'under age' }} </h3>
</template>

<script>
export default {
data(){ // Fixed format, where vue data is defined
  return{ // key is equivalent to variable name
    msg:'Hello,word',
    obj: {
        name: "Small vue",
        age: 18
      }
  }
},
}
</script>

<style>

</style>

Summary: for the assignment of interpolation expression in dom, the variable of vue must be declared in data

vue instruction - v-bind

  • Syntax: v-bind: attribute name = "vue variable"

  • Abbreviation: attribute name = "vue variable"

<template>
  <div>
<a v-bind:href="url">I'll go to Baidu</a>
<a :href="url">I'll go to Baidu</a>
  </div>
</template>
<script>
export default {
data(){
  return{
       url:'http://www.baidu.com',
      }
    }
}

vue instruction - v-on

Target: bind events to tags

  • grammar

    • v-on: event name = "a small amount of code to execute = ="

    • v-on: event name = "function in methods"

    • v-on: event name = "function (argument) in methods"

  • Abbreviation: @ event name = "function in methods"

<!-- vue instructions:   v-on Event binding-->
<p>The quantity of goods you want to buy: {{count}}</p>
<button v-on:click="count = count + 1">Add 1</button>
<button v-on:click="addFn">Add 1</button>
<button v-on:click="addCountFn(5)">Add 5 pieces at a time</button>

<button @click="subFn">reduce</button>

<script>
    export default {
        // ... other omitted
        methods: {
            addFn(){ // this represents the component object behind export default (subordinates have attributes return ed from data)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
</script>

  Summary: common @ event names, binding events to dom tags, and = event handling functions on the right

vue instruction - v-on event object

Objective: get the event object in the vue event handling function

  • Syntax:

    • No parameters are transmitted and received directly through formal parameters

    • Pass parameters, and pass $event to the event handler through the event object

<template>
  <div>
    <a @click="one" href="http://Www.baidu.com "> stop Baidu</a>
    <hr>
    <a @click="two(10, $event)" href="http://Www.baidu.com "> stop going to Baidu</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

vue instruction - v-on modifier

Purpose: after the event. Modifier name - bring more powerful functions to the event

  • Syntax:

    • @Event name. Modifier = "function in methods"

      • . stop - prevent event bubbling

      • . prevent - block default behavior

      • . once - the event handler is triggered only once during program operation

<template>
  <div @click="fatherFn">
    <!-- vue The modifier is set for the event, After the event.Modifier names can be used for more functions -->
    <button @click.stop="btn">.stop Prevent event bubbling</button>
    <a href="http://Www.baidu.com "@ click. Prevent =" BTN ">. Prevent block default behavior</a>
    <button @click.once="btn">.once During program operation, The event handler is triggered only once</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father Triggered");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

vue command - v-on key modifier

Objective: to add modifiers to keyboard events and enhance their ability

  • Syntax:

    • @keyup.enter - monitors the Enter key

    • @keyup.esc - monitor return key

More modifiers

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter Press enter");
   },
   escFn(){
     console.log("esc Press the button");
   }
 }
}
</script>

Conclusion: using more event modifiers can improve development efficiency and reduce your own judgment process

Practice flipping the world

 

<template>
  <div>
    <h1> {{msg}} </h1>
    <button @click="btn">Click flip</button>
  </div>
</template>
<script>
export default {
data(){
  return{
     msg:'Hello,word',
  }
},
methods:{
  btn(){
  // let arr = this.msg.split('')
  // let ap = arr.reverse('')
  // this.msg = ap.join('')

  //Abbreviation
  this.msg = this.msg.split('').reverse().join('')
  },
}
}

 

 

 

Tags: Javascript Vue.js

Posted on Mon, 18 Oct 2021 21:49:16 -0400 by nitm

Hot Tags

©2023 Programmer Help