Vue前后端分离vue.js

教你如何学好vue《文档》

2020-03-20  本文已影响0人  chang_遇见缘

vue文档

一、课程介绍

https://vuejs.lipengzhou.com/

内容

使用 Vue.js 系列技术栈进行网站应用开发

具体知识点：

前置知识

二、项目实战

卖座移动端Vue

三、ES6常用的基础知识点

ES6介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了也叫ECMAScript 2015。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

let 和 const 命令

let

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
 let a = 10;
 var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
​
for (let i = 0; i < 10; i++) {
 // ...
}
console.log(i);
// ReferenceError: i is not defined

const 和let不存在变量提升

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415
​
PI = 3;
// TypeError: Assignment to constant variable.
​
-------------------------------------------------
const foo = {};
​
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
​
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

变量的解构赋值

数组的解构

let a = 1;
let b = 2;
let c = 3;
​
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];

对象的解构赋值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
​
--------------------------------------------
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
​
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

模板字符串

let place = "world"
// 变量place没有声明
let msg = `Hello, ${place}`;

对象的扩展

属性的简洁表示法

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
​
// 等同于
const baz = {foo: foo};
​
--------------------------------------
function f(x, y) {
 return {x, y};
}
​
// 等同于
​
function f(x, y) {
 return {x: x, y: y};
}
​
f(1, 2) // Object {x: 1, y: 2}

除了属性简写，方法也可以简写。

const o = {
 method() {
 return "Hello!";
 }
};
// 等同于
const o = {
 method: function() {
 return "Hello!";
 }
};
​
------------------------------------------
let birth = '2000/01/01';
const Person = {
 name: '张三',
 //等同于birth: birth
 birth,
 // 等同于hello: function ()...
 hello() { console.log('我的名字是', this.name); }
};

函数的扩展

函数的扩展 ES6 允许使用“箭头”（=>）定义函数。

var f = v => v;
​
// 等同于
var f = function (v) {
 return v;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

箭头函数有几个使用注意点

Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

基本用法 ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。下面代码创造了一个Promise实例。

const promise = new Promise(function(resolve, reject) {
 // ... some code
​
 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});
let promise = new Promise(function(resolve, reject) {
 console.log('Promise');
 resolve();
});
​
promise.then(function() {
 console.log('resolved.');
});
​
console.log('Hi!');
​
// Promise
// Hi!
// resolved

错误捕获

// bad
promise
 .then(function(data) {
 // success
 }, function(err) {
 // error
 });
​
// good
promise
 .then(function(data) { //cb
 // success
 })
 .catch(function(err) {
 // error
 });

promise.all() promise.race()

async/ awite

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是什么？一句话，它就是 Generator 函数的语法糖。

基本用法

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

function timeout(ms) {
 return new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}
​
async function asyncPrint(value, ms) {
 await timeout(ms);
 console.log(value);
}
​
asyncPrint('hello world', 50);
上面代码指定 50 毫秒以后，输出hello world。

返回 Promise 对象

async function f() {
 return 'hello world';
}
​
f().then(v => console.log(v))
// "hello world"

第 1 章 Vue.js 介绍

前端技术发展历程

Vue是什么

以下引自官网原话：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

发展历史

Github 发布记录

Vue 核心思想

Vue 是为了克服 HTML 在构建应用上的不足而设计的。Vue 有着诸多特性，最为核心的是：

相关链接

关于作者

image

第 2 章 Vue 基础

Vue.js 不支持 IE8 及其以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。最新稳定版本：2.6.10

安装

创建了第一个 Vue 应用

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>

<body>
   <div id="app">
       <h1>{{ message }}</h1>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
   <script>
       new Vue({
           el: '#app',
           data: {
               message: 'Hello Vue.js!'
           }
       })
   </script>
</body>
</html>

声明式渲染

需求：下面的数据如何显示到页面中？

 const data = {
            message: 'Hello Vue.js!',
            user: {
                name: '张三',
                age: 18,
                gender: 0
            }
        }
 ------------------------------------
        <h1> </h1>
        <p> 姓名：</p>
        <p> 年龄：</p>
        <p> 性别：</p>

方式一：操作 DOM

方式二：模板引擎

方式三：使用 Vue

<body>
    <div id="app">
        <h1>{{message}}</h1>
        <p>姓名：{{user.name}}</p>
        <p>年龄：{{user.age}}</p>
        <p>性别：{{user.gender}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                user: {
                    name: '张三',
                    age: 18,
                    gender: 0
                }
            }
        })
    </script>
</body>

实例选项 - el

el 不能是 html、body 节点

实例选项 - data

new Vue({
 el: '#app',
 data(){
 return {message:"demo"}
 }
})
---------------------------
new Vue({
 el: '#app',
 data:{message:"demo"}
})

组件的定义只接受 function,模板中访问的数据必须初始化到 data 中

模板语法 - 插值{{}}

    <p>{{ number + 1 }}</p>
    <p>{{ number + 1 > 10 ? 'number大于10' : 'number小于10' }}</p>
    <p>{{ arr }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>

模板语法 - 指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)

常用指令：

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。
    <h1 v-if="awesome">Vue is awesome!</h1>

    <div v-if="Math.random() > 0.5">
    Now you see me
    </div>
    <div v-else>
    Now you don't
    </div>

    <div v-if="type === 'A'">
    A
    </div>
    <div v-else-if="type === 'B'">
    B
    </div>
    <div v-else-if="type === 'C'">
    C
    </div>
    <div v-else>
    Not A/B/C
    </div>

