Click to jump to Vue.js Learning Reference Document
Introduction to vue3.0
What is Vue.js
1. Front End Development Framework
2. A progressive framework for building user interfaces
3. Simplify complex development processes
4. Vue is also fully capable of supporting complex single-page applications
install
There are four main ways to add Vue.js to a project:
1. Import it as a CDN package on the page
<script src="https://unpkg.com/vue@next"></script>
2. Download JavaScript files and host them yourself
If you want to avoid using a build tool but cannot use a CDN in production, you can download the associated.js file and host it using your own Web server. Then you can use
3. Install using npm
npm is the recommended installation method for building large applications with Vue
4. Build a project using the official CLI that provides battery-containing build settings for modern front-end workflows such as hot overload, lint-on-save, etc.
Vue provides the official CLI (Open New Window) to quickly build ambitious single-page applications
vite build tool tool to create vue3 project
Create with npm
Prerequisite: Install Node.js
The steps are as follows:
$ npm init vite@latest <project-name> perhaps $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev
Using yarn
$ yarn create vite <project-name> --template vue $ cd <project-name> $ yarn $ yarn dev
vue3 project structure
Binding Vue declarative syntax to data
Command
document.querySelector('h1').innerHTML="Baby Fan"
Declarative
export default { name: "App", data(){ return{ msg:'Xiao Fan' } }, methods:{ changeMsg(){ this.msg = 'Xiao Fan Beauty' } } };
Data Binding
Data changes, page content changes, page content changes, and data changes
<h1 @click="changeMsg">{{msg}}</h1> <input type="text" v-model="msg" />
Template syntax
Double Bracket Syntax
<h1>{{msg}}</h1>
v-once
One-time interpolation, rendering only once
<!-- v-once Directive to render content only once --> <h1 @click="changeMsg" v-once>{{msg}}</h1>
v-html
Insert HTML code into content
<!--v-html Instruction causes content to be inserted html Code --> <div>{{content}}</div> <div v-html="content"></div>
v-bind
Content of the bound property
<!-- v-bind Contents of instruction-bound properties --> <div v-bind:id="id"></div>
Using JavaScript expressions in template syntax
<template> <div> <!-- JavaScript Can be used in template syntax --> <!-- Double Bracket Syntax --> <h1>{{ msg }}</h1> <!-- split()Division msg String, get a number --> <h1>{{msg.split('')}}</h1> <!-- reverse() Reverse the contents of the array --> <h1>{{msg.split('').reverse()}}</h1> <!-- join()Makes the array contents merge into strings --> <h1>{{msg.split('').reverse().join('')}}</h1> <!-- You can use ternary operators --> <div>{{color=="green"?"Happy":"Sorry"}}</div> </div> </template> <script> // Declarative export default { name: "App", data() { return { msg: "Hello,Word!", color:"green" }; }, methods: { }, }; </script>
Dynamic Instructions
Property names corresponding to instructions can be modified
<template> <div> <!-- Dynamic Instructions --> <div v-bind:[attrbuteName]="d1"></div> <button @click="toggleColor">Click to switch colors</button> </div> </template> <script> // Declarative export default { name: "App", data() { return { attrbuteName:"class", d1:'d1' }; }, methods: { toggleColor() { this.attrbuteName = "id"; }, }, }; </script> <style> #d1{ margin-left: 47%; width: 100px; height: 100px; background-color: yellow; } .d1{ margin-left: 47%; width: 100px; height: 100px; background-color: blue; } </style>
Computing attributes
- Simplify Code
<template> <div> <!-- Customary msg --> <h1>{{msg}}</h1> <!-- Application JS Statement inversion msg --> <h1>{{msg.split('').reverse().join('')}}</h1> <!-- Reverse using computed attributes msg --> <h1>{{reverseMsg}}</h1> </div> </template> <script> // Declarative export default { name: "App", data() { return { msg: 'Hello World' }; }, computed:{ reverseMsg(){ return this.msg.split('').reverse().join('') } }, methods: { toggleColor() { this.attrbuteName = "id"; }, }, }; </script>
watch listens for changes in data
To listen for changes in data, you can use watch to listen for a function that listens for the target variable. There are two parameters, the first is a new value and the second is an old value.
<template> <div> <!-- Customary msg --> <h1>{{msg}}</h1> <input type="text" v-model="msg"> </div> </template> <script> // Declarative export default { name: "App", data() { return { msg: 'Hello World' }; }, watch:{ msg(newValue,oldValue){ if(newValue.length<10){ alert("Too few values entered!!!") } } } }; </script>
Multiple binding methods for classes
Place String
<template> <div> <!-- class class --> <!-- First, place the string --> <h1 v-bind:class = "msg">hello</h1> </div> </template> <script> // Declarative export default { name: "App", data() { return { msg: 'Hello World' }; }, }; </script>
Place Object
<template> <div> <!-- class class --> <!-- Place Object --> <h1 v-bind:class="{active:isActive}">Hello</h1> <button @click="toggleActive">Switch Styles</button> </div> </template> <script> // Declarative export default { name: "App", data() { return { isActive: true }; }, methods:{ toggleActive(){ this.isActive=!this.isActive } } }; </script> <style scoped> .active{ background-color: yellow; } </style>
Place Array
<template> <div> <!-- class class --> <!-- Place Array --> <h1 :class="arr">Hello</h1> <button @click="toggleActive">Switch Class</button> </div> </template> <script> // Declarative export default { name: "App", data() { return { arr: ['swiper','active'] }; }, methods:{ toggleActive(){ this.arr.pop() } } }; </script>
Combination of Array and Object
<template> <div> <!-- class class --> <!-- Combination of Array and Object --> <h1 :class="[className, {active:isActive}]">Hello</h1> <button @click="toggleActive">Switch Class</button> </div> </template> <script> // Declarative export default { name: "App", data() { return { className : "abc", isActive : true }; }, methods:{ toggleActive(){ this.className= "cba", this.isActive = !this.isActive } } }; </script> <style scoped> .active { background-color: yellow; } </style>
Multiple binding methods for Style styles
Place String
<template> <div> <!-- class class --> <!-- First: Place a string --> <h1 :style="msg">Hello</h1> </div> </template> <script> // Declarative export default { name: "App", data() { return { msg: "background:red;" }; }, }; </script>
Place Object
<template> <div> <!-- class class --> <!-- First: Place a string --> <h1 :style="{background: 'purple'}">Hello</h1> </div> </template> <script> // Declarative export default { name: "App", data() { return { }; }, }; </script>
Place Array
<template> <div> <!-- class class --> <!-- First: Place a string --> <h1 :style="[styleObj,{boxSizing: 'border-box'}]">Hello</h1> </div> </template> <script> // Declarative export default { name: "App", data() { return { styleObj:{ background: "pink", border: '1px solid blue' } }; }, }; </script>
v-if and v-show
-
v-if... v-else-if... v-else... can display multiple content according to different conditions, which consumes performance if switching frequently
-
v-show is conditionally determined whether to display a single content, but when not, it actually changes the style to display: none, which results in less performance consumption
<template> <div> <!-- Set up multiple content switching display --> <h1 v-if = "user == 'super VIP'"> Welcome Dad Golden</h1> <h1 v-else>Charging Makes You Stronger</h1> <button @click="toggleUser">Switch Users</button> <!-- Set up a content switching display --> <h1 v-show="isShow">Show me only one</h1> <button @click="toggleShow">switch</button> </div> </template> <script> // Declarative export default { name: "App", data() { return { user:'super VIP', isShow: true }; }, methods:{ toggleUser(){ this.user = "Ordinary user" }, toggleShow:function(){ this.isShow = !this.isShow } } }; </script>
v-for cycle
- Loop Array
- Objects in Loop Array
- Loop Object
<template> <div> <!-- Loop Array --> <ol> <li v-for="(item, i) in news" :key="i">{{ item }}====>{{ i }}</li> </ol> <!-- Objects in Loop Array --> <ol> <li v-for="(item, i) in news1" :key="i"> {{ item.title }}==>{{ item.content }}===>{{ item.athor }}====>{{ i }} </li> </ol> <!-- Loop Object --> <ol> <li v-for="(item, i) in athor" :key="i">{{ item }}====>{{ i }}</li> </ol> </div> </template> <script> // Declarative export default { name: "App", data() { return { news: ["11111", "222222", "333333"], news1: [ { title: "I'm Heading 1", content: "I am Content 1", athor: "Author 1", }, { title: "I'm Heading 2", content: "I am Content 2", athor: "Author 2", }, ], athor:{ name:'lingLing', age: '18' } } }, }; </script>
Events and parameters, time modifiers
Binding events use v-on (abbreviated @)
- Binding events do not require parameters
<h1 @click="addEvent">{{num}}</h1>
- Bind events, handle expressions directly
<h1 @click="num += 2">{{num}}</h1>
- Bind events, pass parameters
<h1 @click=" addEvent1(20)">{{num}}</h1>
- Bind event. Pass $event event object and parameters
<h1 @click=" addEvent1(20,$event)">{{num}}</h1>
- One event binds multiple handlers
<h1 :style="{background:color}" @click="addEvent1(20,$event),changeColor($event)">{{num}}</h1>
Event modifier
- Prevent event bubbles.stop
- Block default events.prevent
- Events are triggered only once.
<h1 @click.once=" addEvent1(20,$event)">{{num}}</h1>
Key modifier
enter/tap.delete/esc/space/up/down/left/right
<input type="text" @keydown.enter="searchEvent">
System Modifier
.ctrl/.alt/.shift/.meta
Mouse modifier
.left/.right/.middle
<template> <div> <!-- Bind events, no parameters required --> <h1 @click="addEvent">{{num}}</h1> <!-- Bind events, handle expressions directly --> <h1 @click="num += 2">{{num}}</h1> <!-- Bind events, pass parameters --> <h1 @click=" addEvent1(20)">{{num}}</h1> <!--Bind event. transmit $event Event objects and parameters --> <h1 @click=" addEvent1(20,$event)">{{num}}</h1> <!-- One event binds multiple handlers --> <h1 :style="{background:color}" @click="addEvent1(20,$event),changeColor($event)">{{num}}</h1> <!-- Event modifier --> <!-- Prevent Event Bubbles .stop Block default events .prevent Events are triggered only once .once --> <h1 @click.once=" addEvent1(20,$event)">{{num}}</h1> <!-- Key modifier enter/tap.delete/esc/space/up/down/left/right System Modifier .ctrl/.alt/.shift/.meta Mouse modifier .left/.right/.middle --> <input type="text" @keydown.enter="searchEvent"> </div> </template> <script> // Declarative export default { name: "App", data() { return { num:0, color: 'red' } }, methods:{ addEvent:function(e){ console.log(e) this.num += 2 }, addEvent1:function(number){ this.num += number }, addEvent2:function(number,event){ this.num += number }, changeColor:function(){ this.color = 'pink' }, searchEvent:function(){ console.log("Search event executed!!!") } } }; </script>
Form Input Binding, Modifier
Text box text
*Two-way binding of single-line text box data
<input v-model="searchKey" type="text" @keydown="searchEvent" />
textarea multiline text box
- Data binding for multiline text boxes
<textarea v-model="lineText" name="textarea" id="" cols="30" rows="10"></textarea>
Check box checkbox
- Checkbox data binding, get whether the content is selected
<input type="checkbox" name="likes" v-model="fruits" value="Persimmon"> <input type="checkbox" name="likes" v-model="fruits" value="Banana"> <input type="checkbox" name="likes" v-model="fruits" value="Grape"> <input type="checkbox" name="likes" v-model="fruits" value="Apple">
Radio radio
Only one value can be selected
<input type="radio" name="sex" value="man" v-model="picked"> <input type="radio" name="sex" value="woman" v-model="picked">
Option Box select
Adding a multiple attribute allows you to select multiple options
<select name="citys" v-model="citys" multiple > <option value="Guangzhou"></option> <option value="Shanghai"></option> <option value="Beijing"></option> <option value="Chengdu"></option> </select>
Modifier for data binding v-model
.lazy
input changes to change event value, focus is out of focus before changing
<input v-model.lazy="searchKey1" type="text" @keydown="searchEvent" />
.number
Convert input values to numeric types
<input v-model.lazy.number="searchKey2" type="text" @keydown="searchEvent" />
.trim
Remove whitespace
<input v-model.lazy.trim="searchKey3" type="text" @keydown="searchEvent" />
Case Code
<template> <div> <!-- Two-way binding of single-line text box data --> <input v-model="searchKey" type="text" @keydown="searchEvent" /> <h1>{{ searchKey }}</h1> <!-- Data binding for multiline text boxes --> <textarea v-model="lineText" name="textarea" id="" cols="30" rows="10"></textarea> <h1>{{ lineText }}</h1> <!-- Checkbox data binding,Get whether or not selected content--> <input type="checkbox" name="like" v-model="checked" value="123"> <h1>{{checked}}</h1> <!-- Check box multiple values --> <input type="checkbox" name="likes" v-model="fruits" value="Persimmon"> <input type="checkbox" name="likes" v-model="fruits" value="Banana"> <input type="checkbox" name="likes" v-model="fruits" value="Grape"> <input type="checkbox" name="likes" v-model="fruits" value="Apple"> <h1>{{fruits}}</h1> <!-- Data binding for radio boxes --> <input type="radio" name="sex" value="man" v-model="picked"> <input type="radio" name="sex" value="woman" v-model="picked"> <h1>{{picked}}</h1> <!-- Data Binding for Radio Option Box --> <select name="city" v-model="city"> <option value="Guangzhou"></option> <option value="Shanghai"></option> <option value="Beijing"></option> <option value="Chengdu"></option> </select> <h1>{{city}}</h1> <!-- Data Binding for Multiple Selection Option Box --> <select name="citys" v-model="citys" multiple > <option value="Guangzhou"></option> <option value="Shanghai"></option> <option value="Beijing"></option> <option value="Chengdu"></option> </select> <h1>{{citys}}</h1> <!-- The form gets the selected content or not --> <input type="checkbox" name="like" v-model="checked1" true-value="like" false-value="Dislike"> <h1>{{checked1}}</h1> <!-- Modifier --> <!-- .lazy/input Become change Event changes value after focus is out of focus --> <input v-model.lazy="searchKey1" type="text" @keydown="searchEvent" /> <h1>{{searchKey1}}</h1> <!-- .number Convert input values to numeric types --> <input v-model.lazy.number="searchKey2" type="text" @keydown="searchEvent" /> <h1>{{searchKey2}}</h1>, <input v-model.lazy.trim="searchKey3" type="text" @keydown="searchEvent" /> <h1>{{searchKey3}}</h1> </div> </template> <script> // Declarative export default { name: "App", data() { return { searchKey: "Use Baidu Search", lineText: "", checked: false, fruits:[], picked:'', city:'', citys:[], checked1:'', searchKey1: "Use Baidu Search", searchKey2:'Convert to Number Type', searchKey3:'Remove whitespace' }; }, methods: { searchEvent: function () { console.log("Search event executed!!!"); }, }, }; </script>
assembly
Parent component passes data props to child component
Parent component data newContent is bound to content, and child component receives data from parent component through props
The parent component App.vue code is as follows:
<template> <div> <!-- Parent Component Data newContent Bind to content --> <News :content = "newsContent"></News> </div> </template> <script> // Declarative import News from './components/News.vue' export default { name: "App", data() { return { newsContent:"23 A year old girl and a man opened a room and were caught in the bag!!!" }; }, methods: { }, components:{ News } }; </script>
The subcomponent App.vue code is as follows:
<template> <div> <h1>News content{{content}}</h1> </div> </template> <script> export default { // Subcomponents receive data from parent components through props props:["content"] } </script>
Providing data to subcomponents through provide rs and inject s
Parent provides data through provide(), and child injects data through inject()
Parent Component Code: App.vue
<template> <div> <Student></Student> </div> </template> <script> import { reactive,provide} from "vue"; import Student from './components/Student.vue' export default { name: "App", data() { return { }; }, setup() { const student = reactive({ name: "Little Red", age: 18, grade: "First day", }); // Provide data provide("stu", student); return { }; }, components:{ Student }, }; </script>
Subcomponent code: Student.vue
<template> <div> <h1>userName:{{ name }}</h1> <h1>age: {{ age }}</h1> <h1>Grade:{{grade}}</h1> </div> </template> <script> import { inject } from "vue"; export default { setup() { // Inject data provided by parent component const student = inject('stu') return {...student} }, }; </script>
Run the screenshot as follows
Child components pass data to parent components: custom events
The child component triggers custom event 1, the parent component listens for custom event 1, and the value listened for is given to custom event 2
The App.vue code is as follows:
<template> <div> <!-- Child components pass data to parent components and listen sendParentMsg Run custom events when triggered sendChildMsg --> <Login @sendParentMsg ="getChildMsg" ></Login> <h1>Values obtained from child elements:{{msg}}</h1> </div> </template> <script> // Declarative import Login from './components/Login.vue' export default { name: "App", data() { return { msg:'' }; }, methods: { getChildMsg:function(value){ this.msg = value } }, components:{ Login } }; </script>
The Login.vue code is as follows:
<template> <div> <input type="text" v-model="userName"> <button @click="sendMsg">Submit data to parent component</button> </div> </template> <script> export default { data(){ return{ userName:'' } }, methods:{ sendMsg:function(){ // Trigger custom event sendParentMsg() with $emit (event name, sent event value) this.$emit("sendParentMsg",this.userName) } }, } </script>
Vue3 life cycle
beforeCreate() and create()
Called when the page is initialized before and after the data is initialized
beforeMount() and mounted()
Render page after initialization is complete before mounting rendering and after mounting rendering
beforeUpdate() and updated()
Called when page data changes
beforeUnmount() and unmounted()
Page data is not rendered when not displayed, vue2 calls beforeDestroy() and destroyed()
Synthetic API: Composition API
-
Composition AP can be used in setup functions
-
Writing order for common and synthetic APIs makes synthetic APIs faster and easier to execute, and helps maintain code
Composition API: single value ref
Import ref
ref() is a variable that becomes responsive
import {ref} from 'vue'
<template> <div> <h1 @click="changeEvent">Normal way of counting:{{count}}</h1> <h1 @click="num+=10">Using synthesis API Count:{{num}}</h1> </div> </template> <script> import {ref} from 'vue' export default { name: "App", data() { return { count: 0 }; }, setup(){ const num = ref(0) return{num} }, methods: { changeEvent() { this.count++ }, }, }; </script>
Composition API: Function
<template> <div> <h1 @click="changeNum">Using synthesis API Defined function count:{{num}}</h1> </div> </template> <script> import {ref} from 'vue' export default { name: "App", data() { return { }; }, //Synthetic API setup(){ //Instantiate variable num const num = ref(0) function changeNum(){ num.value += 10 } //Returns related variables and functions return{num,changeNum} }, }; </script>
Composition API: Object reactive({})
- reactive({}) makes an object responsive
- ... toRefs (object names) are used to deconstruct objects and do not need to be prefixed with object names when invoking object properties
<template> <div> <!-- Synthesis API Use of objects in --> <h1>Full name:{{user.userName}}</h1> <!-- Synthesis API Returns a deconstructed object, called without prefixing the object name --> <h1>Age:{{age}}</h1> <h1 @click="changeType">Type:{{type}}</h1> </div> </template> <script> import { reactive,toRefs} from "vue"; export default { name: "App", data() { return { }; }, setup() { // Define Objects const user = reactive({ userName: "millet", age: 18, type: "Puppies", }); // Change Object Data function changeType(){ user.type = "Super handsome!!!" } //... toRefs(user) is a deconstruction object return { num, changeNum, user, ...toRefs(user),changeType}; }, }; </script>
Composition API: Listen for data changes
watchEffect
Track changes in data used
Import
import { watchEffect} from "vue";
//Track only type s of values used in anonymous functions watchEffect(()=>{ console.log(user.type) console.log("user.type Triggered when the value of") })
watch
Trace specified properties
Import
import { watch} from "vue";
- Listen for a single property
// Single listening watch(num,(newNum,oldNum)=>{ console.log(newNum) console.log(oldNum) console.log("num Triggered when the value of") })
- Listen for multiple attributes
// Multiple monitoring watch([num,user],(newNum,oldNum)=>{ console.log(newNum) console.log(oldNum) console.log("Trigger when value changes") })
setup Details
Receive parent component data using setup
You need to rely on props to receive data, the parent binds data first, the child receives data through props, and in setup you can calculate responsive content through props
- The content property contains the content passed in from the parent component
Code for subcomponents:
<template> <div> <h1>userName:{{userName}}</h1> <h1>age: {{age}}</h1> <!-- adopt props Generate a sentence --> <h1>description: {{description}}</h1> </div> </template> <script> import {ref} from 'vue' export default { setup(props,content){ // Use setup to receive props data and props to calculate the content of the response const description = ref(props.userName+"Age is"+props.age) console.log(content) return{description} }, // Receive data from parent component bindings props:['userName','age'] } </script>
Parent Component Code:
<template> <div> <User :userName = "userName" :age= "age" class="abc"></User> </div> </template> <script> import { reactive,toRefs} from "vue"; import User from './components/User.vue' export default { name: "App", data() { return { }; }, setup() { // Define Objects const user = reactive({ userName: "millet", age: 18, type: "Puppies" }) //... toRefs(user) is a deconstruction object return { user, ...toRefs(user)}; }, components:{ User }, }; </script>
life cycle
- Before onBeforeMount mounts rendering
- After onMounted mounts the rendering
- Before onBeforeUpdate update
- After onBeforeUnmount update
Import first
import {onBeforeMount,onMounted,onBeforeUpdate,onBeforeUnmount} from 'vue'
Reuse
setup(){ // Application of Declaring Periodic Functions onBeforeMount(()=>{ console.log("onBeforeMount") }) },
Vue3 routing: vue-router
Basic use of routing
- Routing: Single-page applications display different content depending on path changes
- Install Route under Project Path
E:\vuejs\vue3Router01> npm install vue-router@next
HTML
App.vue code:
<template> <div> <p> <router-link to="/">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </p> <router-view></router-view> </div> </template> <script> export default { name: "App", }; </script>
JS
index.js
import {createRouter,createWebHashHistory} from 'vue-router' const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, ] const router = createRouter({ history:createWebHashHistory(), routes, }) export default router
main.js
import { createApp } from 'vue' import App from './App.vue' import './index.css' import router from './router' const app = createApp(App) // Use Routing app.use(router) app.mount('#app')
Dynamic Routing
In single-page applications, different content is displayed according to the id of the path
index.js
import {createRouter,createWebHashHistory} from 'vue-router' //Import Components import News from '../components/News.vue' import NotFound from '../components/NotFound.vue' //Add Component to Route const routes = [ {path:'/news/:id',component: News}, {path:'/:path(.*)',component: NotFound} ] const router = createRouter({ history:createWebHashHistory(), routes, }) export default router
news.vue
<template> <div> <h1>News Page{{$route.params.id}}</h1> </div> </template> <script> export default { mounted(){ console.log(this.$route) } } </script>
NotFound.vue
<template> <div> <h1>Page not found</h1> </div> </template>
Routing Regular and Duplicate Parameters
- \d+: id must be a number
- +: id has at least one
- *:id may or may not be repeated multiple
- ?: IDs are optional, not repeatable, not multiple
index.js
mport News from '../components/News.vue' import Article from '../components/Article.vue' import Film from '../components/Film.vue' import Song from '../components/Song.vue' import Vidio from '../components/Vidio.vue' import NotFound from '../components/NotFound.vue' const routes = [ {path:'/news/:id',component: News}, // \d+: id must be a number {path:'/article/:id(\\d+)',component: Article}, // +: id has at least one {path:'/film/:id+',component: Film}, // *:id may or may not be repeated multiple {path:'/song/:id*',component: Song}, // ?: IDs are optional, not repeatable, not multiple {path:'/vidio/:id?',component: Vidio}, ]
Nested Route
The UI of some applications consists of nested, multilevel components. In this case, the parameters (id s) of a URL are different, the corresponding nested components have different structures, the main structure is the same, and the nested structure is different
The key code for index.js is as follows:
import User from '../components/User.vue' import Hengban from '../components/Hengban.vue' import Shuban from '../components/Shuban.vue' const routes = [ {path:'/user/', component: User, children:[ {path:'hengban',component:Hengban}, {path:'shuban',component:Shuban} ] }, ]
User.vue
<template> <div> <h1>user page</h1> <router-view></router-view> </div> </template>
Hengban.vue
<template> <div> <h1>This is a horizontal page</h1> </div> </template>
Shuban.vue
<template> <div> <h1>This is a vertical page</h1> </div> </template>
Vertical run view
Programmatic navigation: jump pages using js
Navigate to another location
In addition to <router-link to="url">which is used to create anchor tags for declarative navigation, we can use the instance method of the router to do this programmatically.
- Parameters can be string paths
this.$router.push("/news/:id")
- Parameter is an object with path
this.$router.push({path: '/news/:id'}) // Carry Parameter Jump this.$router.push({path: '/news/123456'})
- Named routes with parameters, let routers build paths
this.$router.push({name:'film',params:{id:123}})
- Path with query
this.$router.push({path:'/vidio',query:{search:'Bend to death'}})
Replace current location
this.$router.replace({path: '/news/123456'})
Replace current location
This method takes a single integer as a parameter and indicates the number of steps forward or backward in the history stack, similar to window.history.go(n).
<button @click="$router.go(1)">Forward</button> <button @click="$router.go(-1)">Back off</button>
Naming routes and redirections and aliases
Named Route
You can have multiple router-views and name each router-view, and a router-view has no name with default as its name.
App.vue Key Code
<router-view name="ShopTop"></router-view> <router-view></router-view> <router-view name="ShopFooter"></router-view>
index.js key code
import ShopMain from '../components/ShopMain.vue' import ShopTop from '../components/ShopTop.vue' import ShopFooter from '../components/ShopFooter.vue' { path: '/shop', components: { default:ShopMain, ShopTop:ShopTop, ShopFooter:ShopFooter } },
ShopMain.vue Key Code
<template> <div> <h1>ShopMain primary coverage</h1> </div> </template>
ShopTop.vue key code
<template> <div> <h1>ShopTop Header Component</h1> </div> </template>
ShopFooter.vue Key Code
<template> <div> <h1>ShopFooter Bottom Component</h1> </div> </template>
Redirect: redirect
- Redirection is also done in the routes configuration. From/a to redirection/b:
const routes = [{ path: '/home', redirect: '/' }]
- Redirection can also target named routes:
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
- Redirection can also use a function for dynamic redirection
That is, the input/mall route jumps to the/shop page
const routes = [ { path:'/mall', redirect:(shop)=>{ return {path:'/shop'} } }, ]
Alias: alias
The alias / home for / shop means that the URL still exists / store when the user accesses / store, but it matches / shop as if the user is accessing it. Multiple aliases by array
{ path: '/shop', alias: '/store', components: { default:ShopMain, ShopTop:ShopTop, ShopFooter:ShopFooter } },
Routing mode
Hash mode
A # appears with a hash-mode URL, and this part of the URL is never sent to the server, so it does not require any special handling at the server level
import { createRouter, createWebHashHistory } from 'vue-router' const router = createRouter({ history: createWebHashHistory(), routes: [ //... ], })
HTML5 mode
With HTML5 mode, URL s will look "normal" and requests will be sent to the server. So you need to configure the appropriate server
import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ //... ], })
Navigation Guard
The navigation guard provided by Vue router is primarily used to protect navigation by redirecting or canceling navigation. There are several ways to connect to the routing navigation process: globally, within each route or component.
router.beforeEach
Global Navigation Guard
index.js
router.beforeEach((to, from,next) => { // ... // explicitly return false to cancel the navigation console.log(to) console.log(from) next() })
Jump from store page to page page page
router.beforeResolve
Global protection, triggered when route jump is complete
router.beforeResolve(async to => { if (to.meta.requiresCamera) { try { await askForCameraPermission() } catch (error) { if (error instanceof NotAllowedError) { // ... handle the error and then cancel the navigation return false } else { // unexpected error, cancel the navigation and pass the error to the global handler throw error } } } })
beforeEnter
Single route protection, triggered before entering a route
{ path: '/shop', alias: '/store', components: { default: ShopMain, ShopTop: ShopTop, ShopFooter: ShopFooter } },
Jump from store page to page page page
Internal Component Protection
Written in Components
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
// Navigation protection within components beforeRouteEnter() { console.log("Routing Entry Component"); }, beforeRouteUpdate() { console.log("Route Update"); }, beforeRouteLeave() { console.log("Route Leave"); },
State Management
Responsive object management via reactive
inject subcomponents through reactive responsive objects, then through dependent provide rs and injects
index.js
import { reactive} from 'vue' // State Management Warehouse const store = { state : reactive({ message:"Hello" }), setMessage(value){ this.state.message = value; } } export default store
Parent component: App.vue
import store from './store/index.js' export default { provide:{ store } }
Sub-component: HelloWord.vue
inject:['store']
Vuex State Management
home.vue
Call $store
<template> <div class="home"> <h1>Quantity of goods:{{ $store.state.count }}</h1> <h2>Commodity price: 100</h2> <h1>Total commodity price:{{ $store.getters.totalPrice }}</h1> <button @click="changeEvent">Add quantity</button> <h1>Paragraph</h1> <p v-for="(item,i) in $store.state.dzList" :key="i">{{item.text}}</p> </div> </template> <script> // @ is an alias to /src import HelloWorld from "@/components/HelloWorld.vue"; export default { name: "Home", components: { HelloWorld, }, methods: { changeEvent: function () { // Method of Triggering State // Triggering parameterless methods // this.$store.commit("setCount"); // Method with parameters touched this.$store.commit("setCountNum", 3); }, }, mounted:function(){ this.$store.dispatch('getDz') } }; </script>
index.js
Use store
import { createStore } from 'vuex' // Manage data used globally export default createStore({ // Setting up global data state: { count:0, dzList:[] }, /** * Methods with computed attributes */ getters:{ totalPrice:function(state){ return state.count*100 } }, /** * Synchronization method * Method of modifying state */ mutations: { // No parameters setCount:function(state){ state.count++; }, // Has Parameters setCountNum:function(state,num){ state.count+=num; }, setDzList:function(state,arr){ state.dzList = arr; } }, /** * Asynchronous methods * Request to modify data using Ajax */ actions: { getDz:function(context){ // Open free API let api = "https://api.apiopen.top/getJoke?page=1&count=10&type=text"; // Make a request fetch(api) .then((res) => res.json()) .then((result) => { console.log(result) context.commit('setDzList',result.result) }); } }, modules: { } })
map auxiliary function
- mapState
- mapGetters
- mapMutations
- mapActions
map mapping makes data calls easier and allows you to use variable names directly without adding $store.state
Component Home.vue
import {mapState, mapGetters,mapMutations,mapActions} from 'vuex' export default { name: "Home", components: { HelloWorld, }, /** * Map state to component * Call data directly */ computed:{ //Mapping Data ...mapState(['count']), ...mapState({ productCount:(state)=>state.count }), //Mapping Calculation Properties ...mapGetters(['totalPrice']) }, methods: { changeEvent: function () { this.$store.commit("setCountNum", 3); }, //Mapping methods to change state ...mapMutations(['setCountNum']), ...mapActions(['getDz']) }, mounted:function(){ this.$store.dispatch('getDz') } };
vue3 for front-end and back-end interaction
By fetch()
Key Code Snippets
// Get data to display on the page setup() { // Open free API let api = "https://api.apiopen.top/getJoke?page=1&count=10&type=text"; // Make a request fetch(api) .then((res) => res.json()) .then((result) => { store.setDzList(result.result); console.log(result.result); }); return { store };
Through axios()
Terminal Installation axios:npm install axios --save
import axios from 'axios' // Get data to display on the page setup() { // Open free API let api = "https://api.apiopen.top/getJoke?page=1&count=10&type=text"; // Make a request axios.get(api).then((result)=>{ console.log(result) store.setDzList(result.data.result) // store.setDzList(result); }) return { store }; },
vite configuration cross-domain request
Cross-domain profile vite.config.js
/** * Configuration files for cross-domain servers */ module.exports = { proxy :{ '/api':{ target: 'https://pvp.qq.com/', changeOrigin:true, //Is cross-domain allowed rewrite: path => path.replace(/^\/api/,'') } } }
Mock.js Simulate Getting Data
Links: Click to Jump to Official Website.
You can intercept Ajax requests and return simulated response data
index.js
import Mock from 'mockjs' Mock.mock( "/user/userinfo", "get", (req,res)=>{ console.log(req,res) return{ username:"Old Chen", type:"Handsome!" } } )
Use of vue scaffold cli
Install scaffold cli
npm install -g @vue/cli
View Version
vue --version
Create Project
vue create vueproject01
Select Version
Switch to Project Path
cd vueproject01
Function
npm run serve
Modular management vuex
Import module user,user1 in store
import { createStore } from 'vuex' import user from './user.js' import user1 from './user1.js' // Manage data used globally export default createStore({ // Setting up global data state: { ... }, getters:{ ... }, mutations: { ... }, actions: { ... }, modules: { user, user1 } })
User module, user.js code as follows:
/** * User module */ const user = { state: () => ({ username: "Old Chen", age: 30 }), mutations: { setUsername:function(state){ state.username = "Xiao Chen" }, setAge:function(state){ state.age = 40 } }, actions: { asyncSetAge:function(context){ setTimeout(()=>{ context.commit('setAge') },3000) } }, getters: { description:function(state,getters,rootState){ return state.username + 'Age is' + state.age+'Age!' } } } export default user
Namespace
Role: Distinguish each module in case each module's getters and actions must have the same name
const user = { // Namespace namespaced: true, ..... export default user
Rendering User.vue in Routes
To add a module name
<!-- Namespace Writing --> <h1>User name:{{ $store.state.user1.username }}</h1> <h1>Age:{{ $store.state.user1.age }}</h1> <h1>Description:{{ $store.getters["user1/description"] }}</h1> <button @click="changeAge1">Modify Age</button>
Writing of Auxiliary Functions in Modules
<template> <!-- Namespace:Writing of Auxiliary Functions --> <h1>User name:{{ user1.username }}</h1> <h1>Age:{{ user1.age }}</h1> <h1>Description:{{ description }}</h1> <button @click=" setAge">Asynchronous Modification Age</button> </div> </template> <script> import { mapState, mapGetters, mapMutations, mapActions } from "vuex"; export default { computed: { ...mapState(["user1"]), ...mapGetters("user1", ["description"]), ...mapMutations('user1',['setAge']) }, methods: { ...mapActions("user1", ["asyncSetAge"]), }, }; </script>