vue基础学习（二）_你看我独自一人_新浪博客

青旅半醒 2021-12-11 09:19 494阅读 1赞

# 1、钩子函数 #

### 01-案例：自动获取焦点dom版本 ###

回调函数:一个函数被当做参数进行传递的时候,称作这个函数为回调函数

构造函数:一个函数被new  关键字引导执行的时候,称作这个函数为构造函数

钩子函数:  一个应用程序或者框架内部提前定义好的一批函数,这些函数会在特定的时间段自动执行

生命周期:  一个程序会存在初始化\-运行\-销毁等阶段,这些阶段统称为该程序的生命周期

**1****、钩子函数****mounted****的理解**

(1)     表示页面一加载完毕就执行mounted中的函数，跟window.onload是一样的原理

(2)     mounted不能更改其名字

**2、** **如何获取****dom****元素**

(1)     设置属性ref=”起的名字”

(2)     在钩子函数中获取 this.$refs.起的名字

[![vue基础学习（二）][vue]][vue_vue]

# 2、自定义指令 #

### 02-案例：自动获取焦点自定义指令版本 ###

**1、** **自定义指令：**

//  自定义指令通过Vue.directive()创建，它包含两个参数，**一个是自定义指令的名字，**

**可以随便取，但是全部小写****；****另一个是一个对象，表示自定义指令的配置项****。**

// inserted钩子函数，它表示自定义指令插入到标签中的时候就执行

// inserted钩子函数有两个参数（el,binding） el表示使用自定义指令的元素，binding表示自定义指令的信息

[![vue基础学习（二）][vue 1]][vue_vue 1]

**注意：指令名称全部是小写**

[![vue基础学习（二）][vue 2]][vue_vue 2]

**步骤分析**：

1、 自定义指令

2、 v-mycolor=”数据”   指令需要全部小写，数据需要在data中定义

3、 Binding.value就可以获取数据在data中定义的

[![vue基础学习（二）][vue 3]][vue_vue 3]

# 3、过滤器 #

### 03-案例：创建过滤器 ###

`过滤器`:对需要展示的数据进行加工处理后再展示到界面，并不会改变原数据

Vue.filter('过滤器名称',function(value,arg){

// value就是需要处理的原始数据 arg是使用过滤器时传递的参数

// 对数据处理的业务逻辑

return 处理完毕的数据

})

使用方法：原始数据 | 过滤器名称(参数)

[![vue基础学习（二）][vue 4]][vue_vue 4]

# 4、computed&&watch #

### 04-computed ###

`computed`:**计算属性,是指在computed对象中定义属性,属性的值是该属性后面函数的返回值,而且函数内部如果用到了data中定义的其他数据,只要这些数据发生了变化,都会重新触发函数的执行,计算属性的值也会发生变化**。