<h1 v-show="ok">Hello!</h1>

<div v-text="text"></div> // 带标签的内容不会被解析

<div v-text="text"></div> // 带标签的内容会被解析

<input v-model="test"/> //这个指令是一个语法糖，一般只用于input标签

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

列表渲染

数组数据渲染

对象数据渲染

字符串数据渲染

绑定指令v-bind

绑定指令能绑定我们元素上的一些属性，eg：... v-bind 指令将该元素的 href 特性与变量 url 的值绑定。

绑定指令能绑定元素上的任何属性，常用的比如 id, style, class, src, ... 也能绑定自定义属性（父子传参使用，到时候再讲）

操作元素的 class 列表和内联样式是数据绑定的一个常见需求,因为它们都是属性，所以我们可以用 v-bind 处理它们,在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组

Class 绑定

    // class的值就是变量className的值
    <div v-bind:class="className"></div> 
    <div v-bind:class="className?'a':'b'"></div>

// 如果变量isActive 值为真则有active这个类，否则没有
<div v-bind:class="{ active: isActive }"></div>
-----------------------------------------------
数据：
data: {
 isActive: true
},
-----------------------------------------------
渲染为：
<div class="active"></div>

<div v-bind:class="[activeClass, errorClass]"></div>
---------------------------------------------------
数据：
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}
-----------------------------------------------
渲染为：
<div class="active text-danger"></div>

Style 绑定

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
-----------------------------
数据：
data: {
 activeColor: 'red',
 fontSize: 30
}
-----------------------------
直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject"></div>
data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
​
<!-- 缩写 -->
<a :href="url">...</a>

监听指令v-on

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

 <div id="example-1">
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button above has been clicked {{ counter }} times.</p>
 </div>

  var example1 = new Vue({
      el: '#example-1',
          data: {
              counter: 0
          }
     })

事件处理方法(常用写法)

许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称

  <div id="example-2">
        <!-- `greet` 是在下面定义的方法名 -->
        <button v-on:click="greet">Greet</button>
    </div>
    var example2 = new Vue({
        el: '#example-2',
        data: {
            name: 'Vue.js'
        },
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    })

事件传参

 <div id="example-3">
        <button v-on:click="say('hi')">Say hi</button>
        <!-- DOM的原生事件，可以用特殊变量 $event 把它传入方法 -->
        <button v-on:click="say('what',$event)">Say what</button>
    </div>
    new Vue({
        el: '#example-3',
        methods: {
            say: function (message,ev) {
                alert(message)
                console.log(ev)
            }
        }
    })

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
​
<!-- 缩写 -->
<a @click="doSomething">...</a>

练习题

以下是几个小练习，用来辅助大家增强体会 Vue 的数据驱动视图思想（MVVM）：

1、姓名展示：两个文本框，让用户分别输入性和名，然后将数据实时展示到界面上 2、数字自动增长：一个文本框用来呈递数字，一个按钮，用户点击按钮，文本框中的数字+1 3、购物车计价器：有商品价格，和商品数量，用户可以点击加减按钮改变商品数量，将价格实时展示到界面上 4、数字计算器：实现加法计算器 5、数字计算器：实现加减乘除 以上所有练习，都不要着急写代码，不要用以前 DOM 的思想去操作， 利用 Vue 的数据驱动视图的思想，去考虑问题：

练习todoList(简单版本)

image 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul li {
            list-style: none;
        }

        .hasDone {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>TODO</h1>
        <div>
            <ul>
                <li v-for="item in todoList">
                    <input type="checkbox" @click="change(item)">
                    <span :class="{hasDone: item.complete}">{{item.describe}}</span>
                </li>
            </ul>
        </div>
        <div>
            <input type="text" v-model="todoText" placeholder="add new todo here">
            <button @click="addTodo">Add</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    todoList: [{
                            describe: "the one something todo",
                            complete: false
                        },
                        {
                            describe: "the two something todo",
                            complete: false
                        }
                    ],
                    todoText: ''
                }
            },
            methods: {
                addTodo() {
                    if (this.todoText) {
                        this.todoList.push({
                            describe: this.todoText,
                            complete: false
                        })
                    }
                },
                change(todo) {
                    todo.complete = !todo.complete
                }
            },
        })
    </script>
</body>

计算属性(computed)

// 基础用法
data() {
 return {
 str: 'string'
 }
}
computed: {
 beautifyStr() {
 return this.str.split('');
 }
}

监听器（watch）

对data属性的监听，说明属性是在data中声明过的属性更新时调用监听函数，可选参数分别为新值和旧值，对属性重新设置值只要跟原来的值相等就不会触发函数调用，这一点跟计算属性是相似的，监听某一个值，当被监听的值发生变化时，执行对应的操作，与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果

