First, Devtools and Vscode development configuration (understanding)

Vue-devtools is a browser plug-in that Vue often uses for project development.

1. Installation method

  • Upgrade the browser to the latest version

  • Click on the top right corner of your browserThree pointsIn theMore tools, the choice ofadd-in
  • Open theadd-in 的 Developer mode

  • willVue. Js Devtools_5. 3.3. ContentsThis plugin can be directly dragged into the current interface to complete the installation, if you need this file, didi me~~

2. Open the console to test DevTools

Write a random click event and view the click effect

Like some projects done with Vue, the Vue icon in the upper right corner lights up:

1) www.bilibili.com (Bilibili)

2) M.sohu.com

3) element. The eleme. IO / # / en – US

3. Configure VsCode user fragments

{
	"demo": {
	  "prefix": "vue"."body": [
		"<template>"."\t<div>"."\t\t$0"."\t</div>"."</template>".""."<script>"."export default {"."\tdata () {"."\t\treturn {\n".""."\t\t}"."\t}"."}"."</script>".""."<style lang = \"less\" scoped>"."\t"."</style>"]."description": "A custom VUE snippet"}}Copy the code

4. The @/ path prompts configuration

Install the Path Intellisense plug-in

Go to Settings – Preferences – Search Path Intellisense – open settings.json and add:

"path-intellisense.mappings": {
     "@": "${workspaceRoot}/src"
 }
Copy the code

Create jsconfig.json in the same directory as the package.json project:

{
    "compilerOptions": {
        "target": "ES6"."module": "commonjs"."allowSyntheticDefaultImports": true."baseUrl": ". /"."paths": {
          "@ / *": ["src/*"]}},"exclude": [
        "node_modules"]}Copy the code

Finally restart to open

2, V-model grammar sugar (familiar)

V-model = v-bind = v-bind = v-bind = v-bind

<input V-model ="val" /> // equivalent <input V-on :input="val = $event.target.value" v-bind:value="val" />Copy the code

3. Common modifiers (familiar)

There are three common modifiers in VUE: event modifiers, key modifiers, and form modifiers.

1. Event modifiers

  • .stopPrevent events from bubbling (*)
  • .preventBlocking default events (*)
  • .prevent.stopPrevent bubbling while preventing default events
  • .oncePrevent the event from being triggered repeatedly (once and stop cannot be used together, otherwise the event will still bubble again) (*)
<template> <div> <div class="big" @click="cb"> <div class="small" @click="cs"> <a href="#" @click.stop.prevent="ca">a tag </a> </div> </div> < [email protected] ="cc"> </button> </div> </template> <script> export Default {methods:{cb(){console.log(" click the big one "); }, cs(){console.log(" click small "); }, ca(){console.log(" click the a label "); }, cc(){console.log(" click the button "); } } } </script> <style> .big{ width: 300px; height: 300px; background-color: pink; } .small{ width: 200px; height: 200px; background-color: skyblue; } </style>Copy the code

2. Key modifier

When listening for keyboard events, we often need to check for detailed keystrokes. Vue allows v-ONS to add key modifiers when listening for keyboard events:

<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">
Copy the code

To support older browsers if necessary, Vue provides aliases for most commonly used keycodes:

  • .enter (*)
  • .tab
  • .delete(Capture delete and Backspace keys)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

3. Form modifiers

We also have other modifiers, such as trim and number, commonly used on forms:

  • Want to remove Spaces before and after user input:
<input v-model.trim="val" type="text"> data(){return {val: "hello, world"}}Copy the code
  • You want to update the value of the input field after the change input
<input v-model.lazy="val" type="text">
Copy the code

.trim can be combined with.lazy:

There is no order

<template> <! -- Form modifier --> <div> <! -- Add.trim, <input type="text" v-model.trim="iptVal"> <button @click="handleClcik"> </button> <br> <! -- After adding.number, <input type="number" V-model. number="numVal"> <button @click="handleClcik2" </button><br><br> <! -- added.lazy, which doesn't update the value every time the user fires, and when the user presses enter, --> <input type="text" v-model.lazy="ipt2Val"> <p>{{ipt2Val}}</p> </div> </template> <script> export default { data () { return { iptVal:"", numVal:"", ipt2Val:"" } }, methods:{ handleClcik(){ console.log(this.iptVal); }, handleClcik2(){ console.log(this.numVal, typeof this.numVal); } } } </script>Copy the code

4. System modification key

You can use the following modifier to implement a listener that fires a mouse or keyboard event only when the corresponding key is pressed.

  • .ctrl(Actual results: Due to MAC systemCTRL + left mouse button = Right mouse buttonThis feature is not available on the MAC.)
  • .alt
  • .shift
  • .meta(Meta stands for ⊞ key on Win and ⌘ key on MAC)
<! -- Alt + C --> <input v-on:keyup.alt.67="doSomething"> <! -- Ctrl + Click --> <div v-on:click.ctrl="doSomething">Do something</div>Copy the code