Vue 学习第四天 -2
4. Vue 操作Dom ,获得Dom节点, ref 属性， $refs
ref 引用组件 ,然后实现相关数据和 方法的引用，差不多就是父组件调用子组件，
<body>
<!--Vue 操作DOM ，-->
<div id="app">
<input type="button" value="操作DOMtest" @click="Domtest">
<h3 ref="myh3">哈哈，试试Vue 操作DOM </h3>
<login ref="mylogin"></login>
</div>
<script>
var login ={
template : '<h1>登录组件</h1>',
data (){
return {
msg : '1243546'
};
},
methods :{
show (){
console.log('show子组件');
}
}
}
var vm = new Vue({
el : '#app',
data : {
},
methods : {
Domtest(){
console.log('test');
//通过 ref 属性， 然后是通过$refs 调用看看
console.log(this.$refs.myh3.innerText);
//reference 引用类型，，，---referenceError
console.log(this.$refs.mylogin.msg);
this.$refs.mylogin.show();
}
},
components : {
login
}
});
</script>
5.路由学习，
后端路由：普通网站，访问的任何资源都是URL地址，服务器处理相关请求，
前端路由：只在前端页面或者功能之间的跳转，不会发送新的请求。通过hash来实现，# 号，通过hash 来切换不同页面（组件），称作前端路由，
5.1 下载vue-router
5.2 注册，监听，匹配，展示，放到router-view 中
5.3 router-link redirect 使用
5.4 加动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>组件的开发</title>
<script src="../../lib/vue.min.js"> </script>
<script src="../../lib/vue-router.js"></script>
<link href="../../lib/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--路由规则中传递参数，-->
<div id="app">
<!-- //4. 显示 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view>
</router-view>
</div>
<script>
//1.先声明 两个组件对象 ，，，，，
var login ={
template : '<h1>登录组件</h1>'
};
var register ={
template : '<h1>注册组件</h1>'
};
//2. 创建路由对象。创建路由规则
var routerObj = new VueRouter({
routes : [
//给一个默认的 定向
{path :'/',redirect : login},
{path : '/login',component: login},
{path : '/register', component :register}
]
}); //VueRouter
var vm = new Vue({
el : '#app',
data : {
},
methods : {
},
//3. 第三步，挂在早vm 上，
router : routerObj
});
</script>
</body>
</html>
5.5 路由规则中传递/定义参数：如何传递，传递以后如何拿，
5.5.1 直接在后面 假设query属性，query?id=10&name=lsj&...
1.如何取 首先通过 控制台vm 查看，然后寻找其中的属性，
2. 取到以后，$route.query.id $route.query.name
<body>
<!--路由规则中传递参数，-->
<div id="app">
<!-- //4. 显示 -->
<!--在路由中，使用查询字符串，给路由传递参数，则不需要修改 路由规则的path 属性-->
<router-link to="/login?id=10&name=lsj">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view>
</router-view>
</div>
<script>
//1.先声明 两个组件对象 ，，，，，
var login ={
// template : '<h1>登录组件{{msg}}</h1>', 使用data 传递，或者直接拿
template : '<h1>登录组件{{$route.query.id}}---{{$route.query.name}}</h1>',
data () {
return {
msg : '123',
};
},
created(){ //组件的生命周期钩子函数
//获得相关的参数，，，
console.log(this.$route);
console.log(this.$route.query.id);
this.msg = this.$route.query.id;
}
};
var register ={
template : '<h1>注册组件</h1>'
};
//2. 创建路由对象。创建路由规则
var routerObj = new VueRouter({
routes : [
//给一个默认的 定向
{path :'/',redirect : login},
{path : '/login',component: login},
{path : '/register', component :register}
]
}); //VueRouter
var vm = new Vue({
el : '#app',
data : {
},
methods : {
},
//3. 第三步，挂在早vm 上，
router : routerObj
});
5.5.2 路由规则传参2 ： 使用params属性
传 两个地方修改：
{ router-link to="/login/10/yx pah里面修改 /login/:id/:name }
取 params.id params.name
<body>
<!--路由规则中传递参数，-->
<div id="app">
<!-- //4. 显示 -->
<!--在路由中，使用查询字符串，给路由传递参数，则不需要修改 路由规则的path 属性-->
<router-link to="/login/10/yx">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view>
</router-view>
</div>
<script>
//1.先声明 两个组件对象 ，，，，，
var login ={
// template : '<h1>登录组件{{msg}}</h1>', 使用data 传递，或者直接拿
template : '<h1>登录组件{{$route.params.id}}---{{$route.params.name}}</h1>',
data () {
return {
msg : '123',
};
},
created(){ //组件的生命周期钩子函数
//获得相关的参数，，，
console.log(this.$route);
console.log(this.$route.params.id);
this.msg = this.$route.params.id;
}
};
var register ={
template : '<h1>注册组件</h1>'
};
//2. 创建路由对象。创建路由规则
var routerObj = new VueRouter({
routes : [
//给一个默认的 定向
{path :'/',redirect : login},
{path : '/login/:id/:name',component: login},
{path : '/register', component :register}
]
}); //VueRouter
var vm = new Vue({
el : '#app',
data : {
},
methods : {
},
//3. 第三步，挂在早vm 上，
router : routerObj
});
</script>
</body>
6. 路由的嵌套 使用children 属性实现的 ，其中，还需要一个子 坑 <router-view>
子坑<router-view></router-view> <!--让这个起作用，，-->
<body>
<!--需求，这个是实现动画，-->
<div id="app">
<router-link to="Account">登录</router-link>
<router-view></router-view>
</div>
<template id="temp1">
<div>
<h1>Account组件</h1>
<router-link to="/Account/login">登录</router-link>
<router-link to="/Account/register">注册</router-link>
<router-view></router-view> <!--让这个起作用，，-->
</div>
</template>
<script>
var login = {
template :'<h4>这个是登录</h4>'
};
var register = {
template :'<h4>这个是注册</h4>'
};
var Account = {
template : '#temp1'
};
var accountObj = new VueRouter({
routes :[
{
path :'/Account',
component : Account,
//使用children 实现子路由，path 前面不要带 /
children : [
{path : 'login' ,component : login},
{path : 'register',component : register}
]
},
//{path : '/Account/login' ,component : login}, 不能这样写。。。
//{path : '/Account/register',component : register}
]
});
var vm = new Vue({
el : '#app',
data : {
},
methods : {
},
router : accountObj
});
</script>
7. 命名 视图实现经典布局
<body>
<!--Vue 路由命名视图 ， 实现经典布局-->
<div id="app">
<router-view class="header"></router-view> <!--上-->
<div class="container">
<router-view name="left" class="left"></router-view> <!--左 ,只放指定name 的组件-->
<router-view name="main" class="right"></router-view> <!--右-->
</div>
</div>
<script>
var header ={
template : '<h1 style="background:red;text-align:center">头部区域</h1>'
};
var leftBox = {
template : '<h1 style="background:green;text-align:center">left 左边栏区域</h1>'
};
var mainBox = {
template : '<h1 style="background:blue;text-align:center">right 右边栏区域</h1>'
};
//创建路由对象 ，已经相关路由规则
var router = new VueRouter({
routes : [
{path :'/',components :{
'default' : header,
'left' : leftBox,
'main' : mainBox
}},
]
});
var vm = new Vue({
el : '#app',
data : {
},
methods : {
},
router : router //这里不知道出问题吗？？
});
</script>
</body>
Vue 学习第四天 -2相关推荐
- Vue 学习第四天--第一部分 --盲点整理与昨天知识回顾
Vue 学习第四天--第一部分 1.父组件向子组件传值 v-bind:临时变量名="父组件变量名" v-bind:value="fathervalue" 子 ...
- Vue学习（四）—— vue中的ajax
文章目录 第四部分 vue中的ajax 一.axios 1.安装 2.引入 二.vue脚手架配置代理 1.方法一 2.方法二 三.github用户搜索案例 1.接口地址 2.vue 项目中常用的 2 ...
- VUE学习(十四)读取json文件
1.json文件内容 2.使用import导入json <script setup>import config from '../../public/config/config.json' ...
- 千峰java 笔记整理_JAVA学习笔记系列：菜鸟Vue学习笔记（四）
菜鸟Vue学习笔记(四) 上周学习了使用Vue来操作表单元素进行数据双向绑定,今天我们来学习下Vue中的组件,Vue中的组件作用就是去封装一些常用的页面标签,将其当做一个整体,以便在其他位置直接使用一 ...
- Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言 一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...
- VUE学习(二十)、插槽
VUE学习(二十).插槽 一.默认插槽 1.Category.vue <template><div class="category"><h3>{ ...
- vue学习笔记（四）- cmd无法识别vue命令解决方法
vue学习笔记(四)- cmd无法识别vue命令解决方法 参考文章: (1)vue学习笔记(四)- cmd无法识别vue命令解决方法 (2)https://www.cnblogs.com/suRimn ...
- VUE项目学习（四）：编写个人页面和配置路由
VUE项目学习(四):编写个人页面和配置路由 1.准备工作,下载vue项目 先配置好node.js开发环境,并使用VUE-Cli下载好VUE项目,具体流程可以参考博客https://blog.csdn ...
- Vue学习笔记（四）—— 前端路由
介绍 本文主要介绍路由的相关知识,当然主要是以Vue的路由为主要介绍对象. 有兴趣的朋友可以看看之前的文章: Vue学习笔记(一)-- 常用特性 Vue学习笔记(二)-- 组件开发 Vue学习笔记(三 ...
最新文章
- 目标检测中的Tricks
- 用 GRUB 引导自己的操作系统
- 有奖调研 | 致云通信短信服务用户的一封信
- undertale人物_「undertale」传说之下精美人物图包 （SansGaster篇）
- 一种常见的关于率指标的错误分析思路
- AGC023F - 01 on Tree
- php-php异步网络通信引擎-服务发现-消息队列 案例
- Android webview上传图片（适配3.0,4.0,5.0,6.0）
- Git的学习笔记（一）
- 大学毕业半年后的若干感想
- amos里CFA可行性辨别结果怎么看_AMOS 中验证性因素分析（CFA）
- python实战：基于链家网二手房数据解析任务
- 【MM 容差】采购订单中的容差
- JS面试须知--字符串对象
- 后退一步 小程序_微信小程序：如何利用navigateBack退出小程序
- JAVA毕业设计装修设计管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库
- 第十二届蓝桥杯国赛真题+题解 Python
- SEO批量文章繁简转换，同义词替换
- Coursera--DataStructure-加州理工大学圣地亚哥分校课程
- custom_filter