vue学习04
2019-02-10 本文已影响0人
rainbowz
一路由
<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>
// 创建组件模板对象
var login ={
template:'<div>登录组件--{{$route.params.id}}--{{this.$route.params.name}}</div>',
//组件的生命周期函数
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)
}
}
// 创建路由对象
// 当导入vue-route包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
var routerObj=new VueRouter({
// 这个配置对象中的route表示【路由匹配规则】
// 每个路由规则，都是一个对象，这个对象身上，有两个必须的属性
// 属性1：path——表示监听 那个路由链接地址
// 属性2:component——表示，如果路由是前面匹配到的path，则展示component属性对应的组件
routes:[
// {path:'/',component:login},
{path:'/',redirect:'/login'}, //重定向
{path:"/login/:id/:name",component:login},
//component必须是一个组件模板对象，不能是一个组件的引用名称
{path:'/register',component:register},
],
// 更改激活类（根据这个类可以改样式）
linkActiveClass:'router-link-active'//默认就是这个哦
})
// 实例化vue对象
var vm =new Vue({
// 绑定对象
el:'#app',
data:{},
methods:{},
router:routerObj//将路由规则对象，注册到vm实例上，用来监听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
二评论列表的实现
<!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"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
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>评论内容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" value="发表评论" @click="postComment">
</div>
</div>
</template>
</body>
<script>
let commentBox = {
template:'#tmp1',
data(){
return {
user:'',
content:''
}
},
methods:{
postComment(){
if(this.user == '' || this.content == ''){
alert("请填写正确内容")
return
}
// 分析：发表评论的业务逻辑
// 1、评论数据存到哪里去？？ 存放到 localStorage 中
// 2、先组织出一个最新的评论数据对象
// 3、想办法，把 第二步中，得到的评论对象。保存到 localStorage中
// 3.1localStorage 只支持存放字符串数据，要先调用JSON.stringify
// 3.2在保存最新的评论数据之前，要先从localStorage获取到之前评论数据
// 3.3需要先判断localStorage中有无数据，若没有，返回"[]"
// 3.4发最新的列表数据，再次调用JSON。stringify转为数组字符串
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后面
:后面是变量
不加冒号永远是字符串
