Vue基础知识总结（一）

最新推荐文章于 2023-05-17 15:47:50 发布

张媛的博客

最新推荐文章于 2023-05-17 15:47:50 发布

阅读量209

点赞数 1

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_42132841/article/details/115554151

版权

vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

1、父子组件通信（参考代码网址）
父组件：
<template>
<div>
{{msg}}
</div>
<p>{{hello}}</p>
<p>{{hellotests}}</p>
<button @click="btns">按钮</button>
</template>

子组件：
<template>
<div>test</div>
<p>hello world</p>
<span>{{btnVal}}</span>
   <msgChild ref="msgRef"
@childsClick="btnClick"
:msgTest='msgTest2'
:helloTest='helloTest2'
:CCCount='CCCount'
>
</msgChild>
   </template>
<script>
　 // 引入子组件　
import msgChild from './test.vue'
   export default{
      data(){
      return{
         msgTest2:'',
      helloTest2:'',
      CCCount:0,
     btnVal:''
      }
         },
components:{
   // 声明子组件名字
    msgChild
},
   created(){
      this.msgs()
},
   methods:{
      msgs(){
　　　 // 给子组件变量赋值
   this.msgTest2 = '测试1'
  this.helloTest2 = '测试2'
},
btnClick(val) {
   this.CCCount++
        this.btnVal = val
   // 触发子组件中的函数
   this.$refs.msgRef.msgs1()
}
}
   }
</script>

1.1、父组件传值给子组件
父组件中的变量
:msgTest='msgTest2'
:helloTest='helloTest2'
:CCCount='CCCount'

例如：msgTest 就是子组件接收的变量，在子组件中的props中接收（props['msgTest','helloTest','CCCount']
msgTest2就是父组件中的变量，需要在组件中声明。如果在父组件中给msgTest2赋值，子组件this.msgTest2就可以收到值

1.2、子组件向父组件传值（通过触发函数，并传递一个参数）
this.$emit('childsClick','子组件触发父组件中的函数')
触发父组件中的@childsClick='btnClick'来调用benClick方法，并向btnClick方法传参 '子组件触发父组件中的函数' ,通过触发方法来向父组件传值。

1.3、父组件触发子组件函数
通过ref,父组件中的this.$refs.msgRef.msgs() 就触发了msgs的函数。

2、兄弟组件传值已有案例(可直接搜索，网上有很多案例)

   2.1、创建一个bus.js 里面写：
import Vue from 'vue';
         export default new Vue();

   2.2、在其中一个页面中引入bus，添加点击事件发送bus消息对应代码：Bus.$emit('myMsg','你好啊，我叫张媛')
在接受值得另一个页面也引入bus，在mounted钩子中就开始接受myMsg主题得消息
对应代码：
Bus.$on('myMsg',myMsg=>{console.log("demo02组件收到得bus消息:",myMsg);this.msg=myMsg}); //这样就成功得接收到值了

3、背景渐变 background: linear-gradient(to bottom right, #46d828 0%,yellow 100%);
4、watch方法最有用，予许执行异步操作，限制该操作得帧率，并且在得到结果之前，设置中间状态，这是计算属性computed无法做到得
反弹函数：this.debouncedGetAnswer=_.debounce(this.getAnswer,5000) // 将会调用getAnswer函数也就是方法
在这个方法中通过
axios.get('jsonurl')
.then(function(response))
   this.answer=_.capitalize(response.data.answer)
})
.catch:function(error){
   this.answer='Error!'+error;
}
4.2、使用watch首先确认是一个对象，当做对象来用
有键(要监控得那个家伙，比如$route 这个是监控路由得变化，或者是data中得某个变量)
有值(1、可以是函数：当你监控得那个家伙变化时，需要执行得函数，有两个形参，一个是当前参数，第二个是变化之后得值
2、可以是函数名：这个函数名要用单引号来包裹
3、可以是包括选项得对象：选项有三个
4.1、handler：值是一个回调函数，监听到变化时执行得函数
4.2、deep：值是true/false 确认是都深入监听（一般监听是不能监听到对象属性值的变化得，数组得值变化可以监听到，因此，数据得改变不需要使用深度watch）
4.3、immediate：值是true/false,确认是否以当前得初始值执行handler得函数
)
watch得第一种用法(最简单)：<input type='text' v-model='cityName'/>

   watch:{
       cityName(newVal,oldVal){
       }
   }
watch得第二种用法(直接写一个监听函数，每次cityName发生改变，执行函数，也可以加字符串形式得方法名)

   watch:{
       cityName:'nameChange'
   }
watch得第三种用法(包含handler方法和immediate,之前写得函数就是在handler方法，immediate表示watch在首次绑定时是否执行hanler方法，如果为true 就立即执行handler方法，如果为false就数据发生变化时候再执行)

   watch:{
       cityName(){
           handler(newName,oldName){
           immediate:true;//表示首次绑定时执行handler方法
           }
       }
   }
watch得第四种用法（监听对象或数组改变时，设置deep:true 就可以监听到数据得变化，数组和对象得所有属性加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler，数组一维得变化不需要同各国深度监听，对象数组中对象的属性变化需要deep深度监听)

   watch:{
       cityName：{
           handler(newName,oldName){
           },
           deep:true,
           immediate:true
       }
   }
watch得第五种用法（如果只需要监听对象中得一个属性值，可以做以下优化）

<input type='text' v-model="cityName.name"/>

   watch:{
       'cityName.name':{
           handler(newName,oldName){
           },
           deep:true,
           immediate:true
       }
   }
computed 最大特点就是缓存，结果会被缓存。
例：
   <input type='button' @click="a++"/>

   computed:{
       '计算属性':function(){
           console.log("计算属性计算");
           return this.a;
       }
   }
5.箭头函数与普通函数的区别
   5.1、外形不同：箭头函数使用箭头定义，普通函数中没有
       function func(){
           //code
       }
       let func=()=>{
       }
   5.2、箭头函数都是匿名函数（普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数）
       function func(){} // 具名函数
       let func=function(){}// 匿名函数
       let func=()=>{} // 箭头函数全都是匿名函数
   5.3、箭头函数不能用于构造函数，不能使用new(普通函数可以用于构造函数，以此创建对象实例)
       function Person(name,age){
            this.name=name;
           this.age=age;
       }
       let admin=new Person("恩诺小弦",18);
       console.log(admin.name);
       console.log(admin.age);

   5.4、箭头函数中得this指向不同(在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例)
       5.4.1、箭头函数本身不创建this（也可以说箭头函数本身没有this，但是在声明时可以捕获其所在上下问的this供自己使用）
           this一但捕获，就不再发生变化（箭头函数在全局作用域声明，所以它捕获全局作用域中的this，this指向window对象）
   5.5、wrap()用作构造函数
   使用new调用wrap()函数之后，此函数作用域中的this指向创建的实例化对象。
   箭头函数此时被声明。捕获这个this。
   所以打印的是恩诺2，而不是恩诺1。
       var name = "恩诺1";
       function wrap(){
           this.name="恩诺2";
           let func=() => {
               console.log(this.name);
           }
           func();
       }
       let en=new wrap();
   5.6、其他区别
   （1）.箭头函数不能Generator函数，不能使用yeild关键字。
   （2）.箭头函数不具有prototype原型对象。
   （3）.箭头函数不具有super。
   （4）.箭头函数不具有new.target
   总结：箭头函数的this永远指向其上下文的this
   普通函数的this指向调用它的那个对象

6.vue指令
   v-model（双向绑定）
   v-bind(简写：)
   v-on(简写：@)
   v-if
   v-for
   v-show