vue高级

vue高级

vue脚手架

我们可以使用Vue CLI来创建vue脚手架项目Vue CLI官方文档

安装vue/cli

npm install -g @vue/cli
# 或
yarn global add @vue/cli

vue --version
# 或
vue -V

#升级
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

创建一个vue项目

# 查看create命令的帮助
vue create -h

# 创建一个hello-world 项目
vue create hello-world

更多详细信息可以参考官方文档:vue-create

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

关于不同版本的Vue

  1. vue.js与vue.runtime.xxx.js的区别

    vue.js是完整版的Vue，包含：核心功能 + 模板解析器
    vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器

  2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容

vue.config.js

  • 使用vue inspect > output.js可以查看到Vue脚手架的默认配置
  • 使用vue.config.js可以对脚手架进行个性化定制,可以修改脚手架的默认配置

ref属性

  • 被用来给元素或子组件注册引用信息（id的替代者）
  • 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  • 使用方式

    打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
    获取：this.$refs.xxx

props配置项

  • 功能：让组件接收外部传过来的数据

  • 传递数据：<Demo name="xxx"/>

  • 接收数据：
    第一种方式（只接收）：props:['name']
    第二种方式（限制类型）：props:{name:String}
    第三种方式（限制类型、限制必要性、指定默认值）：

    props:{
  name:{
    type:String, //类型
    required:true, //必要性
    default:'老王' //默认值
 }
}

    备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin(混入)

  • 功能：可以把多个组件共用的配置提取成一个混入对象

  • 使用方式：

    1. 定义混合

      export const myMinin ={
    data(){
      // ....
    },
    methods:{
      // ....
      }
    // ....
}

    2. 使用混入
      全局混入：Vue.mixin(myMinin)
      局部混入：mixins:[myMinin]

插件

  • 功能：用于增强Vue

  • 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

  • 定义插件

    // plugins.js 文件
export default {
 install(Vue, x, y, z){
   console.log(x,y,z)
   //全局过滤器
   Vue.filter('mySlice',function(value){
   return value.slice(0,4)
  })

  //定义全局指令
  Vue.directive('fbind',{
   //指令与元素成功绑定时（一上来）
   bind(element,binding){
    element.value = binding.value
   },
   //指令所在元素被插入页面时
   inserted(element,binding){
    element.focus()
   },
   //指令所在的模板被重新解析时
   update(element,binding){
    element.value = binding.value
   }
  })

  //定义混入
  Vue.mixin({
   data() {
    return {
     x:100,
     y:200
    }
   },
  })

  //给Vue原型上添加一个方法（vm和vc就都能用了）
  Vue.prototype.hello = ()=>{alert('你好啊')}
 }
}

  • 使用插件

    //引入插件
import plugins from './plugins'

//应用（使用）插件
Vue.use(plugins, 1, 2, 3)

scoped样式

  • 作用：让样式在局部生效，防止冲突
  • 写法：<style scoped>

webStorage

  • 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
  • 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
  • 相关API：
    1. xxxxxStorage.setItem('key', 'value');该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
    2. xxxxxStorage.getItem('person');该方法接受一个键名作为参数，返回键名对应的值
    3. xxxxxStorage.removeItem('key');该方法接受一个键名作为参数，并把该键名从存储中删除
    4. xxxxxStorage.clear()该方法会清空存储中的所有数据

组件的自定义事件

  • 一种组件间通信的方式，适用于：子组件 ===> 父组件

  • 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中，数据在哪里就给哪里绑定事件）

  • 绑定自定义事件2种方式

    1. 在父组件中：<Demo @eventName="test"/>或 <Demo v-on:eventName="test"/>

    2. 在父组件中

      // 使用ref持有当前组件
<Demo ref="demo"/>
// ......
// 在生命周期方法mounted中给组件绑定自定义事件
mounted(){
    this.$refs.demo.$on('eventName',this.test)
}

  • 触发自定义事件：this.$emit('eventName', 数据)

  • 解绑自定义事件this.$off('eventName')

  • 组件上也可以绑定原生DOM事件，需要使用native修饰符，比如给组件绑定原生DOM事件:<Demo ref="demo" @click.native="show"/>

  • 注意：通过this.$refs.demo.$on('eventName', 回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题

全局事件总线（GlobalEventBus）

  • 一种组件间通信的方式，适用于任意组件间通信

  • 安装全局事件总线

    new Vue({
 // ......
beforeCreate() {
 // 在生命周期方法中安装全局事件总线
 //安装全局事件总线，$bus就是当前应用的vm
   Vue.prototype.$bus = this
},
  // ......
})

  • 使用事件总线

    1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

      methods(){
  demo(data){
    //......
  }
}
// ......
mounted() {
  this.$bus.$on('eventName', this.demo)
}

    2. 提供数据：this.$bus.$emit('eventName', 数据)

  • 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

消息订阅与发布（pubsub）

  • 一种组件间通信的方式，适用于任意组件间通信。

  • 使用步骤：

    1. 安装pubsub：npm i pubsub-js

    2. 引入: import pubsub from 'pubsub-js'

    3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

      methods(){
  demo(data){
    // ......
  }
}
// ......
mounted() {
 //订阅消息
  this.pid = pubsub.subscribe('eventName', this.demo)
}

    4. 提供数据：pubsub.publish('eventName', 数据)

    5. 最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)去取消订阅

