Vue基础总结

目录

前置准备

目录结构

Vue基础

        模板语法

        条件渲染if

        列表渲染for

        事件处理器

        表单输入绑定

        组件基础

        Props组件交互

        自定义事件实现组件交互

        组件生命周期

        Axios网络请求

        Axios网络请求封装

Router路由 

        Router引入

        Router传递参数

        嵌套Router

Vuex多组件交互

        Vuex的核心

Vue3新特性

Vue3加载ElementPlus


前置准备

vue是基于nodejs的,需要使用nodejs附带的npm命令安装

官方中文网站:

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

安装Vue工具 Vue CLI

Vue CLI Vue.js 开发的标准工具,Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

npm install -g @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

vue --version

创建一个项目

1运行以下命令来创建一个新项目

vue create 项目名称

重点:项目名称不允许有大写

温馨提示

在控制台中,可以用上下按键调整选择项

在控制台中,可以用空格(spacebar)选择是否选中和取消选中

可以选择默认项目模板,或者选“手动选择特性”来选取需要的特性。

 

2我们选择手动选择特性

我们选择BabelProgressive Web App (PWA) Support 两个选项即可

温馨提示

在学习期间,不要选中 Linter / Formatter 以避免不必要的错误提示

 

3Vue目前有两个主流大版本vue2vue3,我们本套课程选择vue3最新版本

 

4配置放在哪里? In dedicated config files 专用配置文件或者 In package.json在package.json文件,选择第一个

 

5将其保存为未来项目的预置? y代表保存,并添加名字,n不保存,我们不保存因为以后可能会修改

 

6项目创建成功如下提示信息

 

运行项目

第一步:进入项目根目录cd vue-demo

第二步:运行npm run serve 启动项目

 

安装Vue高亮插件

VSCode中安装vetur或者volar都可,前者针对Vue2版本,后者针对Vue3版本

目录结构

vue-demo是创建项目时定义的项目名称,以下是目录结构,组件也就是页面,渲染数据的

Vue基础

        模板语法

文本插值:

数据绑定最常见的形式就是双大括号语法的插值

注意:一般配合js中的data()函数设置数据,该函数的作用就是定义属性,然后在template标签中引入,template标签就是html标签

<template>
  <p>{{ msg }}</p>
</template>

<script>
export default {
  data(){//这是固定写法,返回一个对象,对象里定义属性
    return { 
      msg:1
    }
  }
}
</script>

原始html

双大括号的方式会将引入的数据解释为普通文本,为了输出真正的html,需要使用v-html命令(你可以理解为innerText和innerHtml的区别)

<template>
  <p>{{ msg }}</p>
  <p v-html="html"></p>
</template>

<script>
export default {
  data(){
    return { 
      msg:1,
      html:"<a href='http://www.baidu.com'>baidu</a>"
    }
  }
}
</script>

属性

双括号的语法不能在html的属性中使用,如果需要使用,我们可以通过v-bind的方式进行绑定

<template>
  <p>{{ msg }}</p>
  <p v-html="html"></p>
  <p v-bind:id="id">id</p>
</template>

<script>
export default {
  data(){
    return { 
      msg:1,
      html:"<a href='http://www.baidu.com'>baidu</a>",
      id:1001
    }
  }
}
</script>

如果觉得麻烦我们还可以简写,通过(:属性)的方式就可以解决

<template>
  <p>{{ msg }}</p>
  <p v-html="html"></p>
  <p v-bind:id="id">v-bind id</p>
  <p :id="id">:id</p>
</template>

<script>
export default {
  data(){
    return { 
      msg:1,
      html:"<a href='http://www.baidu.com'>baidu</a>",
      id:1001
    }
  }
}
</script>

        条件渲染if

v-if和v-else

if和else是进行条件判断的,条件满足则执行if,不满足则执行else

<template>
  <p v-if="flag">你好</p>
  <p v-else>再见</p>
</template>

<script>
export default {
  data(){
    return { 
      flag:true
    }
  }
}
</script>

 v-show

vue还提供了另一种条件判断的方式

