Vue

上一篇是说Vue的指令,那么接下来就要实际搭建一个Vue的项目,可能只有指令貌似不够用,那么接下来,遇到什么
问题解决什么问题就可以了,其实做项目没有那么复杂,最首要的就是思路要清晰,其他的都好办

1.怎么搭建环境

好像有一套CLI可以用

2.CLI

官网地址就在这里:Vue-Cli

npm install -g vue-cli
    vue init webpack myProject
    cd myProject
    npm run dev

等待的时间不是很长,就这样,一套基础的环境搭建完毕,启动之后打开 http://localhost:8080/ ,发现一个问题,为什
么我的路由多了一个#号,那么是不是可以去掉hash路由,打开路由文件,这东西属于路由范畴的,我没有配置server,
那么它一定是前端路由管理的,我用的是IDEA可以直接点进去,看具体是怎么用的

node_modules -> vue-router ->router.d.ts
    关注这段代码
    export type RouterMode = "hash" | "history" | "abstract";
    export declare class VueRouter {
      constructor (options?: RouterOptions);
      app: Vue;
      mode: RouterMode;
      currentRoute: Route;
    }
    解决了,向下边这样写,默认给的路由是hash路由
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        }]})

3.有了基础环境,那么开始写代码

我们新建一个路由,就叫demo,按照上边的规则,可以这样写

export default new Router({
  mode: 'history',
  routes: [
    { path: '/',name: 'HelloWorld',component: HelloWorld },
    { path: '/demo',name: 'demo',component: Demo }
    ]})

刚好用到component,那就看看吧

4.component属于内置组件

Vue内置了五个组件,Component,transition,transition-group,keep-alive,slot

Component

这不就就是组件么!!简单的说,我要造一台车,是不是要有轮子,那么轮子就是一个组件,组成的构件,有了轮子,套在轴承上是不是就可以滚了
那就写一个,当访问/demo的时候我希望看到一个有数据的页面,之前学到的指令恰巧可以用在这里,没毛病
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
 <div class="hello">
   <h1 v-if="msg" @click="hideMessage">{{ msg }}</h1>
 </div>
</template>
<script>
export default {
 name: 'HelloWorld',
 data () {
   return {
     msg: 'Welcome to Your Vue.js App'
   }
 },
 methods:{
    hideMessage(){
        this.msg = undefined;
    }
 }
}
</script>
<style scoped></style>
三部分组成,template script style 是不是很熟悉

transition(被缓存而不销毁的组件实例) & transition-ground(被缓存而不销毁的组件实例)

翻译一下,过渡(动画),过渡组(批量动画),这就是动画啊,不多解释了,直接上DEMO,就在刚才我们新建的component下写

<div class="hello">
  <h1 v-if="msg" @click="show = !show">{{ msg }}</h1>
   <transition name="fade">
      <p v-show="show">hello</p>
    </transition>
</div>
<style scoped>
   &.fade-enter-active, &.fade-leave-active
     {transition: all 0.5s ease}
   &.fade-enter, &.fade-leave-active
    { opacity: 0}
   </style>

keep-alive(被缓存而不销毁的组件实例)

<div class="hello">
   <keep-alive include="demo">
       这里将会缓存名字叫做demo的组件
    </keep-alive>
   </div>

Slot

这个是一个比较好的功能,react中并没有,不过github上边有一个react-slot包,可以拿来用,其实就是一种多态思想,
slot可以提供这样的功能，我使用一个组件，默认我不传递props时候，它会展现一种状态，当我传递props并且
附带我自定义的内容时候，我希望能展示我自定义的内容,如果你学过Angular，那么就是其中的transclusion

<my-input>
      // 我有一个input组件，我期望在我的组件后边附加一个单位
     <template slot="append">美元</template>
   </my-input>