Vue学习(二)

目录

Vue组件

 组件中data的使用

组件切换

1、v-if与v-else实现两个组件的切换

 2、component实现多个组件的切换

3、利用动画实现组件切换

 组件传值

组件传方法

ref获取DOM元素和组件引用

 Vue路由

 重定向

 设置选中路径高亮

路由传参

路由嵌套

​watch、computed、methods的不同


Vue组件

组件是为了拆分Vue实例的代码量,以不同的组件划分不同的功能模块。这样需要什么功能就去调用对应组件即可。

模块化:从代码逻辑角度划分,方便代码分层开发,保证每个功能模块的职能单一。

组件化:从UI角度进行划分,前端的组件化方便UI组件的重用。

组件的使用:之间把组件的名称以HTML标签形式引入页面中。(组件创建时用驼峰命名时,在引入页面中注意都小写且在原大写字母前加'-'。如果没有用驼峰命名则原来名称写即可。)

1、使用Vue.extend来创建全局的Vue组件,再使用Vue.component('组件的名称',创建出来的组件模块对象)

2、直接使用Vue.component创建组件

 注意在创建组件的时候,组件template指向的模板内容必须有且只有一个唯一的根元素。

例如:

这样写是错的

 这样是OK的

 3、在被Vue实例控制的元素外面,使用template元素,定义组件的HTML模板结构

(此时会有HTML提示)

定义

调用

 4、定义私有组件

  私有组件也可以利用id在外部写template。

 组件中data的使用

 注意data返回的必须是对象。且组件中的方法也写在<template></template>中。

组件切换

1、v-if与v-else实现两个组件的切换

 2、component实现多个组件的切换

 注意的是:is="'login'",这里里面参数要加' '。

3、利用动画实现组件切换

 组件传值

子组件默认无法访问到父组件中即data上的数据与methods中的方法。

1、若子组件想要引用父组件中的数据或者方法需要利用v-bind进行绑定。即把需要传递给子组件的数据通过属性绑定的形式传递给子组件内部。

2、对于要绑定的属性我们需要在组件中props数组中定义。

 注意:

组件中所有props中的数据都是父组件传递给子组件的;

子组件中的data数据(必须返回对象)不是通过父组件传递,而是自身私有。比如子组件通过AJax请求回来的数据都可以放到data身上;

props中的数据都是可读无法修改,而data中的数据可读可写。

组件传方法

1、子组件调用父组件中的方法使用时间绑定机制@进行绑定,绑定后还要利用$emit()方法调用、触发。

2、对于方法我们可以传递参数。又因为可以传递参数我们可以将子组件中的数据赋给父组件中的data。(即实现了子组件向父组件传递数据)

 这个例子就实现了子组件将sonMsg传递给了msgFromson。

ref获取DOM元素和组件引用

我们可以使用ref去获取页面的内容,从而不需要使用DOM去获取InnerText。

ref也可以引用子组件中的数据和方法。所以父组件想要调用子组件中的数据除了子组件调用父组件的方法然后传值给父组件,也可以使用ref。

 Vue路由

当导入vue.router包之后,在Windows全局对象中就有了一个路由的构造函数,叫做VueRouter。在创建后可以在routes中匹配路由规则。注意这里是routes而不是routers。

创建路由后需要在vm实例中定义

 在vm控制元素中展示需要加<router-view></router-view>

 

 也可以不使用a标签,而使用router-link标签实现页面跳转

其次tag可以将标签渲染为其他标签。比如当只需要一个根元素,它可以将原来根元素删除自己渲染为这个根元素。

 重定向

重定向可以指定根路径

 设置选中路径高亮

router自己会将链接添加类router-link-exact-active。我们可以基于此类进行修改。

也可以利用 linkActiveClass: 'myactive'重新定义新的类。 

路由传参

1、利用$route.query去获取地址栏中的参数

 2、利用$route.params获取

 $route.query直接修改路由路径即可,$route.params需要修改匹配规则和路径。:是占位符,浏览器内部会根据正则表达式进行解析。

路由嵌套

下述路由嵌套的整个过程:

1、当点击Account时,会跳转到/account,路由匹配监听/account,然后展示account组件。

2、组件account包括login组件和register组件。因此此时展示是

3、当点击登录时会跳转到/account/login,此时去account的孩子children去匹配新的路由,展示login组件内容。同理点击注册展示注册组件内容。 

watch、computed、methods的不同

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值