// 基础用法
        new Vue({
            el: '#id',
            data: {
                firstName: 'Leo',
                lastName: 'Alan',
                obj1: {
                    a: 0
                }
            },
            watch: {
                // 监听firstName,当firstName发生变化时就会执行该函数
                firstName(newName, oldName) {
                    // 执行需要的操作...
                    // 注:初始化不会执行，只有当被监听的值(firstName)发生变化时才会执行
                },
                // 监听lastName
                lastName: {
                    handler(newName, oldName) {
                        // 执行需要的操作...
                    },
                    immediate: true // true: 初始化时就会先执行一遍该监听对应的操作
                },
                obj1: {
                    handler() {
                        // 执行需要的操作...
                    },
                    deep: true // 该属性默认值为false. 
                    // 当被监听的值是对象,只有deep为true时,对应属性的值(obj1.a)发生变化时才能触发监听事件，但是这样非常消耗性能
                },
                // 监听对象具体的属性， deep就不需要设置为true了
                'obj1.a': {
                    handler() {
                        // 执行需要的操作...
                    }
                }
            }
        })

加强版todoList

计算未做完的事 image 
watch: {
   todoList:{
     handler(){
       var count = 0
       this.todoList.forEach(item=>{
         if(!item.complete){
           count +=1
         }
       })
         this.count = count
     },
   immediate:true,
   deep:true
   }
},

第三章案例介绍

案例基本会涵盖到以下内容知识点：

案例介绍

项目初始化

下载模板

1、mkdir todomvc-vue 2、cd todomvc-vue 3、git clone https://github.com/tastejs/todomvc-app-template.git 4、npm install 5、安装完成，打开 index.html 预览模板。 6、导入vue的js文件 7、开始项目功能开发

添加功能

任务项操作

底部按钮的操作和显示

完整代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <!-- CSS overrides - remove if you don't need it -->
    <link rel="stylesheet" href="css/app.css">
</head>

<body>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="needTodoText"
                v-on:keyup.enter="addTodo">
        </header>
        <!-- This section should be hidden by default and shown when there are todos -->
        <section class="main">
            <input id="toggle-all" class="toggle-all" type="checkbox" :checked="checkedAll" @change="selectAll">
            <label for="toggle-all"  >Mark all as complete</label>
            <ul class="todo-list">
                <!-- These are here just to show the structure of the list items -->
                <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
                <li :class="{completed:item.isComplete, editing:item == editedTodo}" v-for="(item,index) in filterData">
                    <div class="view">
                        <input class="toggle" type="checkbox" :checked="item.isComplete" @change="change(item)">
                        <label @dblclick="edit(item)">{{item.title}}</label>
                        <button class="destroy" @click="deleteTodo(index)"></button>
                    </div>
                    <input class="edit" v-model="item.title" @blur="doneEdit(item)" @keyup.enter="doneEdit(item)"
                        @keyup.esc="cancelEdit(item)">
                </li>
            </ul>
        </section>
        <!-- This footer should hidden by default and shown when there are todos -->
        <footer class="footer">
            <!-- This should be `0 items left` by default -->
            <span class="todo-count"><strong>{{unComplete}}</strong> item left</span>
            <!-- Remove this if you don't implement routing -->
            <ul class="filters">
                <li>
                    <a :class="{selected:visibility=='all'}" href="#/" @click.prevent="showPanel('all')">All</a>
                </li>
                <li>
                    <a :class="{selected:visibility=='active'}" href="#/active"
                        @click.prevent="showPanel('active')">Active</a>
                </li>
                <li>
                    <a :class="{selected:visibility=='completed'}" href="#/completed"
                        @click="showPanel('completed')">Completed</a>
                </li>
            </ul>
            <!-- Hidden if no completed items are left ↓ -->
            <button class="clear-completed" @click="ClearCompleted">Clear completed</button>
        </footer>
    </section>
    <footer class="info">
        <p>Double-click to edit a todo</p>
        <!-- Remove the below line ↓ -->
        <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
        <!-- Change this out with your name and url ↓ -->
        <p>Created by <a href="http://todomvc.com">you</a></p>
        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
    <!-- Scripts here. Don't remove ↓ -->
    <script src="node_modules/todomvc-common/base.js"></script>
    <script src="js/app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        new Vue({
            el: ".todoapp",
            data() {
                return {
                    todoList: [{
                            title: "xx",
                            isComplete: false
                        },
                        {
                            title: "xx",
                            isComplete: false
                        }
                    ],
                    needTodoText: '',
                    visibility: "all", // 通过这个属性值的变化对数据进行筛选
                    checkedAll: false, // 全选按钮
                    editedTodo: null
                }
            },
            methods: {
                // 添加todoList
                addTodo() {
                    if (this.needTodoText) {
                        this.todoList.push({
                            title: this.needTodoText,
                            isComplete: false
                        });
                        this.needTodoText = "";
                    }
                },
                // 删除
                deleteTodo(index) {
                    this.todoList.splice(index, 1)
                },
                showPanel(s) {
                    this.visibility = s
                },
                change(item) {
                    item.isComplete = !item.isComplete
                },
                ClearCompleted() {
                    this.todoList = this.todoList.filter(item => {
                        return !item.isComplete
                    })
                },
                selectAll() {
                    if (this.checkedAll) {
                        this.todoList.forEach(item => {
                            item.isComplete = false
                        })
                    } else {
                        this.todoList.forEach(item => {
                            item.isComplete = true
                        })
                    }
                    this.checkedAll = !this.checkedAll
                },
                edit(todo) {
                    console.log(todo)
                    this.editedTodo = todo
                    this.beforeEditCache = todo.title
                },
                doneEdit(todo) {
                    if (!this.editedTodo) {
                        return
                    }
                    this.editedTodo = null
                    todo.title = todo.title.trim()
                    if (!todo.title) {
                        this.deleteTodo(todo)
                    }
                },
                cancelEdit(todo) {
                    this.editedTodo = null
                    todo.title = this.beforeEditCache
                }
            },
            watch: {
                todoList: {
                    handler: function (todos) {
                        var countAll = todos.length;
                        var countComplete = 0
                        todos.forEach(item => {
                            if (item.isComplete) {
                                countComplete++
                            }
                        })
                        if (countComplete === countAll) {
                            this.checkedAll = true
                        } else {
                            this.checkedAll = false
                        }
                    },
                    deep: true
                }
            },
            computed: {
                unComplete() {
                    return this.todoList.filter(item => {
                        return !item.isComplete
                    }).length
                },
                filterData() {
                    //过滤的时候有三种情况 all completed unCompleted
                    var filter = {
                        all: function (list) {
                            return list;
                        },
                        completed: function (list) {
                            return list.filter(item => {
                                return item.isComplete;
                            })
                        },
                        active: function (list) {
                            return list.filter(item => {
                                return !item.isComplete;
                            })
                        }
                    }
                    //如果找到了过滤函数，就返回过滤后的数据，如果没有找到就返回所有的数据
                    return filter[this.visibility] ? filter[this.visibility](this.todoList) : this.todoList;
                },
            },
        })
    </script>
