Vue学习

最新推荐文章于 2025-04-04 12:30:00 发布

一陈不染ch

最新推荐文章于 2025-04-04 12:30:00 发布

阅读量713

点赞数 1

分类专栏： vue入门文章标签： vue

本文链接：https://blog.youkuaiyun.com/h949548472/article/details/111665758

版权

vue入门专栏收录该内容

1 篇文章

订阅专栏

本文分享了Vue学习总结，涵盖基本指令使用，如v-once、v-html等；介绍ES6基本语法，包括var与let区别；提及button的disable属性应用、JavaScript高阶函数；阐述组件通信方式，如父传子、子传父；还讲解了vue组件的slot插槽及三种模块化开发方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

title: Vue学习
date: 2020-12-06 20:23:50
tags: 随笔
top: 4

Vue笔记

以下是我最近学习Vue的总结,现在分享给大家，望给大家带来收获！

一.基本指令的使用

1.v-once —vue属性

动态渲染数据，当数据改变时，第二次的数据仍然是第一次的数据，并不会跟之刷新。

1604244244604

2.v-html —vue属性

当后台传过来数据之后原本是string文本（这是连接）,想把数据在页面中展示则需要，使用v-html属性

1604244738486

3.v-text —vue属性

v-text属性会把文本节点中的相关属性替换掉，

1604244910084

4.v-pre —vue属性

这个属性不会对插值表达式进行匹配，原封不动的将内容直接渲染到网页上来

1604245265331

5.v-clock —vue属性

这个属性就是处理网速过慢时,网页上渲染出差值表达式的解决办法