<template>
  <p v-if="flag">你好</p>
  <p v-else>再见</p>

  <p v-show="flag">hello world</p>
</template>

<script>
export default {
  data(){
    return { 
      flag:true
    }
  }
}
</script>

 

v-if和v-show的区别

v-if 是“真正”的条件渲染,因为它会确保在切换过程中,条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

 

v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。

 

因此,如果需要非常频繁地切换,则使用 v-show 较好;

如果在运行时条件很少改变,则使用 v-if 较好

        列表渲染for

我们可以使用v-for基于一个数组来渲染一个列表,该指令需要使用item in items形式的特殊语法,其中items是源数组item是被迭代的数组元素的别名

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data(){
    return { 
      items : [1,2,3,4,5]
    }
  }
}
</script>

 

维护状态 

当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的 key 属性:

<div v-for="(item,index) in items" :key="item.id或者index">

 <!-- 内容 -->

</div>

 

        事件处理器

监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件,并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

注意:点击事件通常配合js中的methods属性使用,该属性是一个对象,对象中定义使用到的方法,methods属性和data()方法同级

<template>
  <button v-on:click="submit">点击</button>
  <button @click="submit2">点击简写</button>
</template>

<script>
export default {
  data(){
    return { 
      
    }
  },
  methods:{
    submit(){
      console.log("点击一次");
    },
    submit2(){
      console.log("点击简写");
    }
  }
}
</script>

 

重点:methods中如果想要访问data方法中的数据,直接使用this访问即可

        表单输入绑定

通过v-model指令监听输入框,当我们对输入框中的内容进行了修改,那么v-mode会自动将修改的内容同步到绑定的属性中

<template>
  <input type="text" v-model="msg">
  <p>{{ msg }}</p>
</template>

<script>
export default {
  data(){
    return { 
      msg:""
    }
  }
}
</script>

 

懒加载lazy

v-model是对输入框进行实时监控的,也就是说我们只要一有修改,就会自动同步,但是这样会大量消耗资源,此时我们就可以通过v-model.lazy实现懒加载,当我们的输入框失去焦点的时候才会同步

<template>
  <input type="text" v-model.lazy="msg">
  <p>{{ msg }}</p>
</template>

<script>
export default {
  data(){
    return { 
      msg:""
    }
  }
}
</script>

 

 

清空空格trim

有时候我们不允许用户使用空格开头或者结尾,此时我们就可以通过v-model.trim去除首尾空格

<template>
  <input type="text" v-model.trim="msg">
  <p>{{ msg }}</p>
</template>

<script>
export default {
  data(){
    return { 
      msg:""
    }
  }
}
</script>

 

        组件基础

单文件组件

Vue 单文件组件(又名 *.vue 文件,缩写为 SFC)是一种特殊的文件格式,它允许将 Vue 组件的模板(html)逻辑(js) 与 样式(css)封装在单个文件中

组件模板

<template><!-- 相当于html标签 -->
</template>

<script>
export default {
	data(){
		return {
			//定义属性,方便组件使用
		}
	}
}
<!-- scoped:如果在style标签中添加该属性,就代表当前样式只在当前组件中生效-->
</script scoped>

<style>
</style>

 

在app.vue根组件中加载组件

第一步:引入组件 import 组件名 from '组件路径'

第二步:挂载组件 components: { 组件名 }

第三步:显示组件 < 组件名 />

 

        Props组件交互

组件之间是需要存在数据交互的,如果组件之间毫无关系,那么组件的意义就很小了

通过Props属性可以实现将父组件的内容交互给子组件

父组件:

在显示子组件的地方添加属性,

语法:

        :属性名="属性值"

<template>
  <HelloWorld :msg="msg"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
  data(){
    return { 
      msg:"你好,我是你爹"
    }
  },
  components:{
    HelloWorld
  }
}
</script>

子组件:

在子组件中添加props属性,该属性接收父组件传来的属性名,并且定义该属性的类型

<template>
  <p>{{ msg }}</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String //msg不是乱写的,一定要和父组件中的交互的属性名字对应
  }
}
</script>

 

        自定义事件实现组件交互