</body>

</html>

第四章Vue-Cli脚手架

Vue CLI 是 Vue 的脚手架工具，它可以帮助我们快速生成 Vue 基础项目代码，提供开箱即用的功能特性。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性

安装

依赖要求：Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

npm install -g @vue/cli

使用 vue --version 确认是否安装成功。 image

创建项目

运行以下命令来创建一个新项目

vue create my-project
image

选择默认按enter即可

启动开发模式：npm run serve

开发期间不要关闭命令窗口，如果关了，就重新 npm run serve

浏览器中打开http://localhost:8080/看到vue初始页面，则说明初始化创建成功了

目录结构

image
名称 说明
node_modules 第三方包存储目录
public 静态资源，已被托管
src 源代码
.gitignore git 忽略文件，暂时不关心，我们还没有在项目中使用 git
babel.config.js 先不关心
package.json 包说明文件
README.md 项目说明文件
package-lock.json 包的版本锁定文件

src 目录结构

image
名称 说明
assets 资源目录，存储静态资源，例如图片等
components 存储其它组件的目录
App.vue 根组件
main.js 入口文件

程序的启动

.vue 单文件组件

template

<template>
    <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
    </div>
</template>

script

<script>
 // 1\. 使用一个普通对象配置组件的选项
 const componentOptions = {
   data() {
      return {}
   },
   methods: {}
 }
 // 2\. 将这个对象导出（组件的选项对象必须显式的导出，否则不会生效）
 export default componentOptions
</script>

为了方便，我们可以直接在定义的同时直接导出

<script>
 export default {
 data() {
 return {}
 },
 methods: {}
 }
</script>

style

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

<style scoped>
 .example {
 color: red;
 }
</style>
​
<template>
 <div class="example">hi</div>
</template>

单文件组件的定义和使用

创建单文件组件

建立一个单文件的组件

<template>
 <div>
 foo 组件
 </div>
</template>
​
<script>
 export default {
 data() {},
 methods: {}
 // ...
 }
</script>
​
<style></style>

全局注册使用

在 main.js 文件中

...
import Vue from 'vue'
import Com1 from './components/Com1.vue'
​
...
​
Vue.component('Com1', Com1)
// 接下来就可以在任何组件中使用 Com1 组件了

局部注册使用

在某个组价中局部注册使用

<template>
 <div>
 <!-- 使用 Com2 组件 -->
 <Com2></Com2>
 </div>
</template>
<script>
 import Com2 from './components/Com2'
​
 export default {
 components: {
 Com2
 }
 }
</script>

ECMAScript 6 Module

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD（require.js 库，专门用于在浏览器中进行模块化开发，几乎已经淘汰了） 两种。前者用于服务器（Node.js），后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

学习准备环境

目前无论是 Node.js 还是浏览器都还无法直接原生支持 ECMAScript 6 模块 API（import、export）。

但是对于浏览器来说我们可以使用构建工具将模块代码转换为浏览器能识别的代码。

Node.js 中可以开启实验功能来支持该功能。

为了学习方便，我们这里使用 Node 环境来学习 ES6 模块规则。

首先将你的文件后缀名定义为 .mjs，然后执行这个脚本文件的时候加上 --experimental-modules 选项。

例如我有一个 main.mjs，则执行命令是：node --experimental-modules main.js

这里只是用于测试学习，不要在生产环境中使用这个模块规则。

foo.js

// export 也用于导出
// 但是可以多次使用
export const a = 1
export const b = 2
export const c = 3
export const d = 4
​
function add(x, y) {
 return x + y
}
​
// 等价于 module.exports = add
// export default 只能使用一次
export default add
​
// 模块中有多个成员，一般都使用 export xxx
// 如果只有一个成员，那就 export default

main.js

