关于Vue的学习小结

1. 创建Vue3单页面应用程序项目

官方提供两种快速创建 SPA 项目方式：

  • 基于 vite 创建项目 （小而巧，仅支持 Vue3.x ）
  • 基于 vue-cli 创建项目 （大而全，支持 Vue2.x 和 Vue3.x ）

2. template 模板节点

  • Vue2.x 只支持一个根节点
  • Vue3.x 支持多个根节点，因此可以不用一个 div 来包裹

3. 给元素动态绑定class类名

  • 通过三元表达式来给元素动态绑定单个 class 类名：
查看代码 
内容



data( ) {
         return { isItalic: true }
}

.thin {   // 字体变细
   font-weight:200;
}
.italic {  // 倾斜字体 
    font-style: italic;
}
  • 通过数组格式来给元素动态绑定多个 class 类名：
查看代码 
MyDeep





data( ) {
    return {
      isItalic: true, 
      isDelete: false. 
}
  • 通过对象格式来给元素动态绑定多个 class 类名：
查看代码 
MyDeep




data( ) {
  return {
     class0bj:{  // 对象中，属性名是 class 类名，值是布尔值 
         italic: true, 
         delete: false,
}

4. :style绑定

可以以对象形式给元素设置 style 属性。

查看代码

7. 父子组件之间数据双向同步

父子组件之间实现数据双向同步，则在组件上使用 v-model： 对自定义进行绑定。

查看代码 

// Farther.vue
// 通过给自定义属性绑定 v-modle


data:{
    num:0
}

// Son.vue
// 
props: ['number']
emits: ['update:number']  // update 是固定写法，需要给 number 实现双向同步
 add (){
     this.$emit('update:number',this.number + 1)
}

8. 兄弟组件之间的通信

Vue3.x中兄弟组件之间实现数据共享的方案跟Vue2.x中一样，使用 EventBus 方案，但是在 Vue3.x 中可以借助第三方包 mitt 来创建 eventBus 对象。

安装 mitt 命令：npm i mitt

9. 向直系后代组件共享非响应式数据

父节点的组件向其子孙组件共享非响应式数据时，组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系组件之间的数据共享。

  • 父组件通过 provide 共享数据
  • 子组件通过 inject 接收数据
查看代码 
// parent.vue
export default {
data( ) { 
    return {
      color:"red"  // 1.定义"父组件"要向"子孙组件"共享的数据
    },
}，
provide( ) {   // 2. provide 函数 return 的对象中，包含了"要向子孙组件共享的数据" 
    return {
      color: this.color,
    }
}
// ----------------------
// son.vue

10. 向直系后代组件共享响应式数据

  • 父节点使用 provide 向下共享数据时，可以结合 computed 函数向下共享响应式的数据
  • 如果父级节点共享的是响应式的数据，则子孙节点必须以 .value 的形式进行使用
  • 响应式数据就是，父组件数据变了，子组件接收到的也变化
查看代码 
// parent.vue
// 1. 从 vue 中按需导入 computed 函数
import { computed } from "vue" 

export default {
data( ) {
    return { color: 'red' }
}。
provide( ) { 
    return {
    // 2. 使用 computed 函数，可以把要共享的数据“包装为"响应式的数据
      color: computed(() => this.color), 
    } 
}

--------------------------
// son.vue

11. Vue2和Vue3全局配置 axios

Vue2全局配置axios：

在vue2的项目中全局配置 axios 需要在 main.js 入口文件中，通过 Vue 构造函数的 prototype原型对象全局配置axios。

安装 axios : npm i axios -S

查看代码 

// main.js
import Vue from 'vue'
import App from'./App.vue3 

// 1. 导入 axios
import axios from 'axios'

// 2. 配置请求根路径
axios.defaults.baseURL ='https://www.escook.cn'
// 3. 通过 Vue 构造函数的原型对象，全局配置axios
Vue.prototype.$http = axios

new Vue({
    render: h => h(App),
}).$mount('#app')

Vue3全局配置axios：

安装 axios : npm i axios -S

然后在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios 。

查看代码 
// main.js
// 导入 axios
import axios from 'axios'

// 将 app 创建实代码例拆分开来写
const app = createApp(App)

// 为 axios 配置项目的请求跟路径
axios.defaults.baseURL = 'https://www.escook.cn'

// $http 可以自定义，这里模拟官方内部的成员以 $ 开头
app.config.globalProperties.$http = axios 

app.mount('#app')
-------------------------------------
// 组件上使用 this.$http.get 可以发起请求