<style> [v-clock]{
    display:none;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v94NP8lW-1608865614002)(https://s3.ax1x.com/2020/12/06/Dj0gu6.png)]

6.v-bind —vue属性–动态绑定class属性

①通过给属性加上对象的方式,{}-------对象语法

格式:{类名1:boolean,类名2:boolean,类名3:boolean}

<h2 :class="{activity:isactivity,line:isline}">测试</h2>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nxffT8cH-1608865614004)(https://s3.ax1x.com/2020/12/06/Dj0hUe.png)]

②通过给属性加上数组的方式,[]-------数组语法

方法一：这种方式会把类写死，不建议使用
<h2 :class="['activity','line']">测试</h2>
方法二：将数组里面的冒号去掉,采用动态绑定
<h2 :class="[activity,line]">测试</h2>
在data里面指明activity指向的类以及isline指向的类

1604284995497

7.v-bind —vue属性–动态绑定style属性

①通过给属性加上对象的方式,{}-------对象语法

格式：{key（属性名）:value（属性值）}
<h2 :style="{fontSize:'50px'}">测试</h2>
注意：属性值要加冒号否则会以变量值处理

②通过给属性加上数组的方式,[]-------数组语法

<h2 :style="[basestyle,basestyle1]">测试</h2>
在data里面指明basestyle指向的对象以及basestyle1指向的对象
data{
    basestyle：{
        color:'#333',
        fontSize:'18px',
    }
}

8.计算属性 ----computed计算属性

computed:{
    fullName:function(){
        return this.firstName+this.secondName;
    }
}

computed计算属性中引申的 ES6——for语法

for(book of this.books){
    book 			//即为该books里面的每一个对象的值，也即每一本书的属性的集合
}

computed计算属性中的get—

computed之所以调用的时候不用加上()的原因就是computed默认会直接调用get 函数

1604293016004

computed函数中的set函数

set:function(newdata){
		newdata //里面就是为它设置的值  列如:app.fullName="zhang san"


}

1604294698882

computed中优点是有缓存作用,当数据不发生改变的时候多次调用时只会执行一次该代码,

9.v-on ----vue属性的使用

1.当调用的方法不传递任何参数的时候

<button @click="func"</button>

var app=new Vue({
    
   methods{
       func(event){
           console.log(event)  //此处的event是vue默认传递进来的参数
       }
   } 
}
)

2.当调用的函数需要一些参数的时候传递vue默认的event的时候要==$event==

<button @click="func(123,$event)"</button>

var app=new Vue({
    
   methods{
       func(data,event){
           console.log(data+event)  //此处的event是vue默认传递进来的参数
       }
   } 
}
)

3.onclick的相关的修饰符
- stop—阻止冒泡
- pre----阻止默认行为
- @click.keydown.enter
- once—只允许事件触发一次

10.v-for —vue指令

1.在遍历对象的时候遍历出来的值遍历出来的结果是value值
- ```
<ul>
	<li v-for="item in list"></li>
</ul>	

var app=new Vue({
    data:{
        list{
            name:"张三",
            age：18,
            
        }
    }
})
```
- 2.遍历键的时候加上(value,key)
- 3.遍历键同时遍历下标的时候加上(value,key,index)
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8xv6W7u1-1608865614009)(https://s3.ax1x.com/2020/12/06/DjBAVU.png)]

11.哪些数组的方法是支持数据动态渲染

操作数组的相关的方法
- push ----往数组最后面添加数据
- pop ----在数组中删除最后面的数据
- shift ----删除第一个数据
- unshift —在数组中第一个位置添加数据
- splice-----删除指定数组位置的参数一(1,2) --指明从下标为1的位置删除两个参数二(1,0,“张三”) 则表明是在第一个个位置的后面添加张三该值
- reverse ----翻转函数
- Vue.set(this.letters,0,“bbbb”) //将第一个元素修改为bbbb

12.filter过滤器的基本使用

<td>{{item.price | showPrice}}

var app=new Vue({
    
    filters:{
        showPrice(data){
            return "￥" +data.toFixed(2)；
        }
    }
})

13.v-model函数的基本应用

v-model函数实现(两步走)的办法 -------input(text) 中有一个事件绑定为input可以实现每次触发输入时候的函数

<input type="text" v-model="message">
//双向绑定实现了两个指令
<input type="text" :value="message" @input="changetigger">
var app=new Vue({
    data:{
        message:"这是数据"
    },
    methods{
        changetigger(event){
            this.message=event.target.value
        }    
    }
})

v-model函数中input（radio）的基本使用当v-model都指向同一个属性的时候就可以省略name

<label for="boy">
	<input type="radio" value="男" id="boy" name="sex" v-model="sex"/>
</label>
<label for="girl">
	<input type="radio" value="男" id="girl" name="sex" v-model="sex"/>
</label>


vm中的sex就会根据选择从而判断出是选中了哪一个

v-model函数中input(checkbox)单选框的基本使用见下图:单选框保存的是boolean
v-model中多选框的基本使用(绑定的是时候绑定一个数组即可)列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lkXVuNHZ-1608865614015)(https://s3.ax1x.com/2020/12/06/DjB0qf.png)]
v-model中关于select的使用

select(单选时候) 注意的是无论单选还是多选都是select上面添加v-model 而非option

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qUKATJA5-1608865614016)(https://s3.ax1x.com/2020/12/06/DjBDZ8.png)]

14.修饰符

lazy
- 此修饰符在动态绑定属性值得时候，不会实时触发该数据(该数据不会实时改变)唯有按下回车或者该输入框失去焦点的时候才会触发
- ```
<input type="text" v-model.lazy="message">
```
number
- 1.改修饰符可以控制文本中只能输入数字不可以输入别的东西
- 2.改修饰符可以将v-model默认绑定上去的字符串值(String类型)改为number类型
```
<input type="number" v-model.number="age"
{{typeof age}}
```

trim—去掉字符两边的空格

<input type="text" v-model.trim="message">

二.ES6的基本语法

1.var与let的区别

在es5时候（for/if）没有块级作用域,

在es6之后使用(let)就有块级作用域,该变量在这一块级中才有效，并且规范是当与父级作用域冲突时块级作用域中有的变量会优先使用本块级中的变量

列如:

需求：分别给五个按钮添加点击事件并且点击的时候告知浏览器分别点击了哪一个按钮

es5 方法–最普通的方法
es5方法 --闭包方式解决问题
es6方法 --let语法
2.const使用
使用规则
- 一旦赋值不可修改
- 声明时候必须先赋值
- const中只能一次地址不能改变,const声明变量后赋值的值，其实那个值也是一个对象(字符长量也是一个对象),const声明的那个变量中存放的则是改变量的地址，
- 常量的含义是指向的对象不能改变，但是可以改变指向的对象中的属性
- 3.函数的增强写法

规则

const obj={
    name,
    age,
    add
}

函数的增强写法

const obj={
    run(){
        
    },
    eat(){
        
    }
}

三.button的相关的属性

1.disable属性的相关的应用

结合v-bind使用disable相关的操作(当符合某要求时,为相关的disable设置对应的false/true)
按钮可以结合splice函数的使用

四.javaScript高阶函数

编程范式:命令式编程/声明式编程
面向对象式编程/面向函数式编程
filter/map/reduce

1.filter

filter回调函数当中必须返回一个boolean值

当返回boolean值得时候会将传入的值保存在另外一个新的数组当中，只需要做一下接受即可

const nums=[10,20,111,222,333,444]
let newNums=nums.filter(function(n){
	//如果符合条件的话,n就会自动加到新的数组当中
    return n<100
})

2.map

map函数—将数组中的分别数值全部乘于*2

let new2Nums=newNums.map(function(n){
    return n*2
})

3.reduce函数

reduce函数作用将数组中的所有的内容进行汇总

reduce函数有两个参数(function（）,参数二)

// 20 40 80 100

new2Nums.reduce(function(preValue,n){
    return preValue+n
},0)
//第一次  preValue 0  n 20 
//第二次  preValue 20 n 40
//第三次  preValue 60 n 80
//第四次  preValue 140 n 100

4.组件中的通信

1.父传子 —通信

传数据

通过:son=“father” 来绑定数据，并且在子组件中应该定义一个props：[]属性
props接受值的类型

props:["cmovies","cmessage"]
props{
    //2.props限制数值类型
    cmovies:Array,
    cmessage:String
    //3.提供一些默认值
    cmessgae:{
        type:String,
        default:"aaaa",
        require:true   //必须的，必要得，必须传递该数据
    }
	//4.默认值是数组或者是对象(object)时，默认值必须是一个对象(函数)且返回
	cmovie:{
        type:Array/Object,
        default(){
            return []
        }  
	}
}

2.子传父 ----通讯

先通过事件绑定机制,@son="father"绑定到组件当中
可以将事件的event传递给父组件
默认可以把整个点击的对象传递给父组件

<cpn @son="father"></cpn>
//父组件中的app实例
<button @click="sonfun">
var app=new Vue({
    methods:{
        father(event){
            console.log(event)
        }
    }  
})

//子组件中的实例var son={
    template："#cpn",
    methods:{
        sonfun(event){
            this.$emit("father",event)
        }
    }  
}

3.父子组件，父组件直接获取子组件

this.$children----在父组件中使用该属性就获取到所有的子组件

为需要绑定的组件当中设置ref

<cpn ref="aaa"></cpn>

父组件中:this.$refs.aaa.name即可使用子组件中相关的值

4.子组件直接获取到父组件以及根组件

this.$parent
this.$root

五.vue组件的高级语法–slot插槽

用法一基本用法

<cpn></cpn>   //什么也不填的时候会默认slot里面的内容
<cpn><span>哈哈哈</span></cpn>
<cpn><i>哈哈哈</i></cpn>

<cpn></cpn>
<cpn></cpn>
<cpn>          //若插入多个元素则都会一并全部替换slot
	<i>呵呵呵</i>
	<span>呵呵呵</span>
	<p>我是p元素</p>
</cpn>	

<template id="cpn">
<div>
	<h2>我是组件</h2>
	<slot><button>按钮</button></slot>
</div>
</template>

1604504510342

<div id="app">
<cpn><span slot="center">标题</span></cpn>
</div>   //可以专门替换name为center的插槽

<template id="cpn">
<div>
  <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
      <slot name="right"><span>右边</span></slot>
</div>

</template>