// 加载 export default 导出的成员
// import foo from './foo'
// console.log(foo)
​
// 按需加载 export 导出的成员
// import { a, b } from './foo.mjs'
// console.log(a, b)
​
// 一次性加载所有成员(包括 default 成员)
// import * as foo from './foo.mjs'
// console.log(foo)
// console.log(foo.a)
// console.log(foo.default(10, 3)) // 很少这样去访问 default 成员
​
// 为了方便，先加载默认 default 成员，然后加载 其它 export 成员
// import abc, { a, b } from './foo'
// console.log(abc) // export default 成员
// console.log(a, b) //
​
// 可以使用 as 起别名
import { a as aa } from './foo'
console.log(aa)
​
// console.log(foo(1, 2))

相关命令

# 启动开发服务
npm run serve
# 项目打包
npm run build
# 代码检查
npm run lint

第五章vue中和服务端通信

概述

Vue 不像 jQuery 内置了 ajax 请求函数，在 Vue 中没有提供这样的功能。所以当我们需要在 Vue 中和服务端进行通信的时候可选择的方式会更灵活一些。

注意：Vue 不提供的原因是为了让 Vue 本身更专注于视图部分，保持其渐进灵活的特性

所以 Vue 给了我们更多的选择空间，例如我们可以使用下面的可选方案：

axios介绍

axios 是一个基于 Promise 的第三方 HTTP 客户端请求库，可以用于浏览器或者 Node.js。 axios 本身和 Vue 没有一毛钱关系，只是简单纯粹的封装了 HTTP 请求功能。可以运行在任何支持 JavaScript 环境的平台。

axios 依赖原生的 ECMAScript 6 Promise 支持。如果浏览器不支持 ECMAScript 6 Promise，可以使用 es6-promise 进行兼容处理

起步

npm install axios

执行一个 GET 请求

const axios = require('axios');
​
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
 .then(function (response) {
 // handle success
 console.log(response);
 })
 .catch(function (error) {
 // handle error
 console.log(error);
 })
 .finally(function () {
 // always executed
 });
​
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
 try {
 const response = await axios.get('/user?ID=12345');
 console.log(response);
 } catch (error) {
 console.error(error);
 }
}

执行一个 POST 请求

axios
 .post('/user', {
 firstName: 'Fred',
 lastName: 'Flintstone'
 })
 .then(function(response) {
 console.log(response)
 })
 .catch(function(error) {
 console.log(error)
 })

执行多个并发请求

function getUserAccount() {
 return axios.get('/user/12345')
}
​
function getUserPermissions() {
 return axios.get('/user/12345/permissions')
}
​
axios.all([getUserAccount(), getUserPermissions()]).then(
 axios.spread(function(acct, perms) {
 // Both requests are now complete
 })
)

axios API

axios(config),我们可以像使用 $.ajax() 一样来使用 axios

// Send a POST request
axios({
 method: 'post',
 url: '/user/12345',
 data: {
 firstName: 'Fred',
 lastName: 'Flintstone'
 }
})
// GET request for remote image
axios({
 method: 'get',
 url: 'http://bit.ly/2mTM3nY',
 responseType: 'stream'
}).then(function(response) {
 response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
})

第六章组件基础

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 image

.vue 单文件组件

单文件组件是最常用的编写组件的方式，我们90%以上都是这种写法，还有其他写法很少用，暂时不用掌握

组件注册方式

注册和使用方式清跳转到 第四章的Vue-cli的 单文件组件的定义和使用 这一章节

组件的生命周期

image

组件的有几个阶段

初始化阶段

表示组件创建前的准备工作， 为事件的发布订阅 和 生命周期的开始做初始化
这个钩子函数中,数据拿不到， 真实DOM也拿不到,这个钩子在项目中我们没有什么实际用途
 beforeCreate () { //表示组件创建前的准备工作（ 初始化事件和生命周期 ）
 console.log('beforeCreate') 
 console.log(this.msg) //undefind
 console.log(document.querySelector('p')) //null 没有真实DOM
}

表示组件创建结束,这个钩子函数中,数据拿到了， 但是真实DOM没有拿到
这个钩子函数在项目一般数据请求，然后可以进行一次默认数据的修改
created () { // 组件创建结束
 console.log('created')
 console.log(this.msg) //(vue.js) 有数据
 console.log(document.querySelector('p')) //null 没有真实DOM
 axios({
 url: './data.json'
 })
 .then( res => {
 this.msg = res
 })
 .catch( error => {
 throw error
 })
}

表示组件装载前的准备工作,判断 el选项有没有， 判断 template选项有没有 ， 如果没有， 那么需要手动装载,如果有，那么通过render函数进行模板的渲染
这个钩子函数中,数据拿到了， 真实DOM没有拿到,这个钩子函数在项目中，数据请求， 它也可以进行一次数据修
beforeMount () {
 console.log('beforeMount')
 console.log(this.msg) //(vue.js) 有数据
 console.log(document.querySelector('p')) //null 没有真实DOM
 // axios({
 //     url: './data.json'
 // })
 //   .then( res => {
 //       this.msg = res
 //   })
 //   .catch( error => {
 //       throw error
 //   })
 }

表示组件装载结束， 就是我们可以在视图中看到了,这个钩子函数中,数据拿到了， 真实DOM也拿到了,
这个钩子函数在项目DOM操作就可以进行了， 第三方库的实例化
mounted () {
 console.log('mount')
 console.log(this.msg) //(vue.js) 有数据
 console.log(document.querySelector('p')) //有真实DOM
 axios({
 url: './data.json'
 })
 .then( res => {
 this.msg = res
 })
 .catch( error => {
 throw error
 })
}

