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 ...
随机推荐
- DBCC TRACEON - 跟踪标志 (Transact-SQL)
跟踪标志用于设置特定服务器特征或更改特定行为. 例如,跟踪标志 3226 是一种常用的启动跟踪标志,可取消显示错误日志中的成功备份消息. 跟踪标志经常用于诊断性能问题或调试存储过程或复杂的计算机系统, ...
- 10 个提升效率的Linux小技巧
您是否曾经惊讶于看到某人在 UNIX 中非常快速地工作,触发命令并快速地执行操作?是的,我碰到过几次,并且我一直都在向那些超级巨星开发者学习.在本文中,我想分享一些 UNIX 命令实践,这些实践是我在 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4
6 鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...
- Spring注解式AOP面向切面编程.
1.AOP指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式.aop底层是动态代理. package com.bie.config; import org.aspectj.lan ...
- Spring常用注解式开发
1.组件注册@Configuration.@Bean给容器中注册组件. 注解,@Configuration告诉Spring这是一个配置类,相当于bean.xml配置文件. 注解,@Bean给Sprin ...
- Selenium模块的安装
Selenium模块 1.安装selenium python2:pip install selenium python3:pip install selenium 2.设置浏览器驱动 解压后必须与浏览 ...
- requests-html库render的使用
一.render的使用 from requests_html import HTMLSession session =HTMLSession() response = session.get('htt ...
- SSM框架之Spring（2）IOC及依赖注入
Spring(2)IOC及依赖注入 基于xml配置文件的实现 1.IOC (控制反转-Inversion Of Control) 控制反转(Inversion of Control,缩写为IoC),是 ...
- python监控cpu 硬盘 内存
import psutil import time import yagmail def sendmail(subject,contents): yag = yagmail.SMTP(user='15 ...
- PHP 部分语法（一）
PHP: PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言,它以 <?php 开始,并以 ?> 结束: 它还是一门弱类型语言,类型不需显式声明 变量: PHP 没有声明变量的命令 ...