用法、原理跟全局事件总线（GlobalEventBus）类似

nextTick

  • 语法：this.$nextTick(回调函数)
  • 作用：在下一次DOM更新结束后执行其指定的回调(当前修改数据后更新DOM后执行回调)
  • 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行，比如focus()

Vue封装的过度与动画

  • 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名

  • 写法:

    1. 准备好样式:

      • 元素进入的样式
        v-enter: 进入的起点
        v-enter-active: 进入过程中
        v-enter-to: 进入的终点
      • 元素离开的样式
        v-leave: 离开的起点
        v-leave-active: 离开过程中
        v-leave-to: 离开的终点

    2. 使用<transition>包裹要过度的元素，并配置name属性

      <transition name="hello">
   <h1 v-show="isShow">你好啊！</h1>
</transition>

    3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值

示例

<div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name="hello" appear>
        <h1 v-show="!isShow">你好啊1！</h1>
        <h1 v-show="isShow">你好啊2！</h1>
    </transition-group>
</div>

<!-- 使用css3动画实现 -->
<style scoped>
 h1{
  background-color: orange;
 }

 .hello-enter-active{
  animation: myanimation 0.5s linear;
 }

 .hello-leave-active{
  animation: myanimation 0.5s linear reverse;
 }

 @keyframes myanimation {
  from{
   transform: translateX(-100%);
  }
  to{
   transform: translateX(0px);
  }
 }
</style>


<!-- 使用过度实现 -->
<style scoped>
 h1{
  background-color: orange;
 }
 /* 进入的起点、离开的终点 */
 .hello-enter,.hello-leave-to{
  transform: translateX(-100%);
 }
 .hello-enter-active,.hello-leave-active{
  transition: 0.5s linear;
 }
 /* 进入的终点、离开的起点 */
 .hello-enter-to,.hello-leave{
  transform: translateX(0);
 }
</style>

使用第三方animate.css库实现动画

  1. 安装 npm install animate.css --save

  2. 在需要的组件中引入 import 'animate.css'

  3. 使用

    <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group 
            appear
            name="animate__animated animate__bounce" 
            enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"
            >
        <h1 v-show="!isShow">你好啊1！</h1>
        <h1 v-show="isShow">你好啊2！</h1>
    </transition-group>
</div>

参考animate.style

vue脚手架配置代理

  • 简单方式（配置单一代理）

    • 在vue.config.js中添加如下配置

      devServer:{
  proxy:"http://localhost:5000"
}

    • 说明:
      优点：配置简单，请求静态资源时直接发给前端（8080）即可,如果不存在则转发给5000
      缺点：不能配置多个代理，不能灵活的控制请求是否走代理
      工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

  • 复杂方式（配置多个代理）
    编写vue.config.js配置具体代理规则

    module.exports = {
  devServer: {
      proxy: {
      '/server1': {// 匹配所有以 '/server1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true, // 是否修改请求来源
        pathRewrite: {'^/server1': ''} // 路径重写，把/server1替换城空
      },
      '/server2': {// 匹配所有以 '/server2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true, // 是否修改请求来源
        pathRewrite: {'^/server2': ''} // 路径重写，把/server2替换城空
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

    优点：可以配置多个代理，且可以灵活的控制请求是否走代理
    缺点：配置略微繁琐，请求资源时必须加前缀

插槽(slot)

  • 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===>子组件
  • 分类：默认插槽、具名插槽、作用域插槽
  • 使用方式：

    1. 默认插槽：

      <!-- 父组件中： -->
<Category>
    <div>html结构1</div>
</Category>

<!-- 子组件中： -->
<template>
    <div>
        <!-- 定义插槽，父组件中的html结构会插入到这里 -->
        <slot>插槽默认内容...</slot>
    </div>
</template>

    2. 具名插槽：

      <!-- 父组件中： -->
<Category>
    <template slot="center">
        <div>html结构1</div>
    </template>

    <template v-slot:footer>
        <div>html结构2</div>
    </template>
</Category>

<!-- 子组件中： -->
<template>
    <div>
        <!-- 定义插槽 -->
        <slot name="center">插槽默认内容...</slot>
        <slot name="footer">插槽默认内容...</slot>
    </div>
</template>

    3. 作用域插槽：

      • 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由父组件决定）

      • 示例：

        <!-- 父组件中： -->
<Category>
    <template scope="scopeData">
        <!-- 生成的是ul列表 -->
        <ul>
            <li v-for="g in scopeData.games" :key="g">{{g}}</li>
        </ul>
    </template>
</Category>

<Category>
    <template slot-scope="scopeData">
        <!-- 生成的是h4标题 -->
        <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
    </template>
</Category>


<!-- 子组件中： -->
<template>
    <div>
        <slot :games="games"></slot>
    </div>
</template>
<script>
    export default {
        name:'Category',
        props:['title'],
        //数据在子组件自身
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        },
    }
</script>
posted @   wdszh  阅读(5)  评论(0)  编辑  收藏  举报
相关博文：
· vue基础教程
· vscode前端插件
· Vue 脚手架
· 02.Vue脚手架
· 使用Vue脚手架
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