总结： 由上对比，我们可以知道， 数据请求越提前越好一些， created常用于数据的请求和数据的修改， 第三方库的实例化常在mounted中进行书写

运行中阶段

表示数据更新前的准备工作,这个钩子不主动执行，当数据修改了， 才会执行,这个钩子函数中数据拿到了， 并且拿到的是修改后的数据,DOM也输出了。这个钩子函数更多的工作内容为：生成新的 VDOM , 然后通过diff算法进行两次VDOM 对比。这个钩子在项目中。因为他主要做的事情是内部进行的， 所以对我们而言没有太多的操作意义

表示数据更新结束， 通过render函数渲染真实DOM。这个钩子函数的执行也是， 当数据修改的时候才执行。这个钩子函数中数据拿到了， DOM也拿到了。

总结： 数据更新， 也要进行DOM操作那么， 我们使用update这个钩子

销毁阶段

这两个钩子无差别,在项目中做善后工作 ， 手动清除一些计时器， 和一些方法， 还有第三方实例化出来的对象
Vue.component('LifeCircle',{
 template: '#life-circle',
 methods: {
 destroy(){
 this.$destroy()
 }
 },
 created () {
 this.timer = setInterval( () => {
 console.log('1')
 },1000)
 },
 beforeDestroy () {
 console.log('beforeDestory')
 },
 destroyed () {
 console.log('destroyed')
 clearInterval( this.timer )
 // 如果是用$destroy这个方法来清除组件， 那么我们必须手动清除这个组件的外壳
 document.querySelector('#app div').remove()
 }
})
new Vue({
 el: '#app',
 data: {
 flag: true
 }
})

组件通信

组件就像零散的积木，我们需要把这些积木按照一定的规则拼装起来，而且要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统。

在真实的应用中，组件最终会构成树形结构，就像人类社会中的家族树一样

在树形结构里面，组件之间有几种典型的关系：父子关系、兄弟关系、没有直接关系。

相应地，组件之间有以下几种典型的通讯方案：

直接的父子关系

直接父子关系

没有直接关系

利用 sessionStorage 和 localStorage 进行通讯

无论你使用什么前端框架，组件之间的通讯都离开不以上几种方案，这些方案与具体框架无关。

父子组件通信

组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。 在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

父传子(Props Down)

我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件：

<div>
 <input v-model="parentMsg">
 <br>
 <child :myMessage="parentMsg"></child>
 <!-- <child v-bind:my-message="parentMsg"></child> -->
</div>

子组件通过prop属性接受,prop中的变量名不能在data中定义

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
 name: 'app',
 props:['myMessage']
 components: {
 HelloWorld
 }
}
</script>

单向数据流

Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

对这两种情况，正确的应对方式是：

  1. 定义一个局部变量，并用 prop 的值初始化它：
props: ['initialCounter'],
    data: function () {
    // var a = 1
    // var b = a
    // a = 123
    // b ?
    // b 456
    // a ?
    return { counter: this.initialCounter }
    }

2.定义一个计算属性，处理 prop 的值并返回：

// ...
    props: ['size'],
    computed: {
    normalizedSize: function () {
     return this.size.trim().toLowerCase()
    }
    },

> 注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。即便引用类型可以，也不要利用这个特性，记住一个原则：组件的数据状态在组件内部管理维护，不要在其他位置去修改它

Prop 验证(这个我们当前用不到，有多余时间了解的可以学，不讲)

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用。 要指定验证规则，需要用对象的形式来定义 prop，而不能用字符串数组：

export default {
 data(){
 return {}
 },
 props: {
 // 基础类型检测 (`null` 指允许任何类型)
 propA: Number,
 // 可能是多种类型
 propB: [String, Number],
 // 必传且是字符串
 propC: {
 type: String,
 required: true
 },
 // 数值且有默认值
 propD: {
 type: Number,
 default: 100
 },
 // 数组/对象的默认值应当由一个工厂函数返回
 propE: {
 type: Object,
 default: function () {
 return { message: 'hello' }
 }
 },
 // 自定义验证函数
 propF: {
 validator: function (value) {
 return value > 10
 }
 }
 }
}

type 可以是下面原生构造器：

子传父(Events Up)

我们知道，父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。

1、在子组件中调用 $emit() 方法发布一个事件

methods: {
 incrementCounter: function () {
 this.counter += 1
 // 发布一个名字叫 increment 的事件
 this.$emit('increment')
 // this.$emit('update:foo', "传递过去的参数");
 }
},

2、在父组件中提供一个子组件内部发布的事件处理函数

new Vue({
 el: '#counter-event-example',
 data: {
 total: 0
 },
 methods: {
 incrementTotal: function () {
 this.total += 1
 }
 }
});
  1. 在使用子组件的模板的标签上订阅子组件内部发布的事件
<div id="counter-event-example">
    <p>{{ total }}</p>
    <!--
     订阅子组件内部发布的 increment 事件
     当子组件内部 $commit('increment') 发布的时候，就会调用到父组件中的 incrementTotal 方法
    -->
    <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>

非父子组件通信

简单场景：Event Bus (少用)

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：

var bus = new Vue();
// 触发组件 A 中的事件
bus.$emit('id-selected', 1);
​
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
});

复杂场景：Vuex（最常用）

