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 ...
随机推荐
- leetcode-二叉树
树以及常用的算法 树的概念 树(Tree)的基本概念树是由结点或顶点和边组成的(可能是非线性的)且不存在着任何环的一种数据结构.没有结点的树称为空(null或empty)树.一棵非空的树包括一个根结点 ...
- mpvue快速入门
主要特性 使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: 彻底的组件化开发能力:提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex 数据管理方案:方便构建 ...
- MySQL 在 Windows 下安装教程、避坑指南
MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,2008 年被 SUN 公司收购,后 SUN 公司又被 Oracle 公司收购. 一.下载 MySQL 官网 https:/ ...
- SpringBoot2.0 基础案例(17)：自定义启动页,项目打包和指定运行环境
本文源码 GitHub地址:知了一笑 https://github.com/cicadasmile/spring-boot-base 一.打包简介 springboot的打包方式有很多种.可以打war ...
- C++ 深入浅出工厂模式（进阶篇）
介绍 前文初始篇C++ 深入浅出工厂模式(初始篇),主要阐述了简单工厂模式.工厂方法模式和抽象工厂模式的结构.特点和缺陷等.以上三种方式,在新增产品时,要么修改工厂类,要么需新增具体的工厂类,说明工厂 ...
- [转]UIPATH机器人指南
本文转自:https://blog.csdn.net/weixin_33957036/article/details/80907372 介绍 机器人是UiPath的执行代理,可运行Studio中内置的 ...
- Vulnhub DC-1靶机渗透学习
前言 之前听说过这个叫Vulnhub DC-1的靶机,所以想拿来玩玩学习,结果整个过程都是看着别人的writeup走下来的,学艺不精,不过这个过程也认识到,学会了很多东西. 所以才想写点东西,记录一下 ...
- 2019 DevOps 必备面试题——DevOps 理念篇
原文地址:https://medium.com/edureka/devops-interview-questions-e91a4e6ecbf3 原文作者:Saurabh Kulshrestha 翻译君 ...
- 18-搭建本地 Registry
Docker Hub 虽然非常方便,但还是有些限制,比如: 需要 internet 连接,而且下载和上传速度慢. 上传到 Docker Hub 的镜像任何人都能够访问,虽然可以用私有 reposito ...
- MySql 表结构修改、约束条件、表关系
表结构修改(alter) 查看表的结构:desc 表名; 修改表名:alter table 表名 rename to 新表名; 修改字段名:alter table 表名 change 旧字段名 新字段 ...