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中的组件通信,而本篇博客将会带你更上一层 ...
随机推荐
- 运行RGB-DSLAM的一些报错及处理方法
part 4 报错‘create’ is not a menber of 'CV::FeatureDetector::create(detector.c_str()); 查看opencv版本 修改Cm ...
- Python Basics with Numpy
Welcome to your first assignment. This exercise gives you a brief introduction to Python. Even if yo ...
- vue，基于element的tree组件封装
封装组件代码 // 组件:树 /* 参数说明-属性: 1.treeData:展示数据(array) 2.treeEmptyText:内容为空的时候展示的文本(String) 3.treeNodeKey ...
- 微信小程序资源整理
微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 ...
- ucloud自动创建instance
用terrform for ucloud: https://www.terraform.io/docs/providers/ucloud/index.html https://docs.ucloud. ...
- Linux上面执行 Windows 命令(比如 重启服务)的简单方法
1. 首先 基础是:openssh 还有 expect的包 2. 方法 安装openssh 转帖来自: https://www.jianshu.com/p/6e5bc39d386e 最近项目在搞Jen ...
- mysql常用的基本命令
一.基本命令 1.启动服务(以管理员身份进入cmd): 格式:net start 服务名称 示例:net start mysql 2.停止服务(以管理员身份进入cmd): 格式:net stop 服务 ...
- Oracle常用函数（3）
1)to_char()函数,将日期转换为字符串表示 SQL> select to_char(sysdate,'yyyy"年"mm"月"dd"日& ...
- 吴恩达机器学习101：SVM优化目标
1.为了描述SVM,需要从logistic回归开始进行学习,通过改变一些小的动作来进行支持向量机操作.在logistic回归中我们熟悉了这个假设函数以及右边的sigmoid函数,下式中z表示θ的转置乘 ...
- php打开csv
<?php $fh=fopen("a.csv","r");//这里我们只是读取数据,所以采用只读打开文件流 $arr=fgetcsv($fh);//这个函 ...