如果只能父组件将数据传递给子组件,而子组件不能传递给父组件,那这样局限性太大了,所以我们可以通过$emit实现自定义事件,然后在父组件添加事件即可

子组件:

<template>
  <p>{{ msg }}</p>
  <button @click="sendHandle">sendHandle</button>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods:{
    sendHandle(){
      //参数一:属性名
      //参数二:传递的数据
      this.$emit("consumer","handle")
    }
  }
}
</script>

父组件:

是在子组件显示的标签中添加自定义事件

<template>
  <HelloWorld :msg="msg" @consumer="getHandle"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
  data(){
    return { 
      msg:"你好,我是你爹"
    }
  },
  components:{
    HelloWorld
  },
  methods:{
    getHandle(data){//data就是传递过来的数据
      console.log(data);
    }
  }
}
</script>

 

        组件生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会

为了方便记忆,我们可以将他们分类,以下显示的都是函数

创建时:beforeCreatecreated

渲染时:beforeMountmounted

更新时:beforeUpdateupdated

卸载时:beforeUnmountunmounted

        Axios网络请求

Axios 是一个基于 promise 的异步网络请求库axios请求过后返回的是一个Promise对象

 

安装

Axios的应用是需要单独安装的 npm install --save axios

 

引入方式

1、组件中引入: import axios from "axios"

2、在主入口main.js中全局引用:

import axios from "axios"



const app = createApp(App);

app.config.globalProperties.$axios = axios

app.mount('#app')

// 在组件中使用网络请求要使用this.$axios

this.$axios.get()

this.$axios.post()

网络请求基本实例: 

<template>
  <button @click="getImage">发送</button>
  <p>{{ msg }}</p>
</template>

<script>
import axios from "axios"
export default {
  data(){
    return{
      msg:""
    }
  },
  methods:{
    getImage(){
      this.msg = "图片加载中";
      axios({
        methods:"get",
        url:"https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wHfZ?ver=4a32"
      })
      .then(res => this.msg = res.data)
    }
  }
}
</script>

 

post请求

温馨提示

post请求参数是需要额外处理的

  1. 安装依赖: npm install --save querystring
  2. 转换参数格式: qs.stringify({})
axios({

  method:"post",

  url:"http://iwenwiki.com/api/blueberrypai/login.php",

  data:qs.stringify({

    user_id:"iwen@qq.com",

    password:"iwen123",

    verification_code:"crfvw"

   })

}).then(res =>{      //回调函数的参数是一个res,通过res.data拿到请求的数据

  console.log(res.data);

})


快捷方案

get请求

axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")

   .then(res =>{

   console.log(res.data);

   })

post请求

axios.post("http://iwenwiki.com/api/blueberrypai/login.php", qs.stringify({

   user_id: "iwen@qq.com",

   password: "iwen123",

   verification_code: "crfvw"

   }))

    .then(res => {

    console.log(res.data);

    })

        Axios网络请求封装

在日常应用过程中,一个项目中的网络请求会很多,此时一般采取的方案是将网络请求封装起来,也就是规范Axios网络请求

1、在src目录下创建文件夹utils,并创建文件request,用来存储网络请求对象 axios

import axios from "axios"
import qs from "querystring"

const errorHandle = (status,info) => {
  switch(status){
    case 400:
      console.log("语义有误");
      break;
    case 401:
      console.log("服务器认证失败");
      break;
    case 403:
      console.log("服务器拒绝访问");
      break;
    case 404:
      console.log("地址错误");
      break;
    case 500:
      console.log("服务器遇到意外");
      break;
    case 502:
      console.log("服务器无响应");
      break;
    default:
      console.log(info);
      break;
   }
}


const instance = axios.create({
  //网络请求的公共配置
  timeout:5000
})

//配置拦截器
//发送数据之前
instance.interceptors.request.use(    
//类似promise,传递两个方法,一个是成功的方法,一个是失败的方法
  config =>{
    if(config.method === "post"){
      config.data = qs.stringify(config.data)
     }
    return config;
   },
  error => Promise.reject(error)
)

