The importance of VUE can be imagined. There is nothing wrong with learning VUE 3.0 in advance. This article will take you to understand vue3.0 construction engineering, ANTD introduction, life cycle, data two-way data binding use, method use, computing properties, monitoring, component introduction, component value transmission, routing value transmission and other knowledge points, I am a novice, big guy more guidance. Less nonsense, through the actual operation to do a login, list, detailed interface, directly on the code.
Github source: github.com/parchments/…
Effect preview: Login page, home page, list page, details page
Home page
List of pp.
Details page
1. Project construction
-
Installing Node is a must. In addition, the latest scaffold of vuE-CLI4 generation or above needs to be installed. You can install/update the scaffold version by running the following NPM command
Scaffolding upgrade: NPM update@vue /cli Initial installation: NPM i@vue /cli -g
Select pre-installed plug-ins based on your requirements
vue create [projectName]
Copy the code
Vue 2.0 import vue is import vue from ‘vue’, vue3.0 is deconstruct import, see deconstruct import means this project is vue3.0, well done, continue… Global mount method
By the way, if vue3.0+ TS is developed, the global mount will need to be as follows
Ts import {createApp} from "vue"; // main.ts import {createApp} from "vue"; import App from "./App.vue"; + import axios from "axios"; const app = createApp(App); + app.config.globalProperties.$http = axios; App.mount ("#app") add + code to file shims-vue.d.ts // shims-vue.d.ts Declare Module "*.vue" {import {defineComponent} from "vue"; const component: ReturnType<typeof defineComponent>; export default component; } + declare module "@vue/runtime-core" { + import { AxiosInstance } from "axios"; + interface ComponentCustomProperties { + $http: AxiosInstance; + +}}Copy the code
2. Install and introduce ANTD
$NPM I --save ant-design-vue@next // If you need to import as needed, install babel-plugin-import and configure babel.config.js$NPM I --save babel-plugin-importCopy the codeA complete introduction
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
const app = createApp();
app.config.productionTip = false;
app.use(Antd);
Copy the codeThe above code completes the introduction of Antd. Note that style files need to be introduced separately.
Local import component
import { createApp } from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';
const app = createApp();
app.config.productionTip = false;
/* Automatically register components under Button, such as Button.Group */
app.use(Button);
app.config.globalProperties.$message = message;
Copy the codeIf you need to load on demand, configure ant-design-vue
Open the babel.config.js file in the root directory and change the contents to
Module. exports = {presets: ["@vue/cli-plugin-babel/preset"], plugins: [// the following is configuration load on demand [" import", {libraryName: preset"] "Ant-design-vue ", libraryDirectory: "es", style:" CSS "// less file loaded when true}]]}Copy the codeAt present, I introduce ANTD in the way of global introduction, you can introduce according to your own needs.
3. Page layout
App. Vue web page
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="less">
#app {
text-align: center;
}
</style>
Copy the codeLogin page: Involves data definition, responsive data, lifecycle, method call, instance fetch (i.e. this of vue2.x)
//login <template> <div class="box"> <h1> Login </h1> < H2 >{{name}}</h2> < A-form class="form" layout="inline"> < A-form-item Label ="account" > < A-input V-model :value="account" type="text" placeholder=" placeholder "/> <a-input V-model :value="password" type="password" placeholder=" please input password" /> </a-form-item> <h3> {{count}} seconds after login < / h3 > < a - button @ click = "login ()" block: disabled = "account = = = '| | password = = =" " Type ="primary"> login </a-button> </a-form> </div> </template> <script> //vue-cli 3.0 // import {reactive} from 4.5.4 Import 'default' (imported as 'vue') was not found in 'vue' import {reactive, toRefs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, OnErrorCaptured} from 'vue' // Vue - CLI 4.5.4 Vue3.0 integrated @vue/ commination-api export default {name: 'login', components: {}, // start data between beforeCreate and created, Setup () {// The setup(props,context) function defaults to two properties, the context property and the context setup function cannot access this // create a responsive data object Similar date need to lead into the const state = reactive ({count: 3, name: 'I am a responsive data name', the account: "', / / account password: Vue 3.0 uses the getCurrentInstance method to get the current component instance, and then uses the CTX attribute to get the current context. CTX. Const {CTX} = getCurrentInstance(); const {CTX} = getCurrentInstance(); Console. log(toRefs) // Login method const login = () => {// state.count++; console.log(ctx); let {account,password} = state; / / object to deconstruct the if (account = = = "" | | password = = =" ") {alert (' account password cannot be empty)} else {setInterval (() = > {state. The count -- --; },1000) setTimeout(()=>{ ctx.$router.push('/index'); }, 3000); } // return} // The following is the life cycle // before component mounting onBeforeMount(() => {console.log('onBeforeMount, before component mounting, BeforeMount ')}) // Instances are mounted onMounted(() => {console.log('onMounted, instances are mounted Mounted ')}) // onBeforeUpdate(() => {console.log('onBeforeUpdate, before response data changes, Equivalent to beforeUpdate')}) // Updated(() => {console.log('onUpdated, responsive data changes complete, Updated ')}) // onBeforeUnmount(() => {console.log('onBeforeUnmount, before instance destruction, BeforeDestroy ')}) // Instance destroyed onUnmounted(() => {console.log('onUnmounted, instance destroyed, OnErrorCaptured (() => {console.log('onErrorCaptured, Error data capture ')}) // Setup function return value export return {//... // You can't change data created by Reactive to reactive if you don't use toRefs. </script> <style lang="less" scoped>. Box {width: 50%; margin: 0 auto; padding-top: 200px; .form{ width: 60%; margin: 0 auto; padding-top: 30px; } } </style>Copy the codeSetup is the entry point to the Composition API. Vue3.0 is a new property that allows you to use the Composition API in setup. In the code above we initialize reactive data in Setup and then return an object containing the declared reactive data and a method.
The setup function takes two arguments, props and context, setup(props,context);
Properties passed in from outside the props component
Export default {props: {title: {type: String}}, setup(props) {console.log(props. Title)}}Copy the codeContext is an object containing three attributes: attrs, slots, and emit
Attrs is the same as Vue2.0’s this.$attrs, which is an attribute passed in externally that is not defined in props. For attrs as for props, we cannot use es6 deconstruction for attrs, we must use attrs.name.
Slots corresponds to component slots, which corresponds to Vue2.0’s this.$slots. Like props and attrs, slots is also undestructible.
Emit corresponds to Vue2.0’s this.$emit, which is the exposed event.
Home. Vue web page
< the template > < div > < Nav / >, < the router - the view > < / router - the view > < br / > < br / > < br / > < br / > < a - button @ click = "back ()" > log out < / a - button > </div> </template> <script> import {reactive} from '@vue/ comport-api 'import {reactive} from '@vue/ comport-api 'Vue) was not found in the' Vue 'import {reactive, toRefs getCurrentInstance} from' Vue / / Vue - cli 4.5.4 Later vue3.0 integrated @vue/composition-api import Nav from '.. /.. /components/nav.vue' export default { name: 'home', components: {Nav}, // Generates data between beforeCreate and created, which is equal to the combination of beforeCreate and created setup(props,context) {console.log(context); Function props,context, and context setup cannot access this; // Const state = reactive({}); // Get the current routing instance Vue 3.0 uses the getCurrentInstance method to get the current component instance, and then uses the CTX property to get the current context. Const {CTX} = getCurrentInstance(); const {CTX} = getCurrentInstance(); / / login method const back = () = > {CTX. $router. Push ('/login '); } // The setup function returns the value of the export return {... toRefs(state), back } } } </script>Copy the codeThe index – > index. The vue web page
<template> <div style="padding-top: 100px;" </h2> <img SRC =".. /.. /.. /assets/logo.png" alt=""> </div> </template> <script> import { reactive, toRefs, getCurrentInstance } from 'vue' export default { name: 'index', // components: Setup () {const state = reactive({}) const {CTX} = getCurrentInstance(); Console. log(CTX) // Setup function return value export return {... toRefs(state) } } } </script>Copy the codeAccountlist. vue list page (calculate attributes)
<template> <div style="margin-top: 100px;" >< ti :title="title"></ti> <h3> <a-table :data-source="list" :pagination="false" style="width: 60%; margin: 0 auto 30px;" > <a-table-column key="account" title="account" data-index="account" /> <a-table-column key="password" title="password" data-index="password" /> <a-table-column key="action" data-index="action"> <template v-slot="{record}"> <span> <a @click="goToLink(record.id)"> </a> </span> </template> </a-table-column> </a-table> </a-table> < A-input type="text" v-model:value="leftValue" placeholder="leftValue" style="width: 100px;" /> <a-input type="text" v-model:value="rightValue" placeholder="rightValue" style="width: 100px;" {{resultValue}} </div> <! -- <div> <h2>Clicked {{ count }} times</h2> <h2>Watch Count is {{ watchCount }}</h2> <button @click="increase">Click</button> </div> --> </div> </template> <script> import { reactive, toRefs, getCurrentInstance, onMounted, computed } from 'vue' import title from './component/title.vue' export default { name: 'accountList', components: { 'ti': title }, setup(props, context) { console.log('propss,context', props, context) const state = reactive({ title: List: [], count: 3, leftValue: 0, rightValue: 0, // Calculate attribute resultValue: computed(() => { return Number(state.leftValue) + Number(state.rightValue); }) }) // const count1 = ref(0); // const watchCount = ref(0); // function increase () { // count1.value++; / /}; // watch( () => count1.value, // (val) => { // watchCount.value = val; / / / /}); Const {CTX} = getCurrentInstance(); Console. log(' list instance ', CTX) function goToLink(index) {CTX.$router.push({path: '/accountList/detail', query: {id: Function getList() {// axios request let timer1 = setInterval(() => {state.count--; if (state.count < 1) { clearInterval(timer1) return } }, 1000) console.log(' request list data ') // Let timer2 = setTimeout(() => {state.list = [{id: 1, account: 'admin', password: '111111' }, { id: 2, account: 'chushi', password: 'chushi-111' }, { id: 3, account: 'six', password: '666'}] clearTimeout(timer2)}, 2000) // Async getList(params) {// state.loading = true; // try{ // let res = await ctx.$api.systemManage.getList(params); // if (res.data.retcode === ctx.$config.RET_CODE.SUCCESS_CODE) { // let data = res.data.data; // if (data.length > 0) { // state.tableData = data; // state.paginationParams.pageSize = data.pageSize; / / / / the number of each page state. PaginationParams. Size = data. The size; / / the current page number / / state paginationParams. Total = data. The total; / / the total number of article / / state paginationParams. Pages = data. The pages; } else {// state.tableData = []; / / / /}} else {/ / CTX. $Message. Error (' request is successful, temporarily no data); // } // state.loading = false; // }catch(e){ // state.loading = false; // ctx.$message. error(' no data yet '); // console.log(e); // } // } } onMounted(() => { getList(); }) // The setup function returns the value of the export return {... toRefs(state), goToLink, } } } </script>Copy the codeDetail page (Routing parameters)
<template> <div> <h3> Request data with parameter ID {{id}} </h3> <router-link to="/accountList"> Return list </router-link> </div> </template> <script> import { reactive, toRefs, getCurrentInstance } from 'vue' import { useRoute } from 'vue-router' export default { name: 'detail', components: { }, setup(props,context) { const state = reactive({ id: '' }) const { ctx } = getCurrentInstance(); Const {query} = useRoute(); Console. log(query) state.id = query.id; Console. log(' details ', CTX,context) // Setup function return value export return {... toRefs(state) } } } </script>Copy the codeI believe that you have a preliminary understanding of the basic usage of VUe3.0. As a rookie, I am also constantly learning and constantly updating ING
Website document: v3.cn.vuejs.org/api/applica…