一路由
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<!-- 引入路由模塊 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="../bootstrap.css"/>
</head><style>
.router-link-active,.myactive{
color:yellow;
font-size: 50px;
font-style: italic;
text-decoration: underline;
background: green;
/* 紅配綠 */
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active{
transition: all .5s ease;
}
</style>
<body>
<div id="app">
<!-- <a href="#/login/id=7/name='clearlove'">登錄</a>
<a href="#/register">注冊</a> -->
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/login/id='7'/name='clearlove7'" tag="span">login</router-link>
<router-link to="/register?id='9527'">register</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
</body>
<script>
// 創(chuàng)建組件模板對象
var login ={
template:'<div>登錄組件--{{$route.params.id}}--{{this.$route.params.name}}</div>',
//組件的生命周期函數(shù)
created(){
console.log(this.$route.params.id)
console.log(this.$route.params.name)
}
}
var register ={
template:'<div>祖冊組件--{{$route.query.id}}--</div>',
created(){
console.log(this.$route.query.id)
}
}
// 創(chuàng)建路由對象
// 當導入vue-route包之后，在window全局對象中，就有了一個路由的構(gòu)造函數(shù)，叫做VueRouter
var routerObj=new VueRouter({
// 這個配置對象中的route表示【路由匹配規(guī)則】
// 每個路由規(guī)則推穷，都是一個對象及舍，這個對象身上，有兩個必須的屬性
// 屬性1：path——表示監(jiān)聽 那個路由鏈接地址
// 屬性2:component——表示蔽挠，如果路由是前面匹配到的path淆两，則展示component屬性對應的組件
routes:[
// {path:'/',component:login},
{path:'/',redirect:'/login'}, //重定向
{path:"/login/:id/:name",component:login},
//component必須是一個組件模板對象断箫，不能是一個組件的引用名稱
{path:'/register',component:register},
],
// 更改激活類（根據(jù)這個類可以改樣式）
linkActiveClass:'router-link-active'//默認就是這個哦
})
// 實例化vue對象
var vm =new Vue({
// 綁定對象
el:'#app',
data:{},
methods:{},
router:routerObj//將路由規(guī)則對象，注冊到vm實例上秋冰，用來監(jiān)聽URL地址變化仲义，然后展示對應的組件
})
</script>
圖片.png
路由的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<!-- 引入路由模塊 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link rel="stylesheet" href="../bootstrap.css"/>
</head><style>
.router-link-active,.myactive{
color:yellow;
font-size: 50px;
font-style:inherit;
text-decoration: underline;
background: green;
/* 紅配綠 */
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active{
transition: all .5s ease;
}
</style>
<body>
<div id="app">
<p>{{name}}</p>
<router-link to="/zoro">zoro</router-link>
<router-view></router-view>
</div>
<template id="t1">
<div >
<h1>這是zoro組件</h1>
<router-link to="/zoro/login"/>login</router-link>|
<router-link to="/zoro/register"/>register</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script>
var zoro={
template:"#t1"
}
var login={
template:"<div>登錄組件</div>"
}
var register={
template:"<div>注冊組件</div>"
}
var router= new VueRouter({
routes:[
{path:'/zoro',component:zoro,children:[
{path:'login',component:login},
{path:'register',component:register}
]},
]
})
var vm =new Vue({
el:'#app',
data:{
name:'pony'
},
methods:{},
router
})
</script>
</html>
圖片.png
圖片.png
圖片.png
二評論列表的實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<div id="app">
<cmt-box @func="loadComments"></cmt-box>
<ul>
<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="tmp1">
<div>
<div class="form-group">
<label>評論人：</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>評論內(nèi)容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" value="發(fā)表評論" @click="postComment">
</div>
</div>
</template>
</body>
<script>
let commentBox = {
template:'#tmp1',
data(){
return {
user:'',
content:''
}
},
methods:{
postComment(){
if(this.user == '' || this.content == ''){
alert("請?zhí)顚懻_內(nèi)容")
return
}
// 分析：發(fā)表評論的業(yè)務邏輯
// 1、評論數(shù)據(jù)存到哪里去剑勾？埃撵？ 存放到 localStorage 中
// 2、先組織出一個最新的評論數(shù)據(jù)對象
// 3虽另、想辦法盯另，把 第二步中，得到的評論對象洲赵。保存到 localStorage中
// 3.1localStorage 只支持存放字符串數(shù)據(jù)，要先調(diào)用JSON.stringify
// 3.2在保存最新的評論數(shù)據(jù)之前商蕴，要先從localStorage獲取到之前評論數(shù)據(jù)
// 3.3需要先判斷l(xiāng)ocalStorage中有無數(shù)據(jù)叠萍，若沒有，返回"[]"
// 3.4發(fā)最新的列表數(shù)據(jù)绪商，再次調(diào)用JSON苛谷。stringify轉(zhuǎn)為數(shù)組字符串
let comment = {id:Date.now(),user:this.user,content:this.content}
// 從localStorage中獲取評論
let list = JSON.parse(localStorage.getItem('cmts') || "[]")
list.unshift(comment)
// 重新保存
localStorage.setItem('cmts',JSON.stringify(list))
this.user = ''
this.content = ''
this.$emit("func")
}
}
}
let vm = new Vue({
// 綁定對象
el:'#app',
data:{
list:[]
},
methods:{
// 從本地的localStorage中，加載評論
loadComments(){
let list = JSON.parse(localStorage.getItem('cmts') || "[]")
this.list = list
}
},
components:{
'cmt-box':commentBox
},
created() {
this.loadComments()
},
})
</script>
</html>
圖片.png
https://github.com/shy1118999/vue.js
視圖的名稱是變量還是字符串格郁？
<router-view name="left"></router-view>他是一個值 name后面
:后面是變量
不加冒號永遠是字符串
