vue学习-day04（路由）
目录：
1.组件传值-父组件向子组件传值和data与props的区别
2.组件传值-子组件通过事件调用向父组件传值
3.案例：发表评论。使用ref获取DOM元素和组件引用
4.路由-前端路由和后端路由的概念
5.路由-vue-router的基本使用
6.路由-路由redirect重定向的使用
7.路由-设置选中路由高亮的两种方式
8.路由-为路由切换启动动画
9.路由传参-使用query方式传递参数
10.路由传参-使用params方式传递路由参数
11.路由-使用children属性实现路由嵌套
12.路由-使用命名视图实现经典布局
1.组件传值-父组件向子组件传值和data与props的区别 <--返回目录
父组件向子组件传值
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue的包 -->
<script type="text/javascript" src="vue2.js"></script>
<style type="text/css">
div {
background-color: #ccc;
}
/*自定义样式，来控制元素动画样式*/
.my-enter, .my-leave-to {
opacity: 0;
transform:translateX(150px);
}
.my-enter-active, /*入场动画的时间段*/
.my-leave-active { /*离场动画的时间段*/
transition: all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='com1'">组件1</a>
<a href="" @click.prevent="comName='com2'">组件2</a>
<!-- 通过mode属性，设置组件切换时的模式，out-in表示上一个组件离场动画后，新组件才开始入场动画-->
<transition name="my" mode="out-in">
<!-- 父组件，可以在引用子组件的时候，通过属性绑定的形式，传递数据
注意：定义属性名称全部小写 -->
<!-- [Vue tip]: Prop "parentmsg" is passed to component <Anonymous>,
but the declared prop name is "parentMsg". Note that HTML attributes
are case-insensitive and camelCased props need to use their kebab-case
equivalents when using in-DOM templates. You should probably use
"parent-msg" instead of "parentMsg". -->
<component :is="comName" :parentmsg="msg" @parentshow="show"></component>
</transition>
</div> <script type="text/javascript">
//创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
comName: 'com1',
msg: "父组件的msg"
},
methods: {
show() {
console.log("调用了父组件的show方法");
}
},
components: {
com1: {
template: '<h1 @click="mymethod">这是子组件1----{{parentmsg}}</h1>',
//把父组件传递过来的parentMsg属性，在props数组中定义，这样才能使用该属性
props: ['parentmsg'],
methods: {
mymethod() {
this.$emit('parentshow');
}
}
},
com2: {
template: '<h1>这是子组件2</h1>'
}
}
});
</script>
</body>
</html>
data与props的区别：
1）子组件中所有props中的数据，都是通过父组件传递给子组件的。数据只是可读
2）子组件data中的数据是自身私有的，数据可读可写
2.组件传值-子组件通过事件调用向父组件传值 <--返回目录
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue的包 -->
<script type="text/javascript" src="vue2.js"></script>
<style type="text/css">
div {
background-color: #ccc;
}
/*自定义样式，来控制元素动画样式*/
.my-enter, .my-leave-to {
opacity: 0;
transform:translateX(150px);
}
.my-enter-active, /*入场动画的时间段*/
.my-leave-active { /*离场动画的时间段*/
transition: all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='com1'">组件1</a>
<a href="" @click.prevent="comName='com2'">组件2</a>
<!-- 通过mode属性，设置组件切换时的模式，out-in表示上一个组件离场动画后，新组件才开始入场动画-->
<transition name="my" mode="out-in">
<!-- 父组件，可以在引用子组件的时候，通过属性绑定的形式，传递数据
注意：定义属性名称全部小写 -->
<!-- [Vue tip]: Prop "parentmsg" is passed to component <Anonymous>,
but the declared prop name is "parentMsg". Note that HTML attributes
are case-insensitive and camelCased props need to use their kebab-case
equivalents when using in-DOM templates. You should probably use "parent-msg" instead of "parentMsg". -->
<component :is="comName" :parentmsg="msg" @parentshow="show"></component>
</transition>
<br/>
<h1>{{msg}}</h1>
</div> <script type="text/javascript">
//创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
comName: 'com1',
msg: "父组件的msg"
},
methods: {
show(data) {
console.log("调用了父组件的show方法---" + data );
this.msg = data;
}
},
components: {
com1: {
template: '<h1 @click="mymethod">这是子组件1----{{parentmsg}}</h1>',
data: function(){
return {
sonmsg: '子组件的msg'
}
},
//把父组件传递过来的parentMsg属性，在props数组中定义，这样才能使用该属性
props: ['parentmsg'],
methods: {
mymethod() {
this.$emit('parentshow', this.sonmsg);//调用父组件传递过来的方法
}
}
},
com2: {
template: '<h1>这是子组件2</h1>'
}
}
});
</script>
</body>
</html>
3.案例：发表评论。使用ref获取DOM元素和组件引用 <--返回目录
案例：添加评论部分是子组件；父组件对所有评论进行列表展示。评论保存在本地存储localStorage
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue的包 -->
<script type="text/javascript" src="vue2.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div id="app">
<com1></com1>
<div class="container">
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">{{item.user}}</span>
{{item.comments}}
</li>
</ul>
</div>
</div> <template id="temp1">
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form>
<div class="form-group">
<label for="user">用户名</label>
<input type="text" name="user" placeholder="输入用户名" class="form-control" v-model="user">
</div>
<div class="form-group">
<label for="comments">评论</label>
<input type="text" name="comments" placeholder="输入评论" class="form-control" v-model="comments">
</div>
<button class="btn btn-primary" @click="postCommets">发表评论</button>
</form>
</div><!-- /.col-md-6 -->
</div><!-- /.row -->
</div><!-- /.container -->
</template> <script type="text/javascript">
//创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
list: []
},
methods: {
loadComments() {
var list = JSON.parse(localStorage.getItem("cmts") || '[]');
this.list = list;
}
},
created() {
this.loadComments();
},
components: {
com1: {
template: '#temp1',
data(){
return {
user: '',
comments: ''
}
},
methods: {
postCommets() {
var obj = {id:Date.now(), user: this.user, comments: this.comments};
var list = JSON.parse(localStorage.getItem("cmts") || '[]');
list.unshift(obj);
localStorage.setItem("cmts", JSON.stringify(list));
this.user = '';
this.comments = '';
}
}
}
}
});
</script>
</body>
</html>
// 问题1：我这个案例里面不需要将父组件的loadComments()方法传递给子组件；点击发表按钮后，评论列表自动更新。
// 问题2：我没有手动给输入框注册enter键盘事件，但是也有这个功能，猜测是bootstrap本身自带的。
使用ref获取DOM元素和组件引用
// vue获取dom元素
<!DOCTYPE html>
<html>
<head>
<title>vue获取dom元素</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue的包 -->
<script type="text/javascript" src="vue2.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="获取h3标签里面的文本" @click="getEle">
<h3 ref="h3Ele">这是一个h3标签</h3>
</div> <script type="text/javascript">
//创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
},
methods: {
getEle() {
// this.$refs.h3Ele：得到一个原生DOM对象
alert(this.$refs.h3Ele.innerText);
}
}
});
</script>
</body>
</html> // vue获取子组件
<!DOCTYPE html>
<html>
<head>
<title>vue获取dom元素</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue的包 -->
<script type="text/javascript" src="vue2.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
<input type="button" value="获取h3标签里面的文本" @click="getEle">
<com1 ref="com1ref"></com1>
</div> <script type="text/javascript">
//创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
},
methods: {
getEle() {
console.log(this.$refs.com1ref.sonmsg);
this.$refs.com1ref.show();
}
},
components: {
com1: {
template: '<div></div>',
data() {
return {
sonmsg: '子组件的msg'
}
},
methods: {
show() {
console.log("调用子组件的show方法：" + this.sonmsg);
}
}
}
}
});
</script>
</body>
</html>
4.路由-前端路由和后端路由的概念 <--返回目录
* 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上的资源
* 前端路由：对应单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，
同时，hash有一个特点：HTTP请求中不会包含hash相关的内容。所以，单页面程序中页面跳转主要用hash实现
* 在单页面应用程序中，这种通过hash改变类切换页面的方式，称做前端路由
* 路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。
* 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，
是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
5.路由-vue-router的基本使用 <--返回目录
<!DOCTYPE html>
<html>
<head>
<title>vue获取dom元素</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue.js -->
<script type="text/javascript" src="vue2.js"></script>
<!-- 安装 vue-router 路由模块 -->
<script type="text/javascript" src="vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/login">Go to login</router-link>
<router-link to="/register">Go to register</router-link>
<!-- 下面的方式也可以,但是不推荐注意使用 -->
<a href="#/login">登录</a>
<a href="#/register">注册</a>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div> <script type="text/javascript">
// 组件的模板对象
var login = {
template: '<h1>登录组件</h1>'
};
var register = {
template: '<h1>注册组件</h1>'
}; // 创建一个路由对象
var routerObj = new VueRouter({
routes: [ // 路由匹配规则
{path: '/login', component: login},
{path: '/register', component: register}
]
}); // 创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
//将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
router: routerObj
});
</script>
</body>
</html>
6.路由-路由redirect重定向的使用 <--返回目录
routes: [ // 路由匹配规则
{path: '/', redirect: '/login'},
{path: '/login', component: login},
{path: '/register', component: register}
]
7.路由-设置选中路由高亮的两种方式 <--返回目录
// 第一种方式
<style type="text/css">
.router-link-active { // vue-router默认的
color: red;
background-color: #ccc;
}
</style>
// 设置链接激活时使用的CSS类名。默认值可以通过路由的构造选项linkActiveClass来全局配置。
var routerObj = new VueRouter({
routes: [ // 路由匹配规则
{path: '/', redirect: '/login'},
{path: '/login', component: login},
{path: '/register', component: register}
],
linkActiveClass: 'myActive'
});
/*修改链接激活使用的CSS类名：myActive*/
.myActive {
color: #fff;
background-color: #ff3300;
}
8.路由-为路由切换启动动画 <--返回目录
/*自定义样式，来控制元素动画样式*/
.my-enter, .my-leave-to {
opacity: 0;
transform:translateX(150px);
}
.my-enter-active, /*入场动画的时间段*/
.my-leave-active { /*离场动画的时间段*/
transition: all 0.4s ease;
} <!-- 路由匹配到的组件将渲染在这里 -->
<transition mode="out-in" name="my">
<router-view></router-view>
</transition>
9.路由传参-使用query方式传递参数 <--返回目录
<router-link to="/login?id=10">Go to login</router-link>
var login = {
template: '<h1>登录组件---{{$route.query.id}}</h1>'
};
10.路由传参-使用params方式传递路由参数 <--返回目录
<router-link to="/register/20">Go to register</router-link>
var register = {
template: '<h1>注册组件---{{$route.params.id}}</h1>'
};
// 创建一个路由对象
var routerObj = new VueRouter({
routes: [ // 路由匹配规则
{path: '/', redirect: '/login'},
{path: '/login', component: login},
{path: '/register/:id', component: register}
],
linkActiveClass: 'myActive'
});
11.路由-使用children属性实现路由嵌套 <--返回目录
<!DOCTYPE html>
<html>
<head>
<title>使用children属性实现路由嵌套</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue.js -->
<script type="text/javascript" src="vue2.js"></script>
<!-- 安装 vue-router 路由模块 -->
<script type="text/javascript" src="vue-router.js"></script>
<style type="text/css">
/*链接激活默认使用的CSS类名：router-link-active*/
.router-link-active {
color: red;
background-color: #ccc;
}
/*修改链接激活使用的CSS类名：myActive*/
.myActive {
color: #fff;
background-color: #ff3300;
}
/*自定义样式，来控制元素动画样式*/
.my-enter, .my-leave-to {
opacity: 0;
transform:translateX(150px);
}
.my-enter-active, /*入场动画的时间段*/
.my-leave-active { /*离场动画的时间段*/
transition: all 0.4s ease;
} .parent {
border:1px dashed #000;
width: 300px;
height: 500px;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/account">go to account</router-link>
</p> <!-- 路由出口，路由匹配到的组件将渲染在这里 -->
<transition mode="out-in" name="my">
<router-view class="parent"></router-view><!-- 给父组件留的坑 -->
</transition>
</div> <template id="temp">
<div>
<h2>account--父组件</h2>
<router-link to="/account/login">登陆</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view><!-- 给子组件留的坑 -->
</div>
</template> <script type="text/javascript">
// 组件的模板对象
var account = {
template: '#temp'
};
var login = {
template: '<h1>login组件</h1>'
};
var register = {
template: '<h1>register组件</h1>'
}; // 创建一个路由对象
var routerObj = new VueRouter({
routes: [ // 路由匹配规则
//{path: '/', redirect: '/account'},
{path: '/account', component: account, children: [
{path: 'login', component: login},
{path: 'register', component: register}
]}
],
linkActiveClass: 'myActive',
}); // 创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
//将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
router: routerObj
});
</script>
</body>
</html>
12.路由-使用命名视图实现经典布局 <--返回目录
<!DOCTYPE html>
<html>
<head>
<title>使用命名视图实现经典布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 导入vue.js -->
<script type="text/javascript" src="vue2.js"></script>
<!-- 安装 vue-router 路由模块 -->
<script type="text/javascript" src="vue-router.js"></script>
<style type="text/css">
.header {
background-color: #abc;
height: 80px;
}
.container {
display: flex;
height: 600px;
}
.left {
flex: 2;
background-color: #ccc;
}
.main {
flex: 8;
background-color: blue;
}
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 0;
font-size: 16px;
}
</style>
</head>
<body>
<div id="app">
<!-- 路由出口，路由匹配到的组件将渲染在这里 -->
<router-view class="header"></router-view>
<div class="container">
<router-view name="left" class="left"></router-view>
<router-view name="main" class="main"></router-view>
</div>
</div> <script type="text/javascript">
// 组件的模板对象
var header = {
template: '<h1>header组件</h1>'
};
var left = {
template: '<h1>left组件</h1>'
};
var main = {
template: '<h1>main组件</h1>'
}; // 创建一个路由对象
var routerObj = new VueRouter({
routes: [ // 路由匹配规则
{path: '/', components: {
'default': header,
'left': left,
'main': main
}}
]
}); // 创建一个vue实例
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
//将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
router: routerObj
});
</script>
</body>
</html>
vue学习-day04（路由）的更多相关文章
- vue学习之六路由系统
一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...
- vue学习笔记——路由
1 路由配置 在vue.config中配置,则在代码中可以使用 @来表示src目录下 import aa from '@/aa/index.js' 2 单页面可以懒加载 3 创建动态路由 路由中定义: ...
- Vue学习之路由vue-router传参及嵌套小结（十）
一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue学习之路由vue-router小结（九）
一.路由: 1.后端路由: 对于普通网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 2.前端路由: 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页 ...
- vue 学习笔记—路由篇
一.关于三种路由 动态路由 就是path:good/:ops 这种 用 $route.params接收 <router-link>是用来跳转 <router-view> ...
- Vue 学习 二 路由详解
1 roter-link 和roter-view组件 2路由配置 a.动态路由 b.嵌套路由 c.别名路由 d.命名路由 3 Js操作路由 4 重定向和别名 1为路由默认绑定 2 使用组件 根据 路由 ...
- vue学习记录④（路由传参）
通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
随机推荐
- Vue --》this.$set()的神奇用法
作为一名开发者,我们都知道: data中数据,都是响应式.也就是说,如果操作data中的数据,视图会实时更新: 但在实际开发中,遇到过一个坑:若data中数据类型为对象,方法methods中改变对象的 ...
- C语言博客作业05
这个作业属于哪个课程 C语言程序设计II 这个作业要求在那里 https://edu.cnblogs.com/campus/zswxy/CST2019-3/homework/9827 我在这个课程的目 ...
- wpf学习笔记(1)
wpf常用控件 0x01. 常用布局控件 1.Canvas 不会对子控件施加任何帮助,也不会施加任何限制 2.DockPanel 可以让子控件贴靠在自己四条边的任意一边 ,最后一个子控件充满剩余区域 ...
- Exchange 2010的部署
实验拓扑: 实验准备条件:计算机基本配置的准备:DC (vbers):配置IP地址.子网掩码.网关EX (vbers2):配置IP地址.子网掩码.网关.指定DNS 域环境搭建的准备1.在计算机名为vb ...
- 下载MySQL的rpm包安装MySQL
cd /usr/local/src wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-community-server-5.7.27-1.el ...
- 基于Spring Cloud 几行配置完成单点登录开发
单点登录概念 单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. ...
- roll out项目中原系统自定义程序不能编辑
1.SE38编辑时报 程序源系统与现阶段系统不一致:Carry out repairs in non-original systems only if urgent 2.SE16N 查看表TADIR, ...
- App原生、混合、纯WEB开发模式的优劣分析
什么叫做原生App? 什么是混合app? 什么是Web App开发? Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统 ...
- Linux日常操作整理
1. Linux下建立ssh互信 需要在两台机器上保证安装ssh步骤:cd ~/.sshssh-keygen(每台机器执行此操作)ssh root@192.168.2.100 cat ~/.ssh/i ...
- 2019-11-29-VisualStudio-2019-尝试使用-C#-8.0-新的方式
title author date CreateTime categories VisualStudio 2019 尝试使用 C# 8.0 新的方式 lindexi 2019-11-29 08:41: ...