Vue相关笔记（自理）

bubble_jo

已于 2022-03-02 20:37:51 修改

阅读量133

点赞数

文章标签： vue.js elementui javascript

于 2022-01-13 23:57:20 首次发布

本文链接：https://blog.csdn.net/bubble_jo/article/details/122484975

版权

一、自定义指令

directives:{ }

1.函数式 (element,binding){}

第一个参数是真实dom元素第二个参数是对象

2.对象式：{

bind(element,binding){}

inserted(element,binding){} //被插入页面时

update(element,binding){}

}

<div id="box">
       <h2>当前的值是<span v-text="n"></span></h2>
       <h2>放大10倍的值是<span v-big="n"></span></h2>
       <button @click="n++">点我n+1</button>
       <input type="text" v-fbind:value="n">
    </div>
    <script>        
        new Vue({
            el:'#box',
            data:{
                n:1,
            },
           directives:{
               //big函数何时会被调用？
               //1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析
               big(element,binding){
                   element.innerText=binding.value*10
               },
               fbind:{
                   //指令与元素成功绑定时（一上来）
                   bind(element,binding){
                       element.value=binding.value;
                   },
                   //指令所在元素被插入页面时
                   inserted(element,binding){
                       element.focus();
                   },
                   //指令所在的模板被重新解析
                   update(element,binding){
                       element.value=binding.value;
                   }
               }
           }
        });
    </script>

3.注意事项

v-big-number --> 'big-number'

里面的this 是window

全局指令Vue.directive('bind',{}) 或 Vue.directive('big',function(){})

二、生命周期

1.概念

1.又名：生命周期回调函数、生命周期函数、生命周期钩子

2.Vue在关键时刻调用的一些特殊名称的函数

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

4.生命周期函数中的this指向是vm 或组件实例对象

5.生命周期钩子：beforeCreate() created() beforeMount() mounted() beforeUpdate() updated() beforeDestroy() destroyed()

2.例子

常用的生命周期钩子：

1.mounted:发送ajax请求、启动定时器、绑定自定义时间、订阅消息等【初始化操作】

2.beforeDestroy:清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息

2.销毁后自定义事件会失效，但原生DOM事件依然有效

3.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会在触发更新流程了

循环变化透明度

挂载：mounted(){}

<div id="box">
       <h2 :style='{opacity}'>这是Vue</h2>
       <button @click="opacity=1">透明度设置为1</button>
       <button @click="stop">点我停止变换</button>
    </div>
    <script>        
        new Vue({
            el:'#box',
            data:{
                opacity:1,
            },
            methods:{
                stop(){
                    this.$destroy();
                }
            },
            //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
            mounted(){
                console.log('mounted');
                this.timer=setInterval(()=>{//this才可以调用timer
                    this.opacity-=0.01;//this指的是全局的vue
                    if(this.opacity<=0)
                        this.opacity=1;
                },20)
            },
            beforeDestroy(){
                console.log('vm即将摧毁');
                clearInterval(this.timer);
            }

        });
    </script>

箭头函数=> 当在vue中使用箭头函数，可以在函数中使用this 来引用全局的vue对象，若在传统函数中，有时会引不到。 箭头函数中的this指向外层调用者

什么时候使用：当把一个函数的结果（返回值）作为另一个函数的参数的时候

这里注意箭头函数有两种格式：
1.只包含一个表达式，这时花括号和return都省略了。

var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);

2.包含多条语句，这时花括号和return都不能省略。

var array1 = [1, 4, 9, 16];
 
const map1 = array1.map(x => {
    if (x == 4) {
        return x * 2;
    }
    return x;
});

vue脚手架

render函数

render函数收到createElement函数去指定具体内容（使用的vue不是完整的没有模板解析器）

##ref属性

// 1.被用来给元素或子组件注册引用信息（id的替代者）

// 2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

// 3.使用方式：

// 打标识：<h1 ref='xxx'></h1> 或 <School ref='xxx'></School>

// 获取：this.$refs.xxx

School.vue
<template>
  <div class="school">
      <h2>学校名称：{{name}}</h2>
      <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
    export default {
        name:'School',
        data(){
            return{
                name:'123',
                address:"江西"
            }
        },
    }
</script>

<style>
    .school{
        background-color: gray;
    }
</style>

App.vue
<template>
  <div id="app">
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDom">点我输出上方vue元素</button>
     <School ref="sch"/>
  </div>
</template>
// ##ref属性
// 1.被用来给元素或子组件注册引用信息（id的替代者）
// 2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
// 3.使用方式：
//     打标识：<h1 ref='xxx'></h1> 或 <School ref='xxx'></School>
//     获取：this.$refs.xxx
<script>
import School from './components/School.vue'


