Vue.js學習No.4
-
歡迎關注個人公衆號 css
-
學習的內容以下html
-
開始前端
-
父組件向子組件傳遞值vue
-
父組件，能夠在引用子組件的時候，經過屬性綁定（v-bind:）的 形式，把須要傳遞給子組件的數據，以屬性綁定的形式，傳遞到子組件的內部
<com1 v-bind:parentmsg="msg"></com1>vue-router -
子組件不能訪問到 父組件data中的數據，就是訪問不到msg，可是有方法能夠訪問到bootstrap
-
子組件中的data的數據，並非經過父組件傳遞的，是本身私有的，後端
-
子組件經過Ajax請求回來的數據數組
-
data裏面的數據是可讀可寫的bash
-
把父組件傳遞過來的屬性parentmsg，定義一下，這樣才能使用父組件中的數據服務器
template:"<h1 @click='change'>子組件 ---{{parentmsg}}--</h1>",
複製代碼
- 把父組件傳遞過來的屬性parentmsg，定義一下，這樣才能使用父組件中的數據
- props裏面的數據是隻讀的，不可以更改的，可是好像如今能夠了？？,並且程序不報錯？？？？
props:["parentmsg"],
複製代碼
- 修改了 props裏面的數據是隻讀的，不可以更改的，可是好像如今能夠了？？
- Demo父組件向子組件傳遞值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 父組件，能夠在引用子組件的時候，經過屬性綁定（v-bind:）的
形式，把須要傳遞給子組件的數據，以屬性綁定的形式，傳遞到子組件的內部 -->
<com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
//能夠把vm當成一個組件
var vm=new Vue({
el:"#app",
data() {
return {
msg:"父組件---我是vue的數據"
}
},
methods: {
},
components:{
//子組件不能訪問到 父組件data中的數據，就是訪問不到msg，可是有方法能夠訪問到
com1:{
//子組件中的data的數據，並非經過父組件傳遞的，是本身私有的，
// 子組件經過Ajax請求回來的數據
// data裏面的數據是可讀可寫的
data() {
return {
title:"dd"
}
},
template:"<h1 @click='change'>子組件 ---{{parentmsg}}--</h1>",
// 把父組件傳遞過來的屬性parentmsg，定義一下，這樣才能使用父組件中的數據
// props裏面的數據是隻讀的，不可以更改的，可是好像如今能夠了？？
props:["parentmsg"],
methods: {
change(){
this.parentmsg="修改了 props裏面的數據是隻讀的，不可以更改的，可是好像如今能夠了？？"
}
},
}
}
})
</script>
</body>
</html>
複製代碼
-
子組件向父組件傳遞值
-
子組件傳遞給父組件值，其實就是父組件傳遞一個方法，子組件調用方法，而後把值傳遞給父組件
-
事件綁定機制，v-on 把父組件的show的方法傳遞給子組件的event
-
v-on能夠簡寫爲@符號
<com2 v-on:event="show"></com2>
複製代碼
- 經過制定了一個ID，去加載id的template元素中的內容，當作組件的HTML結構
template: "#tmpl",
複製代碼
- 如何拿到父組件的方法
// 如何拿到父組件的方法
//emit 願意就是觸發，調用
this.$emit("event", this.ddddd)
this.$emit("event", "我是子組件傳遞過來的值哦")
this.$emit("event", 123456)
複製代碼
- 觸發父組件的方法
- 為什麼打印不出來這個對象？？？？？ 我已經延遲3s了啊啊啊啊啊,我想打印出來子組件傳遞給父組件的值，可是代碼執行會報錯？？？？我開頭覺得賦值有延遲，還延遲3s去執行，可是仍是有問題？
setTimeout(function () {
console.log('執行了');
console.log(shimingForSon)
}, 3000);
複製代碼
- Demo子組件向父組件傳遞值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<!-- -->
<!-- 子組件傳遞給父組件值，其實就是父組件傳遞一個方法，子組件調用方法，而後把值傳遞給父組件 -->
<body>
<div id="app">
<!-- 事件綁定機制，v-on 把父組件的show的方法傳遞給子組件的event-->
<!-- v-on 能夠簡寫爲 @符號 -->
<com2 v-on:event="show"></com2>
</div>
<template id="tmpl">
<div>
<h2>我是tmpl組件</h2>
<input type="button" value="點我，能夠觸發父組件的方法" @click="myDemo">
</div>
</template>
<script>
//定義了一個字面量類型的組件模板對象
var com2 = {
// 經過制定了一個ID，去加載id的template元素中的內容，當作組件的HTML結構
template: "#tmpl",
data() {
return {
// 對象
ddddd: { name: "仕明同窗", age: "18" }
}
},
methods: {
myDemo() {
console.log("我是子組件")
// 如何拿到父組件的方法
//emit 願意就是觸發，調用
this.$emit("event", this.ddddd)
this.$emit("event", "我是子組件傳遞過來的值哦")
this.$emit("event", 123456)
}
},
}
//能夠把vm當成一個組件
var vm = new Vue({
el: "#app",
data() {
console.log("data我開始執行了")
return {
msg: "父組件---我是vue的數據",
shimingForSon: null
}
},
methods: {
// 這個data可讓子組件傳遞參數過來
show(data) {
console.log("我是父組件的方法show" + data)
console.log(data)
this.shimingForSon = data
// 為什麼打印不出來這個對象？？？？？ 我已經延遲3s了啊啊啊啊啊
setTimeout(function () {
console.log('執行了');
console.log(shimingForSon)
}, 3000);
// console.log(shimingForSon)
}
},
components: {
com2
}
})
</script>
</body>
</html>
複製代碼
- Demo 評論的列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
<!-- 注意是rel 啊 -->
<link rel="stylesheet" href="./lib/bootstrap.min.css">
</head>
<body>
<div id="app">
<!-- loaddata的方法是父組件的傳遞給子組件 -->
<box @func="loadData"></box>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="tmpl">
<div>
<div class="form-group">
<label>人：</label>
<textarea class="form-control" v-model="user"></textarea>
</div>
<div class="form-group">
<label>內容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="發表" @click="add" class="btn btn-primary">
</div>
</div>
</template>
<script>
var commentBox = {
template: "#tmpl",
data() {
return {
user: "",
content: "",
}
},
methods: {
add() {
console.log("點擊組件的")
// 數據存放到了 localStorage中去了
// 組織一個最新的評論數據對選哪一個
// 把對象存儲到localStorage中去
// 注意 localStorage中支持存放字符串數據，先調用 JSON.stringify
// 注意 數據完整性，新加的數據要和舊的數據一塊兒存儲
// 注意 若是數據不存在的話，就直接返回一個空的數組
// 注意單詞千萬不要寫錯了啊
var commentqq = {
id: Date.now(), user: this.user, content: this.content
}
// 從本地獲取數據
var strdata = localStorage.getItem("cmts") || "[]"
var list = JSON.parse(strdata)
// 注意順序
// list.push(commentqq)
// 就是把數據添加到首部
list.unshift(commentqq)
// 保存數據到本地
localStorage.setItem("cmts", JSON.stringify(list))
// 清空數據
this.user = this.content = ""
console.log("點擊組件的 end" + list + this.user)
// 點擊完了 我須要刷新數據
// func 是父組件傳遞過來的方法 子組件來觸發這個方法
this.$emit("func")
}
},
}
var vm = new Vue({
el: "#app",
data: {
list: [
{ id: Date.now(), user: "shiming", content: "text" },
{ id: Date.now(), user: "shiming1", content: "text1" },
{ id: Date.now(), user: "shiming2", content: "text2" }
]
},
methods: {
loadData() {
var strdata = localStorage.getItem("cmts") || "[]"
var list = JSON.parse(strdata)
this.list = list
}
},
//初始化好了
created() {
this.loadData()
},
components: {
"box": commentBox
}
})
</script>
</body>
</html>
複製代碼
ref獲取DOM元素和組件的引用- 說通俗一點就是可使用子組建的方法和數據
console.log(this.$refs.id_h3.innerText)
<div id="app">
<input type="button" value="獲取元素" @click="getElement" ref="btn">
<!-- ref 能夠指定 原生的DOM對象 -->
<h3 id="id_h3" ref="id_h3">你好啊</h3>
</div>
複製代碼
- Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="獲取元素" @click="getElement" ref="btn">
<!-- ref 能夠指定 原生的DOM對象 -->
<h3 id="id_h3" ref="id_h3">你好啊</h3>
<hr>
<!-- 組件也可使用 -->
<login ref="myLogin"></login>
</div>
<template id="login">
<h1>登錄</h1>
</template>
<script>
var login = {
template: "#login",
data() {
return {
msg:"我是組件"
}
},
methods: {
show(){
console.log("調用了子組件的方法")
}
},
}
var vm = new Vue({
el: "#app",
data: {
},
methods: {
getElement() {
// 經過id獲取DOM元素 ，可是Vue不推薦
// <h3 id="id_h3">你好啊</h3>
console.log(document.getElementById("id_h3"))
console.log("我是Vue中獲取DOM元素的對象的方法")
// 輸出你好 我擦 牛逼
// ref 是 reference
console.log(this.$refs.id_h3.innerText)
// 獲取子組件中的 data
console.log(this.$refs.myLogin.msg)
// 調用子組件的方法
this.$refs.myLogin.show()
}
},
components:{
"login":login
}
})
</script>
</body>
</html>
複製代碼
路由
- 後端的路由：全部的URL地址對應都是服務器上對應的資源
- 前端路由：對於單頁面的應用程序來講，主要是經過
URL的hash （#）號來實現不一樣頁面之間的切換，同時hash有一個特色，http的請求不會包含ash相關的內容，因此單頁面的程序主要是經過hash實現 - 使用路由的方法
- 一、導入包
<!-- vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vue路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
複製代碼
- 二、定義組件
var login = {
template: "<h1>我是登錄組件</h1>"
}
var register = {
template: "<h1>我是註冊組件</h1>"
}
複製代碼
- 三、定義對象 注意routes的拼寫，沒有r
const router = new VueRouter({
// 表示路由匹配的規則
routes: [
// path 表示監聽那個路由鏈接的地址
// component 百世路由前面匹配到的path，展現相對的應的那個組件
// component 必須是一個組件的模板對象，不能是組件應用的名稱
// 指定默認的爲登錄，可是不推薦啊
// {path:"/",component:login},
// redirect進入頁面的時候，直接就去login組件的頁面
{ path: "/", redirect: "/login" },
{ path: "/login", component: login },
{ path: "/register", component: register }
],
// 默認值: "router-link-active"
// 設置 連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置。
// 改爲本身的想要的樣式
linkActiveClass:"myStyle"
})
複製代碼
- 四、註冊到vm中去
// 將路由規則對象，註冊到vm實例上，用來監聽URL對象的地址的變化。而後展現相對應的組件
router: router
複製代碼
-
注意事項
-
redirect進入頁面的時候，直接就去login組件的頁面
{ path: "/", redirect: "/login" }, -
"router-link-active" 設置 連接激活時使用的
CSS類名。默認值能夠經過路由的構造選項linkActiveClass來全局配置。 改爲本身的想要的樣式linkActiveClass:"myStyle" -
path表示監聽那個路由鏈接的地址 -
component必須是一個組件的模板對象，不能是組件應用的名稱 -
路由傳遞參數方式一
-
使用
k to="/login?id=10&name=shiming"傳遞參數，
<!-- router-link 默認渲染爲a標籤 tag指定渲染成什麼標籤-->
<!-- 若是在路由中，使用查詢字符串，給路由傳遞參數，則不須要修改路由規則的path屬性 -->
<router-link to="/login?id=10&name=shiming" tag="span">登錄</router-link>
複製代碼
- 在組件中的
created方法中獲取參數
// 組件的生命週期
created() {
console.log("我是登錄組件的日誌")
console.log(this.$route)
console.log(this.$route.query.id)
},
複製代碼
- 獲取值爲
- 而後顯示在控件上
// 經過這種的方式能夠拿到路徑中的值
var login = {
template: "<h1>我是登錄組件 {{$route.query.id }}----{{$route.query.name}}</h1>",
// 組件的生命週期
created() {
console.log("我是登錄組件的日誌")
console.log(this.$route)
console.log(this.$route.query.id)
},
}
複製代碼
router-link-active其中的值的意思:
/* 實現路由的文字的顏色 */
.router-link-active {
color: red;
font-weight: 800;
/* 傾斜 */
font-style: italic;
/* 大小 */
font-size: 100px;
/* 下劃線 */
text-decoration: underline;
/* 背景色 */
background-color: goldenrod
}
複製代碼
- 完整的Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vue路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
/* 實現路由的文字的顏色 */
.router-link-active {
color: red;
font-weight: 800;
/* 傾斜 */
font-style: italic;
/* 大小 */
font-size: 100px;
/* 下劃線 */
text-decoration: underline;
/* 背景色 */
background-color: goldenrod
}
.myStyle {
color: hotpink;
}
.v-enter,
.v-leaver-to {
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leaver-active {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<!--不推薦這樣使用 -->
<!-- <a href="#/login">登錄</a>
<a href="#/register">註冊</a> -->
<!-- router-link 默認渲染爲a標籤 tag指定渲染成什麼標籤-->
<!-- 若是在路由中，使用查詢字符串，給路由傳遞參數，則不須要修改路由規則的path屬性 -->
<router-link to="/login?id=10&name=shiming" tag="span">登錄</router-link>
<router-link to="/register">註冊</router-link>
<!-- 這是 vue-router中提供的元素，專門用來站位使用 -->
<!-- 包裹動畫 mode="out-in"動畫的加載的方式-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
// 經過這種的方式能夠拿到路徑中的值
var login = {
template: "<h1>我是登錄組件 {{$route.query.id }}----{{$route.query.name}}</h1>",
// 組件的生命週期
created() {
console.log("我是登錄組件的日誌")
console.log(this.$route)
console.log(this.$route.query.id)
},
}
var register = {
template: "<h1>我是註冊組件</h1>"
}
const router = new VueRouter({
// 表示路由匹配的規則
routes: [
// path 表示監聽那個路由鏈接的地址
// component 百世路由前面匹配到的path，展現相對的應的那個組件
// component 必須是一個組件的模板對象，不能是組件應用的名稱
// 指定默認的爲登錄，可是不推薦啊
// {path:"/",component:login},
// redirect進入頁面的時候，直接就去login組件的頁面
{ path: "/", redirect: "/login" },
{ path: "/login", component: login },
{ path: "/register", component: register }
],
// 默認值: "router-link-active"
// 設置 連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置。
// 改爲本身的想要的樣式
linkActiveClass: "myStyle"
})
var vm = new Vue({
el: "#app",
data: {
},
methods: {
},
// 將路由規則對象，註冊到vm實例上，用來監聽URL對象的地址的變化。而後展現相對應的組件
// 若是屬性名同樣的話，能夠直接寫 router
// router: router
router
})
</script>
</body>
</html>
複製代碼
- 路由傳遞參數方式二
- 一、傳入參數
<!-- router-link 默認渲染爲a標籤 tag指定渲染成什麼標籤-->
<router-link to="/login/10/lishiming" tag="span">登錄</router-link>
複製代碼
- 二、router定義
{ path: "/login/:id/:name", component: login },
const router = new VueRouter({
// 表示路由匹配的規則
routes: [
// path 表示監聽那個路由鏈接的地址
// component 百世路由前面匹配到的path，展現相對的應的那個組件
// component 必須是一個組件的模板對象，不能是組件應用的名稱
// 指定默認的爲登錄，可是不推薦啊
// {path:"/",component:login},
// redirect進入頁面的時候，直接就去login組件的頁面
{ path: "/", redirect: "/login" },
// 第二種傳遞參數的方法
{ path: "/login/:id/:name", component: login },
{ path: "/register", component: register }
],
// 默認值: "router-link-active"
// 設置 連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置。
// 改爲本身的想要的樣式
linkActiveClass: "myStyle"
})
複製代碼
- 三、
router若是屬性名同樣的話，能夠直接寫
// 將路由規則對象，註冊到vm實例上，用來監聽URL對象的地址的變化。而後展現相對應的組件
// 若是屬性名同樣的話，能夠直接寫 router
// router: router
router
複製代碼
- Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vue路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
/* 實現路由的文字的顏色 */
.router-link-active {
color: red;
font-weight: 800;
/* 傾斜 */
font-style: italic;
/* 大小 */
font-size: 100px;
/* 下劃線 */
text-decoration: underline;
/* 背景色 */
background-color: goldenrod
}
.myStyle {
color: hotpink;
}
.v-enter,
.v-leaver-to {
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leaver-active {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<!--不推薦這樣使用 -->
<!-- <a href="#/login">登錄</a>
<a href="#/register">註冊</a> -->
<!-- router-link 默認渲染爲a標籤 tag指定渲染成什麼標籤-->
<router-link to="/login/10/lishiming" tag="span">登錄</router-link>
<router-link to="/register">註冊</router-link>
<!-- 這是 vue-router中提供的元素，專門用來站位使用 -->
<!-- 包裹動畫 mode="out-in"動畫的加載的方式-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
// 經過這種的方式能夠拿到路徑中的值
var login = {
template: "<h1>我是登錄組件 {{$route.params.id}}----{{$route.params.name}}</h1>",
// 組件的生命週期
created() {
console.log("我是登錄組件的日誌")
console.log(this.$route.params.id)
},
}
var register = {
template: "<h1>我是註冊組件</h1>"
}
const router = new VueRouter({
// 表示路由匹配的規則
routes: [
// path 表示監聽那個路由鏈接的地址
// component 百世路由前面匹配到的path，展現相對的應的那個組件
// component 必須是一個組件的模板對象，不能是組件應用的名稱
// 指定默認的爲登錄，可是不推薦啊
// {path:"/",component:login},
// redirect進入頁面的時候，直接就去login組件的頁面
{ path: "/", redirect: "/login" },
// 第二種傳遞參數的方法
{ path: "/login/:id/:name", component: login },
{ path: "/register", component: register }
],
// 默認值: "router-link-active"
// 設置 連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置。
// 改爲本身的想要的樣式
linkActiveClass: "myStyle"
})
var vm = new Vue({
el: "#app",
data: {
},
methods: {
},
// 將路由規則對象，註冊到vm實例上，用來監聽URL對象的地址的變化。而後展現相對應的組件
// 若是屬性名同樣的話，能夠直接寫 router
// router: router
router
})
</script>
</body>
</html>
複製代碼
- 路由的嵌套
- 使用
children的屬性 實現路由的嵌套 - 使用
children屬性，實現子路由，同時，子路由的path前面不要帶/，若是帶了，就永遠以根路徑開始請求，這樣不方便咱們用戶去理解URL地址 <router-view></router-view>若是使用須要了使用就必須使用佔位符- Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vue路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 這種方式也是能夠引用組件的哦 -->
<!-- <shiming></shiming> -->
<router-link to="/acount">Acount</router-link>
<router-view></router-view>
</div>
<template id="tmpl">
<div>
<h1>這是 Account組件 裏面還嵌套了一個路由</h1>
<!-- 路由的嵌套 -->
<router-link to="/acount/login"> 登錄</router-link>
<router-link to="/acount/register">註冊</router-link>
<!-- 佔位符 必需要 -->
<router-view></router-view>
</div>
</template>
<script>
var account = {
template: "#tmpl"
}
var login = {
template: "<h3>登錄</h3>"
}
var register = {
template: "<h3>組成</h3>"
}
const router = new VueRouter({
// 這裏的不能寫成 routers 哦
routes: [
{
path: "/acount",
component: account,
// 使用children的屬性 實現路由的嵌套
// 記住 ，login前面不能加上 /
// 雖然還有另外的方式，可是呢？建議這樣使用，而後方便去理解
// 使用children屬性，實現子路由，同時，子路由的paht前面不要帶 / ，若是帶了，就永遠以根路徑開始請求，這樣不方便咱們用戶去理解URL地址
children: [
{ path: "login", component: login },
{ path: "register", component: register }
]
},
// //
// { path: "/acount/login", component: login },
// { path: "/acount/register", component: register }
]
})
var vm = new Vue({
el: "#app",
data: {
},
methods: {
},
components: {
"shiming": account
},
router
})
</script>
</body>
</html>
複製代碼
- 經典佈局
components對應不少的組件<router-view></router-view>三個坑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vue路由 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
/* 設置html頁面中的 body邊距 */
html,body{
margin: 0;
padding: 0;
}
.container {
display: flex;
}
/* h1 標籤沒有逗號哦 記住哦 */
h1{
margin: 0;
padding: 0;
font-size: 20px;
}
.header {
background-color: aqua;
height: 100px;
}
.left {
background-color: yellow;
flex: 2;
height: 600px;
}
.main {
background-color: blueviolet;
flex: 10;
height: 600px;
}
</style>
</head>
<body>
<div id="app">
<!-- 3個坑 -->
<router-view></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<script>
var header = {
template: "<h1 class='header'>Header 頭部</h1>"
}
var leftBox = {
template: "<h1 class='left'>left 側邊欄</h1>"
}
var mainBox = {
template: "<h1 class='main'>mainBox 主體區域</h1>"
}
const router = new VueRouter({
routes: [
// 這種方法不能實現
// {path:"/",component:header},
// {path:"/left",component:left},
// {path:"/mainBox",component:mainBox},
// components 對應不少的組件
{
path: "/", components: {
"default": header,
"left": leftBox,
"main": mainBox
}
}
]
})
var vm = new Vue({
el: "#app",
data: {
},
methods: {
},
// router名字同樣 能夠簡寫哦
router
})
</script>
</body>
</html>
複製代碼
- 以上，待續
相關文章
- 1. Vue.js學習No.2
- 2. Vue.js學習No.1
- 3. Vue.js學習No.5(WebPack)
- 4. Linux學習筆記NO.4
- 5. No.4-VulnHub-Tr0ll:1-Walkthrough滲透學習
- 6. vue.js 的學習
- 7. 學習vue.js (一)
- 8. 學習Vue.js-Day1
- 9. 學習Vue.js-Day3.1
- 10. Vue.js學習(一)
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue.js學習No.2
- 2. Vue.js學習No.1
- 3. Vue.js學習No.5(WebPack)
- 4. Linux學習筆記NO.4
- 5. No.4-VulnHub-Tr0ll:1-Walkthrough滲透學習
- 6. vue.js 的學習
- 7. 學習vue.js (一)
- 8. 學習Vue.js-Day1
- 9. 學習Vue.js-Day3.1
- 10. Vue.js學習(一)