new Vue({

el:'#app',

data:{

msg:'hello'

computed:{

'info': function(){

// 只要msg发生了变化,会重新触发该函数的执行

// info的值就是函数的返回值

return this.msg + 'world'

}

[![vue基础学习（二）][vue 5]][vue_vue 5]

### 05-watch ###

**1****、****watch**  **和** **computed****计算属性的区别**

watch可以对data中申明过的数据进行监视,只要被监视的数据发生了变化,就会触发对应函数newVal 表示变化后的值 oldVal 表示变化前的值

computed定义计算属性,定义的属性和在data中定义的使用方式一样,但是computed中的属性值是对应函数的返回值,只要函数中依赖的其他数据发生了变化,会重新计算返回值

[![vue基础学习（二）][vue 6]][vue_vue 6]

### 06-深度监听 ###

**语义理解：**

1、watch监听user对象

2、user对象里需要使用hangler函数以及deep：true深度监听

[![vue基础学习（二）][vue 7]][vue_vue 7]

### 07-案例：搜索功能 ###

**步骤分析：**

1、 对表单双向数据绑定

2、 定义一个计算属性 newList是个函数  同时将遍历数组改成计算属性的名字

3、 对数组进行过滤

4、 过滤数组中的每一个name(value.name数组中的每一个name)和输入的值是否相等

5、 返回过滤的结果

[![vue基础学习（二）][vue 8]][vue_vue 8]

[![vue基础学习（二）][vue 9]][vue_vue 9]

Es6简写 this都指向的是实例vm

[![vue基础学习（二）][vue 10]][vue_vue 10]

提示：初次进入可以显示所有的数据是因为indexOf(“”)返回值为0  数据都满足条件所以可以都显示

### 08-axios的get请求 ###

[![vue基础学习（二）][vue 11]][vue_vue 11]

### 09-axios的post请求 ###

[![vue基础学习（二）][vue 12]][vue_vue 12]

### 10- 案例：获取真实列表数据 ###

[![vue基础学习（二）][vue 13]][vue_vue 13]

### 11- vue-resource的jsonp ###

[![vue基础学习（二）][vue 14]][vue_vue 14]

# 5、动画 #

### 12-过渡和动画：css类名 ###

**1****、****isShow=!isShow****的理解**

@click=”isShow=!isShow”  表示点击时：原先值为true,点击后为false,原先为false再点击就为true

2、 v-if=”isShow”  此时由点击后值为ture就显示，否则就移除

(1)     如果使用v-show就是隐藏   即display:none

[![vue基础学习（二）][vue 15]][vue_vue 15]

### 12- 过渡和动画：animate动画库 ###

[ https://cn.vuejs.org/v2/guide/transitions.html\#过渡的类名][https_cn.vuejs.org_v2_guide_transitions.html]

[![vue基础学习（二）][vue 16]][vue_vue 16]

**V-enter :**定义进入过渡的开始状态。

**V-enter-active** : 定义进入过渡生效时的状态。

**V-enter-to :**定义进入过渡的结束状态

**1****、动画的使用方法：**

1、使用transition包裹需要动画的标签元素

2、给transition设置name属性

3、动画下过的设置

(1)   以name开头连接enter及其他   即把v-enter写成 .name-enter

(2)

(3)   进入开始状态和离开结束状态一致

[![vue基础学习（二）][vue 17]][vue_vue 17]

### 13- 过渡和动画：animate动画库 ###

[![vue基础学习（二）][vue 18]][vue_vue 18]

### 14- 过渡和动画：javascript钩子 ###

[ https://cn.vuejs.org/v2/guide/transitions.html\#自定义过渡的类名][https_cn.vuejs.org_v2_guide_transitions.html 1]

[![vue基础学习（二）][vue 19]][vue_vue 19]

[![vue基础学习（二）][vue 20]][vue_vue 20]

### 15- 案例：删除动画 ###

**1****、步骤分析：**

1、 确认取消弹窗动画的实现   需要引用animate.css文件

[![vue基础学习（二）][vue 21]][vue_vue 21]

2、 点击删除按钮获取对应的id

[![vue基础学习（二）][vue 22]][vue_vue 22]

3、 点击确认按钮删除对应的数据

[![vue基础学习（二）][vue 23]][vue_vue 23]

[vue]: https://img-blog.csdnimg.cn/img_convert/478bf712b05c501ea1bbbee0fbfb9743.png
[vue_vue]: /images/20211211/5253b37bc55f4d8dad6f19a91c3ed054.png
[vue 1]: https://img-blog.csdnimg.cn/img_convert/aa173b2db0a22db8d18beb49c73e933f.png
[vue_vue 1]: /images/20211211/6136781aec1b4defbb2e2a2a71ff7cb5.png
[vue 2]: https://img-blog.csdnimg.cn/img_convert/137cd0608b15f7d5ea44602cfc8d0aa6.png
[vue_vue 2]: /images/20211211/2362eedf9688441c960d2f6326750700.png
[vue 3]: https://img-blog.csdnimg.cn/img_convert/64022e96a2b796888c2605b007227626.png
[vue_vue 3]: /images/20211211/b8943e8bfea54c6cb0fb262128b80af4.png
[vue 4]: https://img-blog.csdnimg.cn/img_convert/dca368426435b9730675998a306bd0c5.png
[vue_vue 4]: /images/20211211/c71df8d19fc949bdacd7fcb140fc7b44.png
[vue 5]: https://img-blog.csdnimg.cn/img_convert/b8e693f437ec3479f836bc93c4b49be9.png
[vue_vue 5]: /images/20211211/9f698957b6b24d04892c53f970255b8b.png
[vue 6]: https://img-blog.csdnimg.cn/img_convert/fc334e96e5945c66f9c3f2d414ff3c90.png
[vue_vue 6]: /images/20211211/cc09b3f30cb240b881c3e5678504f79c.png
[vue 7]: https://img-blog.csdnimg.cn/img_convert/3e97a7d2de35bba06b70d590cd7cfb57.png
[vue_vue 7]: /images/20211211/c2735e8f796e45afa64d635424d5ab73.png
[vue 8]: https://img-blog.csdnimg.cn/img_convert/7d97ff072b70749df33e547864e0a469.png
[vue_vue 8]: /images/20211211/d13478f6d4a4420e8dd9b0467991f768.png
[vue 9]: https://img-blog.csdnimg.cn/img_convert/b76e2c6c8f9938f2fc1e74219aa6f45f.png
[vue_vue 9]: /images/20211211/6a81b30c62a148e4aeba1c09fddeb444.png
[vue 10]: https://img-blog.csdnimg.cn/img_convert/6fb62e5a4c9a950b9aebccfdbf9baed4.png
[vue_vue 10]: /images/20211211/abe33f47ec0d4a23bd2b094d95bc7307.png
[vue 11]: https://img-blog.csdnimg.cn/img_convert/bb52d91a90521118dd820dd3e7297865.png
[vue_vue 11]: /images/20211211/f20968d88436499e8afee9a890988e68.png
[vue 12]: https://img-blog.csdnimg.cn/img_convert/c232cfaa7c9ae6cd4292ab2967d4872f.png
[vue_vue 12]: /images/20211211/2f0c1a8771e54023917cfd17507388b1.png
[vue 13]: https://img-blog.csdnimg.cn/img_convert/b495cb8a12097d8012c44e27abb096fb.png
[vue_vue 13]: /images/20211211/ca0c957156dc4097811f26eefbbf731a.png
[vue 14]: https://img-blog.csdnimg.cn/img_convert/ff04027f9e9d80fd4626164d94238a1f.png
[vue_vue 14]: /images/20211211/03aef144b7934777ba27cad530f0b5d0.png
[vue 15]: https://img-blog.csdnimg.cn/img_convert/77d15ebadb8bc58edb6c46201bbefb3e.png
[vue_vue 15]: /images/20211211/13ed2b32635243a286e85bd17e7caf46.png
[https_cn.vuejs.org_v2_guide_transitions.html]: https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D
[vue 16]: https://img-blog.csdnimg.cn/img_convert/a2f7e39a9dde94100da568df962874b9.png
[vue_vue 16]: /images/20211211/b9565f3e16b840daa03b8c02a90c58d0.png
[vue 17]: https://img-blog.csdnimg.cn/img_convert/cffc1e0e3b39537a203ed7381bcbfe7b.png
[vue_vue 17]: /images/20211211/12fad8bd1fde46febd641792a3eaff47.png
[vue 18]: https://img-blog.csdnimg.cn/img_convert/3aee46746807efcb01d33dddaa4110a8.png
[vue_vue 18]: /images/20211211/537895404f974cecb33b9727e298ccfe.png
[https_cn.vuejs.org_v2_guide_transitions.html 1]: https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D
[vue 19]: https://img-blog.csdnimg.cn/img_convert/3b430768bffb9e8e051d88e48c289c5a.png
[vue_vue 19]: /images/20211211/4171741ce78841c28becc9a670035ec8.png
[vue 20]: https://img-blog.csdnimg.cn/img_convert/e24dbfa2176b24cd63e3f02f9c62df3c.png
[vue_vue 20]: /images/20211211/183ac6577b804e2b886b5b3cf40f7ccc.png
[vue 21]: https://img-blog.csdnimg.cn/img_convert/4fe0ef31f3907eeec645a029b74cf78f.png
[vue_vue 21]: /images/20211211/722d5a1a807146799f119e130ec697ba.png
[vue 22]: https://img-blog.csdnimg.cn/img_convert/1a2e216a2cd95762ded5a35eef89ed31.png
[vue_vue 22]: /images/20211211/77889ecbbc9d4024b035a54569227181.png
[vue 23]: https://img-blog.csdnimg.cn/img_convert/eec3a3770f147772e919832427330a89.png
[vue_vue 23]: /images/20211211/0a1671f5502d45bbbdd2a6f458bebff2.png