前端vue学习笔记（1）

最新推荐文章于 2024-09-13 23:32:49 发布

AItth

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量149

点赞数

分类专栏：前端文章标签：前端 vue.js 学习

本文链接：https://blog.csdn.net/weixin_49313319/article/details/133170048

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写在前面：
此笔记是根据尚硅谷老师的B站视频学习进行记录，若有错误请指正！
纯纯小白目前学习前端开发两个月左右！

笔记

前端学习视频来源：尚硅谷前端课程

脚手架文件结构:

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

关于不同版本的Vue:

vue.js与vue.runtime.xxx.js的区别：
（1）vue.js是完整版的Vue，包含：核心功能+模板解析器。
（2）vue.runtime.xxx.js是运行版的Vue,只包含：核心功能：没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

vue.config.js配置文件

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

ref属性

1.被用来给元素或子组件注册引用信息（id的替代者）。
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3.使用方式：
打标识：
<h1 ref='XXX'>......</h1>或<school ref='XXX'></School>
获取this.$refs.xxx

配置项props

功能：让组件接收外部传过来的数据
(1) 传递数据：<Demo name="XXX"/>
(2) 接收数据:
第一种方式（只接收）：props:['name']
第二种方式（限制类型）：

props:{
    name:Number
}

第三种方式（限制类型、限制必要性、指定默认值）：

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

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

minxin(混入)

功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合，例如：

{
    data(){......},
    methods:{.......}
    .......
}

第二步使用混入，例如：
（1）全局混入：Vue.mixin(xxx)
（2）局部混入：mixins:['XXX']

插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：

对象.install = function(Vue,option){
        <!-- 1.添加过滤器 -->
        Vue.filter(......)
        <!-- 2.添加全局指令 -->
        Vue.directive(......)
        <!-- 3.配置全局混入（合） -->
        Vue.mixin(......)
        <!-- 4.添加实例方法 -->
        Vue.prototype.$myMethod = function (){......}
        Vue.prototype.$myProperty = xxx
    }

使用插件：Vue.use()

scoped样式

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

总结TodoList案例

1.组件化编码流程：
（1）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
（2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件再用：

1> 一个组件在用：放在组件自身即可。
2> 一些组件在用；放在他们共同的父组件上(状态提升)

（3）实现交互：从绑定事件开始。
2.props适用于：
（1）父组件=>子组件通信
（2）子组件=>父组件通信（要求父先给子一个函数）
3.使用v-model时要切记：v-model绑定的值不能是一个props传过来的值，因为props是不可以修改的！
4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

webStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
相关API：
1. xxxxxStorage.setItem('key','value');
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  该方法接受一个键名作为参数，并把该键名从存储中删除。
3. xxxxxStorage.removeItem('key');
  该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  该方法会清空存储中的所有数据。
备注：
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. JSON.parse(null)的结构依然是null。

组件的自定义事件

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方式，在父组件中：

<Demo @atguigu='test'/>

或

`<Demo v-on:atguigu = "test"/>`

第二种方式，在父组件中：

<Demo ref='demo'/>
    ......
    mounted(){
        this.$refs.xxx.$on('atguigu',this.test)
    }

若想让自定义事件触发一次，可以使用once修饰符，或￥once方法。
触发自定义事件：this.$emit(‘atguigu’,数据)
解绑自定义事件：this.$off(‘atguigu’)
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this. $re f s . xxx .$ on(‘atguigu’,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题！

全局事件总线（GlobalEventBus）

一种组件间通信的方式，适用于任意组件间通信。
安装全局事件总线：

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

使用事件总线：
（1）接收数据：A组件想接收数据，则在Z组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

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

（2）提供数据： this.$bus.$emit('xxxxx',数据)
（3）最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布（pubsub）

一种组件间通信的方式，适用于任意组件间通信。
使用步骤：
（1）安装pubsub:npm i pusub-js
（2）引入：import pubsub from ‘pubsub-js’
（3）接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

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

（4）提供数据：pubsub.publish(‘xxx’,数据)
（5）最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

nextTick

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

Vue封装的过渡与动画

作用：在查出、更新或移除元素时，在合适的时候给元素添加样式类名。
写法：
写法
准备好样式：
- 元素进入的样式：
1. v-enter:进入的起点；
2. v-enter-active:进入过程中
3. v-enter-to:进入的终点
- 元素离开的样式：
1. v-leave:离开的起点
2. v-leave-activate:离开过程中
3. v-leave-to:离开的终点
使用'''<transition>'''包裹要过渡的元素，并配置name属性：

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

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

vue脚手架配置代理

方法一：
在vue.config.js中添加如下配置：

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

说明：
1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
方法二：
编写vue.config.js配置具体代理规则：

module.exports = {
            devServer: {
                proxy: {
                '/api':{//匹配所有以'/api'开头的请求路径
                    target:'http://localhost:5000',//代理目标的基础路径
                    pathRewrite:{'^/api':''},
                    ws:true,//用于支持websocket
                    changeOrigin:true//用于控制请求头中的host值
                },
                '/demo':{
                    target:'http://localhost:5001',
                    pathRewrite:{'^/demo':''},
                    ws:true,//用于支持websocket
                    changeOrigin:true//用于控制请求头中的host值
                },
            }
        }
    }

   <!-- changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
             changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
             changeOrigin默认设置为true
         -->