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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 企业年金最佳领取方案 看看过来人的有用经
- 下一篇： 两增两控是什么