在复杂的情况下，我们应该考虑使用专门的状态管理模式。

第七章Vuex

组件通信

Vuex 是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能 image

什么情况下我应该使用 Vuex

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

基本用法

image

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:

1、安装vuex

npm install vuex --save

2、创建仓库 然后 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下: 如果脚手架生成有vuex那直接跳到3步。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
​
export default store;

接下来，在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：

import store from './store'//引入store
new Vue({
 store
 render: h => h(App),
}).$mount('#app')

state：状态

设置仓库要保存的值和操作那些值的方法 回到store文件的index.js里面，我们先声明一个state变量，并赋值一个空对象给它，里面随便定义两个初始属性值；然后再在实例化的Vuex.Store里面传入一个空对象，并把刚声明的变量state仍里面：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={//要设置的全局访问的state对象
 showFooter: true,
 changableNum:0
 //要设置的初始属性值
 };
 const store = new Vuex.Store({
 state
 });
export default store;

getters：计算属性

现在可以用this.store.state.showFooter或this.store.state.changebleNum在任何一个组件里面获取showfooter和changebleNum定义的值了，但这不是理想的获取方式；vuex官方API提供了一个getters，和vue计算属性computed一样，来实时监听state值的变化(最新状态)，并把它也仍进Vuex.Store里面，具体看下面代码:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要设置的全局访问的state对象
 showFooter: true,
 changableNum:0
 //要设置的初始属性值
 };
const getters = {   //实时监听state值的变化(最新状态)
 isShow(state) {  //方法名随意,主要是来承载变化的showFooter的值
 return state.showFooter
 },
 getChangedNum(){  //方法名随意,主要是用来承载变化的changableNum的值
 return state.changebleNum
 }
};
const store = new Vuex.Store({
 state,
 getters
});
export default store;

mutations：更改状态

光有定义的state的初始值，不改变它不是我们想要的需求，接下来要说的就是mutations了，mutattions也是一个对象，这个对象里面可以放改变state的初始值的方法，具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变，同样的定义好之后也把这个mutations扔进Vuex.Store里面，如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要设置的全局访问的state对象
 showFooter: true,
 changableNum:0
 //要设置的初始属性值
 };
const getters = {   //实时监听state值的变化(最新状态)
 isShow(state) {  //承载变化的showFooter的值
 return state.showFooter
 },
 getChangedNum(){  //承载变化的changebleNum的值
 return state.changableNum
 }
};
const mutations = {
 show(state) {   //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
 state.showFooter = true;
 },
 hide(state) {  //同上
 state.showFooter = false;
 },
 newNum(state,sum){ //同上，这里面的参数除了state之外还传了需要增加的值sum
 state.changableNum+=sum;
 }
};
 const store = new Vuex.Store({
 state,
 getters,
 mutations
});
export default store;

actions：异步操作

这时候你完全可以用 this.store.commit('show') 或 this.store.commit('hide') 以及 this.store.commit('newNum',6) 在别的组件里面进行改变showfooter和changebleNum的值了，但这不是理想的改变值的方式；因为在 Vuex 中，mutations里面的方法 都是同步事务，意思就是说：比如这里的一个this.store.commit('newNum',sum)方法,两个组件里用执行得到的值，每次都是一样的，这样肯定不是理想的需求

vuex官方API还提供了一个actions，这个actions也是个对象变量，最大的作用就是里面的Action方法 可以包含任意异步操作，这里面的方法是用来异步触发mutations里面的方法，actions里面自定义的函数接收一个context参数和要变化的形参，context与store实例具有相同的方法和属性，所以它可以执行context.commit(' '),然后也不要忘了把它也扔进Vuex.Store里面：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要设置的全局访问的state对象
 showFooter: true,
 changableNum:0
 //要设置的初始属性值
 };
const getters = {   //实时监听state值的变化(最新状态)
 isShow(state) {  //承载变化的showFooter的值
 return state.showFooter
 },
 getChangedNum(){  //承载变化的changebleNum的值
 return state.changableNum
 }
};
const mutations = {
 show(state) {   //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
 state.showFooter = true;
 },
 hide(state) {  //同上
 state.showFooter = false;
 },
 newNum(state,sum){ //同上，这里面的参数除了state之外还传了需要增加的值sum
 state.changableNum+=sum;
 }
};
 const actions = {
 hideFooter(context) {  //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
 context.commit('hide');
 },
 showFooter(context) {  //同上注释
 context.commit('show');
 },
 getNewNum(context,num){   //同上注释，num为要变化的形参
 context.commit('newNum',num)
 }
};
 const store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions
});
export default store;

this.store.commit('increment') 触发mutations this.store.store.dispatch('increment') 触发 actions

// 以载荷形式分发 actions
 this.$store.dispatch('incrementAsync', {
 amount: 10
 })
// 以对象形式分发 actions
 this.$store.dispatch({
 type: 'incrementAsync',
 amount: 10
 })

而在外部组件里进行全局执行actions里面方法的时候，你只需要用执行this.$store.dispatch('hideFooter')或this.$store.dispatch('showFooter') 以及this.$store.dispatch('getNewNum'，6)//6要变化的实参,这样就可以全局改变改变showfooter或changebleNum的值了

不要滥用 Vuex，推荐方式一，能父子的就父子，非父子的使用 Vuex。

总结：

