A Vue3 basis

1 createApp() and mount() methods

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title></title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({})
    app.mount("#app")
</script>
</html>
Copy the code
  • CreateApp () creates an instance of Vue.
    • It takes an object as a parameter {}.
    • This object tells Vue how to present our outermost component.
  • Mount () to an HTML DOM node.
    • How do I get the root component VM of Vue? — vm = const app. Mount (” # app “); console.log(vm);

2 Lifecycle hooks

Interpolation and V-bind dynamic assignment

  1. Interpolation: Also called literals, used to represent data defined in data. Use: {{XXXX}}, support JS expressions
  2. The V-bind directive is used to handle dynamic attributes of HTML tags, i.e. dynamic assignments.
< img v - bind: SRC = "imgSrc" / > / / regular written < img SRC = "imgSrc" / > / return/abbreviation {imgSrc: 'http://liangxinghua.com/img/87.png'}Copy the code

Template dynamic parameters and block default events

  1. V-on directive: V-ON is used to bind response events.
  2. Template dynamic parameters: also called dynamic properties, using:[]Square brackets with the form of the variable name in data.
  3. Event dynamic binding: using:[]Square brackets with the form of the variable name in data.
< h2: title = "message" > {{message}} < / h2 > < h2: [name] = "message" > {{message}} < / h2 > < / / [name] template dynamic parameters button <button @:click="hanldClick"> </button @[event]="hanldClick"> </button> // [event] data(){return{message:' this is a message ', name:'title', event:'click', {}}, the methods: {hanldClick () alert (' welcome to the red romantic ')}},Copy the code
  1. Blocking default events

The most common is the default submission event of a form: a call to e.preventDefault(). A better approach is to use event modifiers directly to prevent the default behavior

<form action="https://jspang.com" @click="hanldeButton"> <button type="submit"> HanldeButton (e){e.preventDefault()},}, < form@submit. Prevent ="onSubmit"></form> // Submit events no longer reload the pageCopy the code