vue 学习第四天 -凯发k8官方网
4. vue 操作dom ,获得dom节点, ref 属性， $refs
ref 引用组件 ,然后实现相关数据和 方法的引用，差不多就是父组件调用子组件，
<body>
<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 : '
',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">
<router-link to="/login">登录router-link>
<router-link to="/register">注册router-link>
<router-view>
router-view>
div>
<script>
//1.先声明 两个组件对象 ，，，，，
var login ={
template : '
'};
var register ={
template : '
'};
//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">
<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 : '
', 使用data 传递，或者直接拿template : '
',data () {
return {
msg : '123',
};
},
created(){ //组件的生命周期钩子函数
//获得相关的参数，，，
console.log(this.$route);
console.log(this.$route.query.id);
this.msg = this.$route.query.id;
}
};
var register ={
template : '
'};
//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">
<router-link to="/login/10/yx">登录router-link>
<router-link to="/register">注册router-link>
<router-view>
router-view>
div>
<script>
//1.先声明 两个组件对象 ，，，，，
var login ={
// template : '
', 使用data 传递，或者直接拿template : '
',data () {
return {
msg : '123',
};
},
created(){ //组件的生命周期钩子函数
//获得相关的参数，，，
console.log(this.$route);
console.log(this.$route.params.id);
this.msg = this.$route.params.id;
}
};
var register ={
template : '
'};
//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>
<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 :'
这个是登录
'};
var register = {
template :'
这个是注册
'};
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>
<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="right">router-view>
div>
div>
<script>
var header ={
template : '
'};
var leftbox = {
template : '
'};
var mainbox = {
template : '
'};
//创建路由对象 ，已经相关路由规则
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>
总结
以上是凯发k8官方网为你收集整理的vue 学习第四天 -2的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：