首页 > 其他分享 >vue高级

vue高级

时间：2023-07-08 12:13:32浏览次数：48  
标签：vue 插槽 高级 js Vue 组件 hello

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>

标签：vue,插槽,高级,js,Vue,组件,hello
From： https://www.cnblogs.com/wdszh/p/17527452.html

相关文章

  • Vue（十二）：列表渲染—— v-for
    1.基础使用<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>基本列表</title><scripttype="text/javascript"src="../js/vue.js"></script></head><!--......
  • 介绍Vue router的history模式以及如何配置history模式
    引言Vuerouter给我们提供了两种路由模式，分别是hash模式和history模式。其中默认是使用hash模式，即URL中带有一个#符号，但是处于业务或个人喜爱的差别，Vuerouter也提供了history模式。但是由于Vue是单页SPA应用，所以每个路由并没有对应的html文件。什么是history模式history模式特......
  • 一篇读懂React、vue框架的生命周期函数
    原文合集地址如下，有需要的朋友可以关注本文地址合集地址当涉及到前端框架时，React和Vue.js是两个非常受欢迎的选择。它们都提供了强大的工具和功能，帮助开发者构建交互式的、可扩展的应用程序。在这两个框架中，生命周期函数是一个重要的概念，它们允许我们在组件的不同阶段执行特......
  • TypeScript+Vue3
    TypeScriptAny类型和unknown顶级类型1.没有强制限定哪种类型，随时切换类型都可以我们可以对any进行任何操作，不需要检查类型2.声明变量的时候没有指定任意类型默认为any3.弊端如果使用any就失去了TS类型检测的作用4.TypeScript3.0中引入的unknown类型也被认为是top......
  • vue3.0 外部配置文件
    vue3.0外部配置文件，重点是打包后也可以修改配置参数 一、在public中创建static文件夹，在static文件夹中创建config.js文件config.js{"webSocketUrl":"http://192.168.1.5:5011/httpCli"}二、在man.js中使用 axios来读取存在app.config.globalProperties.$......
  • vue - v-model在组件上的应用（包含子传父）
    一、v-model的参数默认情况下，v-model在组件上都是使用modelValue作为prop，并以update:modelValue作为对应的事件。我们可以通过给v-model指定一个参数来更改这些名字：<MyComponentv-model:title="bookTitle"/>在这个例子中，子组件应声明一个titleprop，并通过触发upd......
  • vue项目跨域问题
    vue项目跨域问题一、vue项目直接调用第三方接口后，打包成dist部署到服务器后，提示404以及跨域问题解决方式：使用宝塔部署时：如图：在图中位置加入以下代码即可!!!location/api/{rewrite^.+api/?(.*)$/$1break;proxy_passhttp://122.112.215.133:9901/;......
  • vue-slot插槽
    今天大致了解些vue插槽。在Vue.js中，插槽（slot）是一种机制，它允许你将内容插入到组件的特定位置。使用插槽，你可以在组件内定义一些可以被填充的占位符，然后在使用该组件时，将具体的内容插入到这些占位符中。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><......
  • vue3使用表格el-table-infinite-scroll.js:18 Uncaught (in promise) Error: [el-tabl
    先看下表格里面有没有这个el-scrollbar__wrapclass类 没有的话升级一下element-plus到最新的就行你可以先查看element-plus的版本npmview element-plus下载完之后 就有了......
  • SublimeText添加对vue的支持和格式化
    添加对vue的语法的高亮支持首先需要安装插件installpackage，按下ctrl+shift+p,输入install即可看见installpackage,选中回车即可，等待一段时间会提示是否安装成功安装成功后开始安装开发VUE需要用到的插件,安装方式为ctrl+shift+p,选择installpackage......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99