1—父组件给子组件传参，父组件数据变化子组件数据也变化，子组件的数据变化让父组件也变化
2----分类页面的实现
3— 子组件传递数据给父组件
4----路由及路由的嵌套
<body>
<div id="app">
<h3 @click="change()">{{as.t}}</h3>
<login :abc='man' :as='as'></login>
</div>
<template id="login">
<div>
<li>登陆页面{{abc}}</li>
<li >{{num}}</li>
<li @click="change()">{{as.t}}</li>
</div>
</template>
</body>
<script src="vue.js"></script>
<script>
var login={
template:"#login",
props:['abc','as'],
watch:{
as(){
this.n=this.as
}
},
data() {
return {
num:'asdasdsa',
n:this.as
}
},
methods: {
change(){
this.n.t+=2;
console.log(this.n);
}
},
}
new Vue({
el:'#app',
data:{
msg:'',
//用loginTest接受父组件传来的数据
man:'hello world',
as:{t:'富足建数据'}
},
methods: {
change(){
this.as.t+=1
}
},
components:{
'login':login
}
})
2----分类页面的实现
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
.left{
width: 20%;
height: 100vh;
float: left;
background:lime;
overflow: auto;
}
.right{
width: 80%;
height: 100vh;
float: right;background: pink;
overflow: auto;
}
div::-webkit-scrollbar {
display: none;
}
</style>
<main id="box">
<div class="left">
<ul>
<li v-for="(item,index) in list" @click="msg=item.id">{{item.con}}</li>
</ul>
</div>
<div class="right">
<ul>
<component :is="msg"></component>
</ul>
</div>
</main>
<template id="manC">
<li>这是男装</li>
</template>
<template id="womanC">
<li>这是女装</li>
</template>
<script src="js/vue.js"></script>
<script>
var manC={
template:'#manC'
}
new Vue({
el:'#box',
data:{
list:[{
id:'manC',
con:'男装'
},
{
id:'womanC',
con:'女装'
},
{
id:'manS',
con:'男鞋'
},
{
id:'womanS',
con:'女鞋'
},
{
id:'bag',
con:'包包'
}
]
,
msg:'manC'
},
components:{
'manC':manC,
'womanC':{
template:'#womanC'
}
}
})
</script>
3— 子组件传递数据给父组件
<!--
子组件传递数据给父组件
1、在子组件中定义一个方法 。方法内部书写 this.$emit('事件名',所需要发送的数据a,b,c)
2、在占位符中 @事件名="父组件中接收数据的方法名" 此处的方法名不需要加()
3、在父组件中 定义接收数据的方法
4、在子组件中，执行第一步的时候子组件定义方法
-->
<!--app是父组件 login子组件 -->
<div id="app">
<h1 @click="change()">{{msg}}{{this.user}}</h1>
<login @send="getmsg"></login>
</div>
<template id="login">
<h1 @click="change()">这是登录页面{{msg}}{{fn()}}</h1>
</template>
<script src="js/vue.js"></script>
<script>
var login={
template:'#login',
data(){
return {
msg:'这是子组件的数据',
n:{
user:'zs'
}
}
},
methods:{
fn(){
// 自定义事件
this.$emit('send',this.msg,this.n)
},
change(){
this.msg+=1;
}
}
}
new Vue({
el:'#app',
components:{
'login':login
},
data:{
msg:'',
user:'',
},
methods:{
getmsg(a,b){
this.user=b;
this.msg=a;
},
change(){
this.msg+=2;
this.user.user+='a'
}
}
})
</script>
4----路由及路由的嵌套
分4部：
1--vue中的路由是实现spa的基础 spa:一个项目只有一个html
之前实现页面跳转，需要用到a 现在用router-link替换
router-link实现页面跳转 to跳转的链接前面必须要有斜线
router-link最终渲染成了a
2---定义路由 var router=new VueRouter({
// routes配置路线，为每一个路由配置路线，渲染内容到router-view内部
routes:[{
// path书写的是路径 router-link中的to值
path:''
// component对应的组件
component:
}]
})
3---挂载路由
// 挂载路由
// k:v k固定写法 v上面声明的变量
4---路由的页面渲染
<router-view></router-view>
<style>
/*点击的内容会自动生成router-link-exact-active router-link-active*/
.router-link-exact-active{
color:red;
}
.router-link-exact-active img:nth-of-type(2){
display: inline-block;
}
img:nth-of-type(2){
display: none;
}
.router-link-exact-active img:nth-of-type(1){
display: none;
}
img:nth-of-type(1){
display: inline-block;
}
</style>
<body>
<!-- vue中的路由是实现spa的基础 spa:一个项目只有一个html
之前实现页面跳转，需要用到a 现在用router-link替换
-->
<div id="app">
<ul>
<li>
<!--
router-link实现页面跳转 to跳转的链接前面必须要有斜线
router-link最终渲染成了a
-->
<router-link to="/quickly">
<img src="index.png" alt="">
<img src="index_s.png" alt="">
唯品快抢</router-link>
</li>
<li>
<router-link to="/outlet">唯品奥莱</router-link>
</li>
<li>
<router-link to="/clear">清仓</router-link>
</li>
</ul>
<!-- 渲染跳转页面的内容 -->
<router-view></router-view>
</div>
<!-- 定义模板-->
<template id="quickly">
<div>
<h1>这是唯品快抢的内容</h1>
<router-link to="/miao">苏宁秒杀</router-link>
<router-view></router-view>
</div>
</template>
<template id="outlet">
<h1>这是唯品奥莱的内容</h1>
</template>
<template id="clear">
<h1>这是清仓内容</h1>
</template>
<template id="miao">
<main>
<h1>这是秒杀内容</h1>
</main>
</template>
<script src="js/vue.js"></script>
<!-- 引入路由的时候，首先需要引入的是vue.js 路由库文件依赖于框架的 -->
<script src="js/vue-router.js"></script>
<script>
var quickly={
template:'#quickly'
}
var outlet={
template:'#outlet'
}
var clear={
template:'#clear'
}
var miao={
template:'#miao'
}
// 定义路由
var router=new VueRouter({
// routes配置路线，为每一个路由配置路线，渲染内容到router-view内部
routes:[
{
// path书写的是路径 router-link中的to值
path:'/quickly',
// component对应的组件
component:quickly,
// children配置子路由，此处配置到路由，内容会渲染到quickly内部的router-view里面。如果quickly没有router-view。直接把不会渲染内容
children:[
{
path:'/miao',
component:miao
}
]
},{
path:'/outlet',
component:outlet
},{
path:'/clear',
component:clear
},
// 配置路径，内容会渲染在主页面的router-view内部
// {
// path:'/miao',
// component:miao
// }
]
})
new Vue({
el:'#app',
// 挂载路由
// k:v k固定写法 v上面声明的变量
router:router
})
</script>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
