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>
扫一扫
2173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