//发送数据之后
instance.interceptors.response.use(
  response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
  error =>{
    const { response } = error;
    errorHandle(response.status,response.info)
   }
)
//导出instance对象
export default instance;


2、在src目录下创建文件夹api,并创建文件index和path分别用来存放网络请求方法和请求路径
// path.js(存放请求路径)

const base = {
  baseUrl:"http://iwenwiki.com",
  chengpin:"/api/blueberrypai/getChengpinDetails.php"
}
export default base

// index.js(存放网络请求)

import path from "./path"
import axios from "../utils/request"

export default {
  getChengpin(){
    return axios.get(path.baseUrl + path.chengpin)
   }
}

3、在组件中直接调用网络请求

import api from "../api/index"

api.getChengpin().then(res =>{
  console.log(res.data);

Router路由 

在Vue中,我们可以通过vue-router路由管理页面之间的关系,比如:页面的跳转

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举

        Router引入

第一步:安装路由 npm install --save vue-router

并且安装路由的依赖:npm i vue-router

第二步:创建参与跳转的组件

//index.vue
<template>
  <h3>首页</h3>
</template>

<script>
export default {
}
</script>
//view.vue
<template>
    <h3>view</h3>
</template>

第三步:在src目录下创建route目录,在该目录总配置独立的路由文件index.js

import { createRouter,createWebHashHistory } from "vue-router";
import view from "../components/view"//引入跳转的组件
import index from "../components/index"//引入跳转的组件

const routes = [
    {
        //一个对象的作用就是将路径和组件绑定
        path:"/",//定义跳转路径
        component:index//定义跳转的组件
    },
    {
        path:"/view",
        component:view
    }
]

const router = createRouter({//构建router对象,传递routes
    history:createWebHashHistory(),
    routes:routes
})

export default router//导出router对象

第四步:在main.js中引入路由到项目

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import index from "./route/index"//引入router配置文件

const app = createApp(App);
app.use(index)//将router配置文件添加
app.mount('#app')

第五步:在app.vue的template标签中指定路由显示入口 <router-view/>,在app.vue的template标签中指定路由跳转

<template>
  <RouterLink to="/">首页</RouterLink> | <!-- 路由跳转 -->
  <RouterLink to="/view">view</RouterLink> <!-- 路由跳转 -->
  <RouterView></RouterView> <!-- 路由显示入口 -->
</template>

<script>

export default {
}
</script>

 

 

        Router传递参数

页面跳转过程中,是可以携带参数的,这也是很常见的业务

例如:在一个列表项,点击进入查看每个列表项的详情

1、在index.js配置文件中指定参数名

 2、在路由跳转的时候添加传递的数据,类似Restful风格

 

3、在跳转的组件中显示数据

语法:$route.params.参数名

 

        嵌套Router

路由嵌套是非常常见的需求,就是组件的子组件也添加路由

1、index.js中的routes属性中的对象添加children属性

import { createRouter,createWebHashHistory } from "vue-router";
import view from "../components/view"//引入跳转的组件
import index from "../components/index"//引入跳转的组件
import view1 from "../view/view1"
import view2 from "../view/view2"

const routes = [
    {
        //一个对象的作用就是将路径和组件绑定
        path:"/",//定义跳转路径
        component:index//定义跳转的组件
    },
    {
        path:"/view",
        component:view,
        //子路由的path不用加斜杠
        children:[
            {
                path:"view1",
                component:view1
            },
            {
                path:"view2",
                component:view2
            }
        ]
    }
]

const router = createRouter({//构建router对象,传递routes
    history:createWebHashHistory(),
    routes:routes
})

export default router//导出router对象

 2、添加子路由用到的组件

view1:

view2:

3、修改view子组件

<template>
    <ul>
        <li><RouterLink to="/view/view1">view1</RouterLink></li>
        <li><RouterLink to="/view/view2">view2</RouterLink></li>
    </ul>
    <RouterView></RouterView>
</template>

4、修改app.vue主组件

<template>
  <RouterLink to="/">首页</RouterLink> |
  <RouterLink to="/view">view</RouterLink>
  <RouterView></RouterView>
</template>

<script>

export default {
}
</script>

首页

 view

view1

 view2

 

 

Vuex多组件交互

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说:状态管理可以理解成为了更方便的管理组件之间的数据交互,提供了一个集中式的管理方案,任何组件都可以按照指定的方式进行读取和改变数据

引入Vuex的步骤
第一步:安装Vuex npm install --save vuex
第二步:在src目录下创建store目录,然后创建index.js文件,该文件就是Vuex的配置文件

import { createStore } from 'vuex'
export default createStore({
 state: {
   counter:0
  }
})

第三步:在主文件main.js中引入Vuex

import store from './store'
app.use(store)

第四步:在组件中读取数据

<p>counter:{{ $store.state.counter }}</p>
// 或者
import { mapState } from 'vuex';
computed:{
   ...mapState(["counter"])
}

        Vuex的核心

最常用的核心概念包含: StateGetterMutationAction

Getter

对Vuex中的数据进行过滤

1vuex配置文件:

2组件编写:

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数

 

1vuex配置文件:

2组件编写:

Action

Action 类似于 mutation,不同在于:

1vuex配置文件:

import { createStore } from 'vuex'

import axios from "axios"

export default createStore({

 state: {

  counter: 0

  },

 getters: {

  getCount(state){

   return state.counter > 0 ? state.counter : "counter小于0,不符合要求"

   }

  },

 mutations: {

  setCounter(state, num) {

   state.counter += num

   }

  },

 actions: {

  asyncSetCount({ commit }){ //对象解构赋值

//异步请求

   axios.get("http://iwenwiki.com/api/generator/list.php")

    .then(res =>{

    commit("setCounter",res.data[0]) //调用方法,并传递请求的数据

    })

   }

  }

})

2、组件编写

import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';

methods:{

  ...mapActions(["asyncSetCount"]),

  clickAsyncHandler(){

    // this.$store.dispatch("asyncSetCount")

    // 或者

    // this.asyncSetCount()

   }

}

  • Action 提交的是 mutation,而不是直接变更状态
  • Action 是异步的,mutation是同步的

Vue3新特性

Vue3是目前Vue的最新版本,自然也是新增了很多新特性

六大亮点

  • Performance:性能更比Vue 2.0强。
  • Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。
  • Composition API:组合API-setup方法(可以使用setup替代vue2中的data属性和methods属性)
  • Fragment, Teleport, Suspense:“碎片”,Teleport即Protal传送门,“悬念”
  • Better TypeScript support:更优秀的Ts支持
  • Custom Renderer API:暴露了自定义渲染API

重点:但是setup()中定义的属性和方法需要通过return {属性… , 方法…}的方式返回

 

ref或者reactive

在2.x中通过组件data的方法来定义一些当前组件的数据

data() {

 return {

  name: 'iwen',

  list: [],

  }

}

在3.x中通过ref或者reactive创建响应式对象

import { ref,reactive } from "vue"  //使用之前需要引入
export default {
 name: 'HelloWorld',
 setup(){
   const name = ref("iwen") //ref设置简单数据
   const state = reactive({ //reactive设置复杂数据
     list:[]
    })

    name.value = "hello world" //如果需要修改值,那么需要使用属性名.value设置
  return{
    name,
    state
   }
  }
}

methods中定义的方法写在setup()

在2.x中methods来定义一些当前组件内部方法

methods:{
  http(){}
}

在3.x中直接在setup方法中定义并return

setup() {
  const http = ()=>{
    // do something
   }
  return {
   http
   };
}

setup()中使用props和context

在2.x中,组件的方法中可以通过this获取到当前组件的实例,并执行data变量的修改,方法的调用,组件的通信等等,但是在3.x中,setup()在beforeCreate和created时机就已调用,无法使用和2.x一样的this,但是可以通过接收setup(props,ctx)的方法,获取到当前组件的实例和props

export default {
 props: {
  name: String,
  },
 setup(props,ctx) {
  console.log(props.name)
  ctx.emit('event')
  },

Vue3加载ElementPlus

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Element Plus 基于 Vue 3,面向设计师和开发者的组件库

官方文档:Button 按钮 | Element Plus (element-plus.org)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值