简单一句话：非异步操作修改状态使用 mutation，异步操作修改状态使用 action 。其次我们使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

modules 模块化 以及 组件中引入 mapGetters、mapActions 和 mapStates的使用,这些目前不讲，有精力的同学可以自行看

第八章 Vue-router

单页面应用程序:

单页应用（英语：single-page application，缩写SPA）:在传统的网页应用中，浏览器更多的是充当一个展示层，路由处理、服务调用、页面跳转流程都由服务端来处理。即 MVC 都放在服务器端,SPA技术将逻辑从服务器转移到了客户端。这导致Web服务器发展为一个纯数据API或Web服务。这种架构的转变在一些圈子中被称为“瘦服务器架构”，以强调复杂性已从服务端转移到客户端，并认为这最终降低了系统的整体复杂性。

传统的网站有以下特点：

单页面应用，只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次。

SPA优缺点

优点：

缺点：

路由

前端路由目前主要有两种方法：

SPA 前端路由原理与实现方式：通常 SPA 中前端路由有2中实现方式

Vue-router

Vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

安装

使用脚手架初始化的时候可以初始化安装vue-router,如果没有就手动下载和使用

npm install vue-router

使用

新建router文件夹，然后建立一个index.js文件，写入路由的代码

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/HelloWorld'  //引入组件目录下的HelloWorld.vue组件
import Demo from '@/components/Demo'  //引入组件目录下的Demo.vue组件
Vue.use(Router)  //Vue全局使用Router
export default new Router({
 routes: [              //配置路由，这里是个数组
 {                    //每一个链接都是一个对象
 path: '/',         //链接路径 当路径为 http://localhost:8080/#/显示此组件
 name: 'Hello',     //路由名称，
 component: Hello   //对应要显示的组件
 },
 {                    //每一个链接都是一个对象
 path: '/demo',     //链接路径，当路径为 http://localhost:8080/#/demo显示此组件
 name: 'Demo',     //路由名称，
 component: Demo   //对应要显示的组件
 }
 ]
})

在main.js中使用router

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index.js" // 导入路由
Vue.config.productionTip = false
​
new Vue({
 router, // 使用路由
 render: h => h(App),
}).$mount('#app')

在App.js中要使用 router-view组件

<template>
 <div id="app">
 <img alt="Vue logo" src="./assets/logo.png">
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view> 
 </div>
</template>

路由跳转方式

<template>
   <div id="app">
   <h1>Hello App!</h1>
   <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/">Go to root</router-link>
    <router-link to="/demo">Go to demo</router-link>
   </p>
   <!-- 路由出口 -->
   <!-- 路由匹配到的组件将渲染在这里 -->
   <router-view></router-view>
   </div>
   </template>

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现

前进和后退this.router.go(-1) 和 this.router.go(1)：功能跟我们浏览器上的后退和前进按钮一样，这在业务逻辑中经常用到。比如条件不满足时，我们需要后退。

app.vue文件里加入一个按钮，按钮并绑定一个goback( )方法
​
​
<button @click="goback">后退</button>
<script>
export default {
 name: 'app',
 methods:{
 goback(){
 this.$router.go(-1);
 }
 }
}
</script>

编程式导航都作用就是跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者首页，都用到这个编程的方法来操作路由。this.$router.push

export default {
 name: 'app',
 methods:{
 goback(){
 this.$router.go(-1);
 },
 goHome(){
 // 字符串
 this.$router.push('/');
 }
 }
}

子路由

export default new Router({
 routes: [              //配置路由，这里是个数组
 {                    //每一个链接都是一个对象
 path: '/',         //链接路径
 name: 'Hello',     //路由名称，
 component: Hello   //对应要显示的组件
 },
 {                    //每一个链接都是一个对象
 path: '/demo',     //链接路径
 name: 'Demo',     //路由名称，
 component: Demo   //对应要显示的组件
 },
 {
 // 对某个路由使用子路由，那么需得在Hi1组件内使用 <router-view></router-view>，否则切换
 // 了子路由也无法显示出来
 path:'/h1',
 name:'Hi1',
 component:Hi1,  // 当访问 /h1的时候显示Hi1这个组件
 children:[
 {path:"/", component:Hi1}, // 当访问 /h1的时候<router-view></router-view>被这个组件替换，就会有2个Hi1组件内容。一般不这么写，一般这么写{ path: '', component: Hi1 },
 {path:"h2", component:Hi2}, // 当 /h1/h2 匹配成功，Hi2会被渲染在 Hi1 的 <router-view> 中
 {path:"h3", component:Hi3}  // 当 /h1/h3 匹配成功，Hi3会被渲染在 Hi1 的 <router-view> 中
 ]
 }
 ]
})

动态路由

const router = new VueRouter({
 routes: [
 { path: '/user/:id', component: User }
 ]
})
---------在User组件中可以通过下面方式去拿------------
{{$route.params.id}}

第一种声明式动态路由跳转
<!-- 动态路由通过命名路由跳转  /user/123   -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
第二种编程式导航的动态路由跳转
const userId = '123'
// 对象，命名的动态路由
router.push({ name: 'user', params: { userId }}) // -> /user/123
​
// 如果提供了 path，params 会被忽略
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

路由重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]
})

路由守卫

（路由的声明周期钩子函数，进阶部分学习）

上一篇下一篇

猜你喜欢

热点阅读