Vue系统性学习第一篇

前言

开启Vue从安装到应用得心应手的征程，充分条件参考了链接，表示感谢！

需要提前掌握的知识：Javascript、HTML5、ECMAScript6、CSS和Web基础

Vue全家桶：Vue.js核心知识、vuex(MVVM，状态管理)、vue-router(路由管理)、vue-loader(加载器)等

成为一个高级的前端，不仅需要掌握上述语言和知识，还需要掌握数据库、前后台通信、网络基础、算法思想、优化思想、常用框架（Vue、Node等）、系统性思想

1 需要安装的工具

• node.js : 「提供js运行的环境，相当于浏览器」，安装node环境的同时会安装npm命令，当然可以选择使用yarn命令。
• vue-cli : 「vue命令行工具」，可以使用npm命令或者yarn命令来安装
• webpack : 「项目打包方式，更多使用方式，请访问官网」
• …

2 创建项目

• 首先在命令行中进入将要放置项目的文件夹
• 输入：

vue init webpack Vue-projectName

其中webpack是模版名称，可以到Vue.js的Gitub上查看更多的模版

• 接着会出现如下：

• 打开刚创建的项目，打开Readme.md，这个文件中有项目的启动方式、打包方式等。
• 也可以修改监听的端口和文件路径等（config>index.js）

3 组件之间的数据传递

• Vue的组件作用域都是孤立的，不允许在自组件的模版内直接引用父组件的数据。要实现组件间的数据传递，必须使用特定的方法。
• 首先用vue-cli创建一个项目，App.vue是父组件，components文件夹下都是自组件。
  

3.1 父组件向子组件传递数据

• 可以使用props向自组件传递数据。

<!-- 子组件部分，这是header.vue的HTML部分，logo是在data中定义的变量 -->
<template>
    <header class="header">
        <div id="logo">{{logo}}</div>
        <ul class="nav">
            <li v-for="nav in navs">{{nav.li}}</li>
        </ul>
    </header>
</template>
<!-- 若需要从父组件获取logo 的值，需要使用props:['logo'] -->

如下所示：

<script>
    export default {
        name: 'headerDiv',
        data(){
            return {
                navs: [
                    {},
                    {},
                ]
            }
        },
        props: ['logo']
    }
</script>
<!--在props中添加了元素后，就不需要在data中再添加变量了-->

父组件部分：

<template>
    <div id="app">
        <HeaderDiv :logo="logoMsg"></HeaderDiv>
    </div>
</template>

<!-- 在调用组件的时候，使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg -->
<script>
    import HeaderDiv from './components/Header'

    export default{
        name: 'app',
        data(){
            return {
                logoMsg: 'WiseKill'
            }
        },
        components:{
            HeaderDiv
        }
    }
</script>
<!-- 然后就能将App.vue中 logoMsg 的值传给 header.vue 了. -->

3.2 子组件向父组件传递数据

• 子组件主要通过事件传递数据给

<template>
    <section>
        <div class="login">
            <label>
                <span>用户名：</span>
                <input v-model="username" @change="setUser" />
            </label>
        </div>
    </section>
</template>
<!-- login.vue的HTML部分，当<input>的值发生变化时，将username传递给App.vue -->


<!-- 首先声明一个方法setUser，用change事件来调用setUser -->
<script>
    export default{
        name: 'login',
        data() {
            return {
                username: '',
            }
        },
        methods:{
            setUser:fucntion(){
                this.$emit('transferUser', this.username)
                <!-- transferUser是一个自定义的事件，功能类似于一个中转 -->
            }
        }
    }
</script>
<!-- 在setUser中，使用$emit()来遍历transferUser，并返回this.username。 -->

在父组件App.vue中，声明一个方法getUser,用transferUser事件调用getUser方法，获取到子组件传递过来的参数 username

<script>
    import LoginDiv from './components/login'

    export default {
        name: 'app',
        data(){
            return {
                user: '',
            }
        },
        methods: {
            getUser(msg){
                this.user = msg
            }
        },
        components:{
            LoginDiv
        }
    }

3.3 子组件向子组件传递数据

• Vue没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。
• 使用vuex方便组件之间参数传递

4 Vue-router

4.1 安装配置Router

npm install @vue/router或使用yarn命令

• 1、在使用vue-cli命令创建项目时可以选择导入vue-router，也可以先创建项目，在安装router。

• 2、然后在router.js或者router文件夹下的index.js1中引入所需的组件，创建router对象。例如：

import Home from './components/home.vue'

const routes = [
    {
        path:'/home',
        name:'home',
        component: Home
    },
    {
        path: '/',
        component: Home
    }
]
export default routers

• 注意： 在创建的routers对象中，path配置了路由的路径，component配置了映射的组件。
• 然后修改main.js：(将以下语句添加)

import VueRouter from 'vue-router'
import routes from './routers'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes:routers
})

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

• 注意： 在创建的router对象中，若不配置mode，就会使用默认的hash模式，该模式下会将路径格式化为#！开头。

4.2 嵌套路由

一般在项目中，App.vue只作为一个存放组件的容器。

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

    其中<router-view>是用来渲染通过路由映射过来的组件，
    当路径修改，<router-view>中的内容也会发生更改。
    home.vue 是真正的父组件，first.vue、login.vue 等子组件都会渲染到 home.vue 中的 <router-view> 

在配置的路由后面，添加 children，并在 children 中添加二级路由，就能实现路由嵌套配置 path 的时候，以 " / " 开头的嵌套路径会被当作根路径，所以子路由的 path 不需要添加 " / "

4.3 使用映射路由

home.vue中引入了header.vue组件，其中含有导航菜单，当点击导航菜单时，会切换home.vue中<router-view>中的内容。不需要验证方法，可以是使用<router-link>.

<template>
    <header class="header">
        <router-link id="logo" to="/home/first">{{logo}}</router-link>
        <ul class="nav">
            <li v-for="nav in navs">
                <router-link :to="nav.method">{{nav.title}}</router-link>
            </li>
        </ul>
    </header>
</template>

在编译之后，<router-link>会被渲染为 <a>标签， to 会被渲染为 href，当 <router-link>被点击的时候，url 会发生相应的改变,如果使用 v-bind 指令，还可以在 to 后面接变量，配合 v-for 指令可以渲染导航菜单

4.4 编程式导航，监听

<template>
<div>
    <button class="register">注册</button>
    <button class="sign" @click="goFirst">登录</button>
</div>
</template>

<script>
    export default {
        name: '',
        data(){
            return {

            }
        },
        methods:{
            goFirst: function (){
                this.$router.push({path: '/home/first'})
            }
        }
    }
</script>

下一篇Vue「vuex组件间参数传递」