Vue中的组件及路由使用
1.组件是什么
组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织；
1.1组件的声明及使用
全局组件
<body>
<div id="app">
<!-- 用全局组件的名称作为HTML的标签 -->
<myzujian></myzujian>
</div> </body>
<script>
//设置全局组件
Vue.component("myzujian",{
template:"<h2>我是全局组件</h2>"
});
var app=new Vue({
el:"#app",
});
</script>
局部组件
<body>
<div id="app">
<!-- 用局部组件的名称作为HTML的标签 -->
<zu-jian></zu-jian>
</div> </body>
<script>
var app=new Vue({
el:"#app",
components:{
zuJian:{
template:"<h1>我是局部组件</h1>",
}
}
});
</script>
1.2组件使用注意事项
组件名如果是驼峰法命名，使用组件时要将大写字母改为小写，并且在前面加上 - 组件中的tamplate属性必须有一个唯一的根元素，否则会报错
1.3组件中数据及方法
<body>
<div id="app">
<mytemp></mytemp>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{},
components:{
mytemp:{
data(){
return {
msg:"123456789",
}
},
methods: {
cli(){
alert(this.msg);
}
},
template:'<h1 @click="cli">you{{msg}} very good</h1>',
}
}
});
</script>
1.4父级组件传值
<body>
<div id="app">
<my :cc="msg"></my>
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{msg:'没事干'},
components:{
my:{
props:['cc'],
template:"<s>{{cc}}</s>"
}
}
})
</script>
2.路由的使用
Vue在使用路由插件Vue-router，要提前引入。
<body>
<div id="app">
<ul>
<li> <router-link to="/login">登录</router-link> </li>
<li> <router-link to="/reg">注册</router-link> </li>
</ul>
<router-view></router-view>
</div>
</body>
<script>
// 获取路由对象
var ro = new VueRouter({
// 定义路由规则
routes:[
// 具体匹配规则
// {path：匹配地址栏路由变化,component:要展示组件}
{path:'/reg',component:{template:"<s>我是注册</s>"}},
{path:'/login',component:{template:"<s>我是登录</s>"}},
]
})
var app = new Vue({
el: '#app',
data: {},
router:ro
})
</script>
2.1动态路由匹配
<body>
<div id="app">
<!-- 传递数据直接写在 / 后面 -->
<router-link to="/user/10">hfhg</router-link>
<router-view></router-view>
</div>
</body>
<script>
var router = new VueRouter({
routes: [
{
// 获取数据是变量的名字前面加:
path: "/user/:id", component: {
mounted(){
// router会为vue添加公有属性 $route ，使用$route来获取数据
console.log(this.$route.params.id)
},
template: "<s>就大师{{$route.params.id}}分离开国家</s>"
}
}
]
})
var app = new Vue({
el: '#app',
data: {},
router,
})
</script>
Vue中的组件及路由使用的更多相关文章
- Vue中使用children实现路由的嵌套
Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...
- Vue 中的组件
VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...
- vue中自定义组件（插件）
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue 中数据流组件
好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...
- 简述vue中父子组件是怎样相互传递值的（基础向）
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
随机推荐
- [python / selenium] - 用python刷公选课是一种什么体验？
前言 看公选课还是能学到很多知识的,这里是给大家提供一个selenium的使用思路(好好学公选课,我真的看了) 思路 当观看者移动鼠标到某一范围时就会停止播放,就让selenium一直将鼠标悬停在视频 ...
- nlohmann 最优秀的C++序列化工具库 详细入门教程
本文首发于个人博客https://kezunlin.me/post/f3c3eb8/,欢迎阅读最新内容! tutorial to use nlohmann json for serializing d ...
- [JVM 相关] Java 新型垃圾回收器（Garbage First,G1)
回顾传统垃圾回收器 HotSpot 垃圾收集器实现 Serial Collector(串型收集器) 使用场景,大多数服务器是单核CPU. 适用收集场景:1. 新生代收集(Young Generatio ...
- 使用NodeJS模块-NodeJS官方提供的核心模块
除了使用自己写的本地模块以外,NodeJS可以使用另外两种类型的模块,分别是NodeJS官方提供的核心模块和第三方提供的模块 NodeJS官方提供的核心模块 NodeJS平台自带的一套基本的功能模块, ...
- 对vue-cli各个目录的理解 和 在 vue 中使用json-server
看了几章书,看到了vue模板,看不下去哦,就找了一个B站的vue视频来看,下面进行总结. 学习一个语言,框架,CRUD..先学会. 重点就是最为常用的几个语句.学得不多,感慨挺多.. 前提:下载好vu ...
- ABP入门教程15 - 小结
点这里进入ABP入门教程目录 效果预览 至此,ABP入门教程的CURD(增删改查)示例已完成,效果如下 登录 首页 查询课程 新增课程 修改课程 删除课程 阶段总结 关键步骤: 领域层创建实体基础设施 ...
- Mac使用iTerm2 一键免密登录
iTerm是mac平台很好用的ssh管理工具,今天给大家介绍一种使用iTerm一键登陆服务器优雅的方式,这样就不需要每次连接服务器时都需要输入端口号.用户名.ip地址.密码(为了安全,服务器密码都好长 ...
- 微信小程序开发——上传代码片段到git仓库
微信开发者工具除了自带的git版本管理(本地服务)之外,还可以推送到在线git仓库中去,这样别人也可以通过git来拉取你的代码片段或小程序. 一.1.登录git 一.2.点击创建项目 一.3.填写项 ...
- Linux：RPM安装工具的使用
RPM安装工具的使用 RPM包管理工具介绍 RedHat 软件包管理工具(RedHat Package Manager,RPM) RPM 软件包工具常用于软件包的安装.查询.更新升级.校验.卸载以及生 ...
- 【西北师大-2108Java】第五次作业成绩汇总
[西北师大-2108Java]第五次作业成绩汇总 作业题目 面向对象程序设计(JAVA) 第7周学习指导及要求 实验目的与要求 (1)掌握四种访问权限修饰符的使用特点: (2)掌握Object类的用途 ...