export default {
  name: 'App',
  data(){
    return {
      msg:'欢迎学习vue'
    }
  },
  components: {    
    School
  },
  methods:{
    showDom(){
      console.log(this.$refs.title)//真实DOM元素
      console.log(this.$refs.btn)//真实DOM元素
      console.log(this.$refs.sch)//School组件的实例对象（vc）
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

配置项props

##配置项props

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

// (1)传递数据

// <Demo name='xxx'/>

// (2)接收数据

// 第一种方式(只接收):

// props:['name']

// 第二种方式(限制类型)：

// props:{

// name:Number

// }

// 第三种方式(限制类型、限制必要性、指定默认值)：

// props:{

// name:{

// type:String,//类型

// required:true,//必要性

// default:'老王'//默认值

// }

mixin(混入)

## mixin(混入)

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

使用方式：

第一步定义混合，例如：

{

data(){...}.

methods:{...}

...

}

第二步使用混入，例如：

(1).全局混入：Vue.mixin(xxx)

(2).局部混入：mixins:['xxx']

插件

## 插件

功能：用于增强Vue

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

定义插件：

对象.install=function(Vue,options){

//1.添加全局过滤器

Vue.filter(...)

//2.添加全局指令

Vue.directive(...)

//3.配置全局混入

Vue.mixin(...)

//4.添加实例方法

Vue.prototype.$myMethod=function(){...}

Vue.prototype.$myProperty=xxxx

}

使用插件：Vue.use()

scoped样式

作用：让样式在局部生效，防止冲突

写法：<style scoped>

webStorage

1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样)

2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制

3.相关API：

1.xxxxxStorage.setItem('key','value');

该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值

2.xxxxxStorage.getItem('person');

该方法接收一个键名作为参数，返回键名对应的值

3.xxxxxStorage.removeItem('key');

该方法接收一个键名作为参数，并把该键名从存储中删除

4.xxxxxStorage.clear()

该方法会清空存储中的所有数据

4.备注

1.sessionStorage存储的内容会随着浏览器窗口关闭而消失

2.localStorage存储的内容，需要手动清除才会消失

3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null

4.JSON.parse(null)的结果依然是null

组件的自定义事件

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

// 2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)

// 3.绑定自定义事件：

// 1.第一种方式，在父组件中：<Demo @atguigu="test"/> 或<Demo v-on:atguigu="test"/>

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

// <Demo ref="demo"/>

// ......

// mounted(){

// this.$refs.xxx.$on('atguigu',this.test)

// }

// 3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法

// 4.触发自定义事件：this.$emit('atguigu',数据)

// 5.解绑自定义事件：this.$off('atguigu')

// 6.组件上也可以绑定原生DOM事件，需要使用native修饰符

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

全局事件总线

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

2.安装全局事件总线

new Vue({

......

beforeCreate(){

Vue.prototype.$bus=this//安装全局事件总线，$bus就是当前应用的vm

......

})

3.使用事件总线

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

methods(){

demo(data){......}

}

......

mounted(){

this.$bus.$on('xxxx',this.demo)

}

2.提供数据 this.$bus.$emit('xxxx',demo)

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

消息订阅与发布

消息订阅与发布(pubsub)

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

2.使用步骤：

1.安装pubsub: npm i pubsub-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.最好在beforeDestory钩子中，用PubSub.unsubscribe(pid)去取消订阅

nextTick

1.语法：this.$nextTick(回调函数)

2.作用：在下一次DOM更新结束后执行其指定的回调

3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

Vue封装的过度与动画

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

2.Enter v-enter-active

Leave v-leave-active

3.写法

1.准备好样式

元素进入的样式：

1.v-enter:进入的起点

2.v-enter-active:进入过程中

3.v-enter-to:进入的终点

元素离开的样式

1.v-leave:离开的起点

2.v-leave-active:进入过程中

3.v-leave-to:进入的终点

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

</transition>

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

vue脚手架配置代理

方法一

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

devServer:{

proxy:"http://localhost:5000"

}

说明：

1.优点：配置简单，请求资源时直接发给前端(8080)即可

2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理

3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)

方法二

编写vue.config.js配置具体代理规则：

module.exports={

devServer:{

proxy:{

'api1':{//匹配所有以'/api1'开头请求路径

target:'http://localhost:5000',//代理目标的基础路径

changeOrigin:true,

pathRewrite:{'^/api1':''}

'api2':{//匹配所有以'/api2'开头请求路径

target:'http://localhost:5001',//代理目标的基础路径

changeOrigin:true,

pathRewrite:{'^/api2':''}

}

/**

changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000

changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080

changeOrigin默认值为true

说明：

1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理

2.缺点：配置略微繁琐，请求资源时必须加前缀

插槽

1.作用：让父组件可以向子组件指定位置插入html，也是一种组件间通信的方式，适用于父组件===>子组件

2.分类：默认插槽、具名插槽、作用域插槽

3.使用方式：

1.默认插槽

父组件中：

      <Category>

        <div>html结构1</div>

      <Category/>

    子组件中：

      <template>

        <div>

          //定义插槽

          <slot>插槽默认内容...</slot>

        </div>

      </template>

2.具名插槽:

父组件中，

      <Category>

        <template slot="center">

          <div>html结构1</div>  

        </template>

        <template v-slot:footer>

          <div>html结构1</div>  

        </template>  

      <Category/>

      子组件：

        <template>

          <div>

            //定义插槽

            <slot name="center">插槽默认内容...</slot>

            <slot name="footer">插槽默认内容...</slot>

          </div>

        </template>

3.作用域插槽：

1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

2.具体编码：

父组件中：

          <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 defalut{

              name:'Category',

              props:['title'],

              //数据在子组件自身

              data(){

                return{

                  games:[...]

                }

              }

            }

          </script>

bubble_jo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue相关笔记（自理）

一、自定义指令directives:{ }1.函数式 (element,binding){}第一个参数是真实dom元素第二个参数是对象2.对象式：{bind(element,binding){}inserted(element,binding){} //被插入页面时update(element,binding){}}<div id="box"> <h2>当前的值是<span v-text="n"></spa..
复制链接

扫一扫