vue脚手架 构建豆瓣App 第一天

课堂笔记：

项目结构分析：

项目入口：index.html(div#app)

全局vue组件：App.vue(template:div#app)

通过相同id的div，index.html与Appvue关联在了一起（具体怎么关联起来的，不需要关心）

App.vue中 写入公共部分(tabbar+router-view)

如何控制router-view的显示的内容呢？
router文件夹下index.js：配置路由的文件
先导入组件 import 自定义名字首字母大写 from "路径（同级文件前也要加./）"
然后将组件应用到routes中，进行路径分配
routes:[]

豆瓣app共有5个页面
都放在src文件下的pages文件夹下 这是自己创建的文件夹

Home-->home.vue
Audio-->audio.vue
Broadcast-->broadcast.vue
Group-->group.vue
Mine-->mine.vue

5个页面又分别由不同的小组件组装而成
这些小组件，我们可以将他们存放在components文件下，也可以存放在pages的目录中

------------------------------------------------------------------------------------------------------------------------------------------

以上是本节课的笔记：

下面来一些自己的总结：

创建项目：

　　条件：node    webpack    vue-cli 记得提前安装好

1、首先创建一个文件夹 ，这个文件夹是存放项目的地方；

2、打开终端  cd到这个文件夹       （创建项目文件）

　　　　          vue  init webpack douban      （回车--router(yes)---no.....）

　　3、cd到douban   安装依赖包

　　　　　　  npm install                            （会出现一个node-module文件  这里面存放着项目的依赖）

　　4、启动项目

　　　　　　　　npm run dev                   (在浏览器地址输入：localhost:8080          就可以打开项目了)

下面按照自己的来说一下今天说学到的东西：

　　　index.html是整个项目的入口，我们会发现body里面仅仅放了 <div id="app"></div>这一个代码，很神奇吧（不用管怎么做到的），

　　　我们只需要知道index.html是和app.vue文件绑定在一起的，app.vue是全局组件，公有组件，都引入到app.vue里，就可以在任何页面显示（最典型的就是头部、和底部tabbar组件）。

　　之后，我们在src里创建一个pages文件夹，这里面是存放豆瓣的5个页面，home、audio、broadcast、group、mine里面存放着格子的vue文件（大组件）。

　　每个组件都有 template    script   style  三个板块组成，

　　如果要在一个组件引入另一个组件  首先要引入

　　　　　　import  起个名(首字母大写)   from   ‘路径’

　　举个例子：

<script>
　　import Item from './item.vue'//平级也要加./   否则报错
　　export default{

　　　　components:{
　　　　　　Item
　　　　},
　　}

</script>　

------------------------------不想写了  表达能力有限   现在把tabbar 组件  与  item组件的封装源码上来！！请看-----------------------

tabbar组件：

<template>
　　<div class="tabbar">
　　　　<Item txt="首页" mark="home" :sel="selected" @change="getVal">
　　　　　　<img src="../assets/images/ic_tab_home_active.png" height="128" width="128" slot="activeImg"/>
　　　　　　<img src="../assets/images/ic_tab_home_normal.png" height="128" width="128" slot="normalImg"/>
　　　　</Item>
　　　　<Item txt="书影音" mark="audio" :sel="selected" @change="getVal">
　　　　　　<img src="../assets/images/ic_tab_subject_active.png" height="96" width="96" slot="activeImg"/>
　　　　　　<img src="../assets/images/ic_tab_subject_normal.png" height="96" width="96" slot="normalImg"/>
　　　　</Item>
　　　　<Item txt="广播" mark="broadcast" :sel="selected" @change="getVal">
　　　　　　<img src="../assets/images/ic_tab_status_active.png" height="96" width="96" slot="activeImg"/>
　　　　　　<img src="../assets/images/ic_tab_status_normal.png" height="96" width="96" slot="normalImg"/>
　　　　</Item>
　　　　<Item txt="小组" mark="group" :sel="selected" @change="getVal">
　　　　　　<img src="../assets/images/ic_tab_group_active.png" height="96" width="96" slot="activeImg"/>
　　　　　　<img src="../assets/images/ic_tab_group_normal.png" height="96" width="96" slot="normalImg"/>
　　　　</Item>
　　　　<Item txt="我的" mark="mine" :sel="selected" @change="getVal">
　　　　　　<img src="../assets/images/ic_tab_profile_active.png" height="128" width="128" slot="activeImg"/>
　　　　　　<img src="../assets/images/ic_tab_profile_normal.png" height="128" width="128" slot="normalImg"/>
　　　　</Item>
　　</div>
</template>

<script>
　　import Item from './item.vue'
　　export default{

　　　　components:{
　　　　　　Item
　　　　},
　　　　data:function(){
　　　　　　return {
　　　　　　　　selected:"home"
　　　　　　}
　　　　},
　　　　methods:{
　　　　getVal:function(val){
　　　　　　　　　　this.selected=val;
　　　　　　　　}
　　　　　　}
　　　　}

</script>

<style>
　　.tabbar{width:100%;height:64px;border-top:1px solid #ccc;}
</style>

-----------------------------------------------------item组件--------------------------------------------------------------

<template>
　　<div class="itemWrap" @click="fn">
　　　　<span v-show="bol"><slot name="activeImg"></slot><br></span>
　　　　<span v-show="!bol"><slot name="normalImg"></slot><br></span>
　　　　<span :class="{active:bol}">{{ txt }}</span>
　　</div>
</template>

<script>
　　export default{
　　　　props:["txt","mark","sel"],
　　　　computed:{
　　　　　　bol:function(){
　　　　　　if(this.mark==this.sel){return true;}
　　　　　　return false;
　　　　　　}
　　　　},
　　　　methods:{
　　　　　　fn:function(){
　　　　　　　　this.$emit("change",this.mark);
　　　　　　　　this.$router.push('/'+this.mark);
　　　　　　}
　　　　}
　　}
</script>

<style>
　　.itemWrap{width:20%;float: left;}
　　.itemWrap img{width:40px;height:40px;display: block;margin:0 auto;}
　　.itemWrap span{font-size:12px;color:#666;}
　　.itemWrap .active{color:#42bd56;}
</style>

------------------------------------------------总结一下 以上代码用到的知识点  然后睡觉--------------------------------------

以上代码主要实现 tabbar的切换   点击相应图标  切换到对应页面

路由重定向  是写在app。vue文件里的

　　beforeCreate:function(){
　　　　this.$router.push('/');
　　}

在router文件下的index.js里配置5个页面的路由设置：

　　　　

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import Test from '../components/test.vue'
import Home from '../pages/Home/home.vue'
import Broadcast from '../pages/Broadcast/broadcast.vue'
import Audio from '../pages/Audio/audio.vue'
import Group from '../pages/Group/group.vue'
import Mine from '../pages/Mine/mine.vue'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/audio',
name: 'Audio',
component: Audio
},
{
path: '/broadcast',
name: 'Broadcast',
component: Broadcast
},
{
path: '/group',
name: 'Group',
component: Group
},
{
path: '/mine',
name: 'Mine',
component: Mine
}
]
})

----------------------------------------------------------------------------------------------------

点击对应图标  对应图标变成绿色（其实是显示active图片  隐藏 normal图片   这有v-show指令的布尔值控制）

主要用到的知识是子组件向父组件的逆向传值     我说一下思路

　　正向传值（父-》子）  在子组件的props配置项里 定义一个变量 ，  在父组件里调用时 ， 当做属性绑定它  ，它的值写成父组件里的变量即可

　　逆向传值（子-》父）：这需要用到 创建自定义监听事件的方法：我来说一下思路

　　　　首先 需要一个点击事件来触发，这个事件就绑定在item上就行，假设这个点击的函数为fn，在fn函数写：

　　　　　　

methods:{
　　fn:function(){
　　　　this.$emit("change",this.mark);//创建自定义监听事件的方法，谁创建，谁就接收  第一个参数是自定义事件名称，第二个参数是要传的值
　　　　this.$router.push('/'+this.mark);//实现页面切换
　　}
}

自定义监听事件创建出来了，在父组件里调用子组件时，在子组件上绑定这个自定义创建的事件：    @change="getval"

getval函数是在父组件里定义的，它的默认参数是子组件传来的值

在父组件的methods配置项中写：

　　

methods:{
　　getVal:function(val){//val默认是子组件里传来的值
　　　　this.selected=val;
　　}
}

----------------------下面来说一下，实现点击对应图标，对应图标变色的思路-----------------------------------

首先，在子组件里定义了一个mark变量，在父组件里调用子组件时，给mark传了不同的值，这里面传的是每个页面的路由地址（原来是传数字的，只不过这里要实现路由跳转，才传的每个页面的路由地址），这样就可以区分出每个item了，就是相当于给每个item做了一个标记。在父组件中定义了一个selected变量，

selected值是子组件被点击时传来的mark值，再把这个selected值，通过绑定属性的方式传给子组件，子组件有自己定义的sel变量来接收，之后判断子组件的mark值是否与sel值相等，其实至少是有一个item的mark值是和sel值相等的，因为点击item时，父组件会接收到一个子组件的mark值，而父组件又通过selected值传给了子组件的sel变量，这样就知道我们到底点击的是哪一个item了，然后让这个item的bol值变成true，而这个bol值，控制着每个item的两张图片的显示与隐藏，我们定义，有v-show指令控制，这样就成功实现了点击对应item，此item就变色的效果，路由的切换，随之实现。逻辑有点复杂。。。。。晚安！