电商管理系统（PC端）项目预备知识



1.前端高效开发框架技术（Vue.js）与应用

1.1 Vue基础

1.1.1 MVX模式

• MVC 模式

MVC 模式是移动最广泛的软件架构之一，把应用程序强制性地划分为三部分：模型（Model）、视图（View）和控制器（Controller）。

• MVVM 模式

　　MVVM 模式是把 MVC 模式的 Controller 改成 ViewModel。View 的变化会自动更新 ViewModel，ViewModel 的变化也会自动同步到 View 上显示。

img

1.1.2 Vue 框架概述

Vue 是一套构建用户界面的渐进式框架，Vue 只关注视图层，采用自底向上增量开发的设计，Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 框架中主要内容：

模板 主要内容
Vue 基础知识 Vue 框架基础语法、Vue 开发工具
Vue 组件 Vue 组件、Vue 模块化开发
Vue 工程化开发 npm/yarn 和 webpack 开发工具、Vue-cli 开发工具、单文件工具
Node.js 基础和 Axios 网络请求 Node.js 构建 Web 服务器、Axios 发送 ajax 请求、postman 网络调试工具
Vue-Router 路由 单页面应用 SPA、Vue-Router 实现路由机制
Vuex 状态管理 Vuex 状态管理、本地存储
Vue UI 库 Vue 中的 UI 库
2.什么是Vue?

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

  • 什么是渐进式？

　　渐进式就是说框架本身有很大包容性，只做自己该做的事，你可以在已经建立好的网站代码上，把一两个组件改用它实现，当jQuery用；也可以整个网站都用它开发，当Angular用； 还可以用它的视图，搭配自己设计的整个下层用。

  • 用户界面，视图层是什么意思？

　　它是指，数据如何渲染到页面中。 说白了，就是如何将数据固定的静态页面变成数据从后台请求过来然后再渲染出来的动态页面。

　　Vue可以和ui框架进行组合使用。Vue负责渲染数据，ui框架负责搭建页面及效果。相得益彰，配合默契。Vue.js 的作者也说了，目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

1.1.3 框架特点
  • 特点

　　mvvm

　　组件化

　　模块化

  • 应用场景：

    　　单页面应用

1.2 Vue实例

只要引入了Vue.js，框架本身就会提供一个构造器--Vue。构造器的作用，就是来实例化对象的。所以，就可以用new这个操作符，来实例化Vue对象。 

var vm = new Vue({
  // 选项
})

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。

1.2.1 数据data

Vue 实例的数据都保存在 data 对象中。当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

示例：

// 数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
    data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
console.log(vm.a == data.a); // => true

// 设置属性也会影响到原始数据
vm.a = 2;
console.log(data.a); // => 2

// ……反之亦然
data.a = 3;
console.log(vm.a); // => 3
1.2.2 挂载元素el

el表示element，表示Vue这个实例对象在哪个标签里起作用；其值是字符串，通常是选择器，有id选择器和class选择器，基本上都使用id的。

1.2.3 其他

除了数据属性、挂载元素等选项，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

示例：

var data = { a: 1 }
var vm = new Vue({
    el: '#example',
    data: data
})
console.log(vm.$data === data); // => true
console.log(vm.$el === document.getElementById('example') );// => true
1.2.4 插值
1.{{}} mustache插值的基本使用

如果单单实例化好一个Vue对象，并且指定了el和data，页面中是不会有显示的。下面一个重要的问题就是如何将Vue实例对象代理的数据渲染到页面中的。此时，我们就需要使用插值语法，在Vue.js中，使用{{ }} 来实现的，叫做mustache。回看之前的例子。

示例：

<div id="app">

</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"前端开发"
        }
    })
</script>

Mustache标签将会被替代为对应数据对象上 message属性的值。无论何时，绑定的数据对象上 message属性发生了改变，插值处的内容都会更新。

　　重点1：{{}}双括号中的内容只要是js表达式都可以。

　　重点2： 在{{}}中输出的变量，必须是在data中来定义好的。

1.3 Vue指令

　　指令（Directives）是带有 v- 前缀的特殊属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。说直白点：指令就是用来处理复杂一点的渲染。

　　在Vue中常见的指令有：

  • 数据绑定指令
  • 属性指令
  • 条件指令
  • 循环指令
1.3.1 数据绑定指令
1.3.1.1 v-text 和v-html

　　v-text用于操作纯文本。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。

注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其进行html解析，但v-html会将其当html标签解析后输出。两者类比innerText和innerHTML。

示例：

<div id="app">
    <p v-text="message"></p>
    <p v-html="message"></p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"前端开发"
        }
    }) 
</script>
1.3.1.2 v-model

　　v-model通常用于表单组件的双向数据绑定，v-model属性必须要结合表单元素来使用，只能放在表单控件元素里面才能起作用。例如input，select等。

　　双向数据绑定即如果视图变了，那么数据会跟着变，如果数据变了，视图也会跟着变。

数据------> 视图
视图------> 数据

v-model则可以实现双向的数据绑定。　　

示例：

<div id="app">
    <input type="text" v-model="message">
    <p></p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            //文本输入框的值绑定给message这个变量
            message:""
        }
    })
</script>
1.3.2 属性指令

属性绑定是通过 v-bind来实现，如果属性是动态获取的，就必须要通过属性指令来绑定。

v-bind，有一个简写的方式，直接使用 :属性名 = 值 即可。

语法：

v-bind:属性名 = '值'

示例：

<div id="app">
  <h2>动态属性</h2>
  <img v-bind:src="message">
</div>
<script>
   var app = new Vue({
       el:"#app",
       data:{
           message:"img/1.jpg"
       }
   })
</script>
1.3.3 条件指令

在Vue中，有两个条件指令：v-show 和v-if 这两个都是可以控制元素显示隐藏的。

v-show和v-if

示例：

<div id="app">
    <p v-show="show">前端开发教育</p>
    <p>学习成绩：</p>
    <p v-if="score==100">满分</p>
    <p v-else-if="score<100&&score>=90">比较优秀</p>
    <p v-else-if="score<90&&score>=80">比较良好</p>
    <p v-else-if="score<80&&score>=60">一般般</p>
    <p v-else>重考吧</p>
</div>
<script>
    var  app = new Vue({
        el:'#app',
        data:{
            // 通过改变show的值，就可以显示和隐藏这个p标签。
            show:true,
            score:90
        }
    })
</script>

v-if根据等号右边表达式的返回值是否是真来判断，是不是需要渲染这个节点，如果真就渲染，假就不渲染。

1.3.4 循环指令

　　v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法。items 是源数据数组，并且 item 是数组元素迭代的别名。

示例：

<div id="app">
    <ul>
        <li v-for="item in books"></li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            books:["水浒传","三国演义","红楼梦","西游记"]   
        }
    })
</script>

　　这样会遍历books这个数组，有多少条数据就会生成多少个li。v-for指令本身写在哪个标签上就循环输出哪个标签要输出循环的内容，还需要结合{{}}语法来输出。

　　在循环的时候，如果想要取出下标，该怎么做呢？v-for支持一个可选的第二个参数作为当前项的索引。

　　v-for不仅可以应用于数组，它还可以对对象进行循环。

示例：

<div id="app">
    <ul>
        <li v-for="(value,key) in books">-----</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            books:{
                id:"01",
                name:"水浒传",
                author:"施耐庵"
            }
        }
    })
</script>

遍历对象，对象有几个属性，就会生成多少个li，其中第一个参数代表的是健值，第二个参数代表健名。

1.4 事件绑定及methods

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

v-on 还可以通过methods接收一个需要调用的方法名称。methods的作用，就是用来定义方法的。它的值是一个对象，可以定义多个方法。

示例1：

<div id="app">
    <button v-on:click="counter += 1">加 1</button>
    <p>按钮点击了 次.</p>
    <input type="button" value="点我" @click="say();"/>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods : {
            say : function(){
                alert( '前端开发教育' );
            }
        }
    })
</script>

　注意：

  • 调用methods定义的方法的时候，直接像执行函数一样就可以了。
  • 在methods中定义的方法，是通过this指针去访问data中的数据的。

1.5 Vue计算属性　

1.6.1 基本使用

所有的计算属性都写在 Vue 实例的 computed 属性中，这个计算属性就是一个函数，返回值为最后属性的值。

计算属性的定义如下：

computed:{ 
    计算属性1:function(){ return 结果; }, 
    计算属性2:function(){ return 结果; }, 
    计算属性3:function(){return 结果; } 
}

示例：根据用户的生日得出用户的年龄。

<div id="app">
    <p>-----</p>
    <p>您的年龄是:</p>
</div>

所以输出这个用户的年龄做法是：

computed:{
    age:function(){
        //拿到birthday然后进行计算。  
        return new Date().getFullYear() - new Date(this.user.birthday).getFullYear()
    }
}

　　在这个过程中，age是我们的计算属性，它依赖于data中的user.birthday。然后在使用的时候，是以属性的方式来使用的。

1.6.2 计算属性的特点

总体就是一句话，在使用的时候，感觉像属性，在定义的时候，感觉像方法。计算属性的本质就是方法。和方法有什么区别呢？和方法相比，计算属性的性能更高，因为它有缓存。

　　具体表现在如下两个方面：

　　Ø 计算属性在多次重复调用的时候，只会执行一次，而methods中的方法则会执行多次。

示例：

HTML代码：

JS脚本：

var app = new Vue({
    el:"#app",
    data:{
        message:"牵引力",
    },
    // 这里定义的方法。让相应的message变量进行反转。同时每次执行都会打印一次methods
    methods:{
        return message:function(){
            console.log("methods");
            return this.message.split("").reverse().join("")
        }
    },
    // 这里定义了计算属性，多次执行只会打印一次computed。
    computed:{
        return msg:function(){
            console.log("computed")  
            return this.message.split("").reverse().join("")
        }
    }
})

　　Ø 如果属性有变化，但是不是计算属性，那么计算属性对应的方法不会执行，但是methods 中定义的方法会重新执行。

示例：

img

　　我们修改一下msg的值，会出现methods中的方法会重新执行，但是computed的并没有执行， 这是由于message本身并没有修改，计算属性就会使用缓存，对应的方法不会重新执行，而methods中定义的方法，则会重新执行。等于说，我们可以将同一个函数定义成一个methods和计算属性，对于最终的结果两种方式确实是相同的，然而不同的是计算属性是基于他们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变的时候才会重新求值，相比而言: 只要发生重新渲染，methods调用总会执行该函数。

1.7 Vue过滤器

基本用法

　　过滤器用于两个地方: 双花括号插值和v-bind表达式。

过滤器定义：

　　在Vue1.x中，内置了一些过滤器，可以直接使用的。但是到了Vue2.x中，把所有的过滤器删除了，需要自己来定义，然后使用。过滤器是使用filters这个属性，属性值是一个对象，可以定义多个过滤器。

filters : {
    filter1 : function(){}, 
    filter2 : function(){}
}

示例：

img

　　其中，需要注意的一点，在调用的时候，第一个参数，就是 | 之前的那个数据，是不需要在括号中再指定。也就是说，定义过滤器的第一个参数，必须是调用过滤器时的那个数据。

1.8 事件处理

　　事件的三要素是什么?

  • 事件源
  • 事件类型
  • 事件处理函数（监听器）

　　使用事件的流程是什么？

  • 需要注册（绑定）事件
  • 需要触发事件

　　必须要有上述两个过程，并且他们是分开的。

1.8.1 监听事件

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

语法：

<事件源标签 v-on:事件类型=“事件处理”></事件源标签>

注释：Ø 绑定方式 ：在Vue中，所有的事件，都是直接绑定元素上面的，不需要使用以前的dom0和dom2级的绑定方式。只能作为元素的属性来绑定。

　　Ø 事件类型和原来的dom中的事件类型完全一致，在绑定的时候，直接小写即可，不要加on

　　鼠标事件：click，dblclick，mouseover，mouseout，mouseenter，mouseleave，mousedown，mousemove，mouseup

　　键盘事件：keydown，keypress，keyup

　　ui事件：scroll，resize，load，unload

　　焦点事件：focus，blur

　　表单事件，change，submit，input。

　　Ø 事件处理函数，有两种写法：

　　1）在methods中定义，然后直接引用。

　　2）直接以行内的方式来写 。

示例：

img

1.8.2 传参及事件对象
1.8.2.1 传参

　　事件函数需要传参，那就在执行函数的时候传入实际参数，对函数加（）。

示例：

img

1.9 表单处理

1.9.1 双向数据绑定

　　双向和单向是对应的。单向数据绑定是指数据的变化导致了视图的变化，但是视图的变化不会导致数据的变化；双向数据绑定是指数据的变化会导致视图的变化，而视图的变化也会导致数据的变化。具体如下图：

　　　　　　　　　　　　　　　　单向：数据的变化 ---> 视图的变化

　　　　　　　　　　　　　　　　双向：数据的变化<---->视图的变化

　　单向数据绑定就是 v-text、{{}}、v-html使用最多的。双向数据绑定是 v-model来实现的。但是有大前提，只有表单元素才可以使用v-model。不是任何元素都可以的。

　　常见的表单元素有：input（type可以是text、email、number、url、password、button、radio、checkbox、file、hidden、image）， textarea，select等 。

注意：

　　在使用v-model的时候，必须要确保v-model的值在data中已经定义了。

1.9.1.1 输入框使用v-model

示例：

img

　　其他类型的输入框和多行输入框textarea都是一样的用法。

1.9.1.2 单选按钮使用v-model

示例：

img

1.9.1.3 复选按钮使用v-model

　　提到复选按钮，它有两种用法：

　　1）单个按钮，表示yes和no的关系就像单选题。

　　2）多个按钮，表示多选，那就是多选题比如填写个人爱好的时候。

　　针对上述两种情况，我们在使用的时候，需要选择不同的数据类型。

　　单个使用的时候，表示yes和no的关系。如果绑定的数据不是布尔值，它会自己进行转换，因为对于单个checkbox，v-model期待的值就是一个布尔值。

示例：

img

　　多个复选框使用的时候，表示多选，通常使用数组来表示。

示例：

img

1.9.1.4 下拉列表使用v-model

示例：

img

1.9.2 v-model的修饰符

　　在使用v-model实现双向数据绑定的时候，Vue为v-model提供了一些修饰符。主要有如下：

  • lazy
  • number
  • trim
1.9.2.1 lazy

　　lazy修饰符用于针对文本框的输入。设置了文本框在文本输入的过程中不会进行视图数据的同步，而是在输入完成（通常就是失去焦点）时，才会进行视图---数据的同步。

示例：

img

1.9.2.2 number

　　number修饰符可以将输入的数字字符串，转成数值类型。在web开发中，凡是文本框的输入，它的值只有一种---字符串，永远都是字符串。但是在实际开发中，我们经常需要将字符串转成数值，然后进行下一步处理，这时number就可以为我们节省了后续处理。

示例：

img

1.9.2.3 trim

　　trim 修饰符可以自动过滤用户输入的首尾空格。

示例：

img

1.10 组件

1.10.1 定义组件

所谓组件，其实就是将html标签进行组合，赋予一些逻辑，形成一个具备独立功能的部件。

组件的结构和功能，就是通过属性来实现的。其中，最基本的一个属性就是template，表示这个组件的结构。 

// 定义一个对象，里面有个属性叫template
var Btn = {
    template:"<button>定义一个button组件</button>"
}

　针对长字符串，可以使用多行来表示。（注意：需要使用 `` 右斜号包裹住，每行用 \ 隔开）。

　目前，这个组件，仅仅是一个稍显特殊的对象，就是有一个键值对，键是template，描述了组件的结构。

在实例化vue对象的时候，通过components属性来注册组件。之前我们可以写的选项有：

  1. el
  2. data
  3. methods
  4. computed
  5. filters

　　现在又增加了一个components选项，用来注册组件。components选项的值是一个对象，可以注册多个组件。每一个组件都是一个键值对。其中键，表示组件的名称，值表示组件对象。

// 定义了一个Btn的组件。
var Btn={
    template:"<button>定义一个button组件</button>"
}
// 定义了一个FormBox的组件。
var FormBox={
    template:`<form action=""> \
        <textarea></textarea> \
        </form>`
}
var app = new Vue({
    el:"#app",
    data:{},
    components:{
        box:FormBox,   // 注册了一个formBox组件
        btn:Btn        // 注册了一个btn组件
    }
})
1.10.3 使用组件

　　组件就相当于是自定义元素，组件的使用，和html标签的使用是一模一样的。换言之，html标签如何使用，组件就如何使用。

<!-- 在使用组件的是，当做标签使用即可，这个名称是注册组件时对应的键名，而不是那个健值 -->
<div id="app">
    <box></box>
    <btn></btn>
</div>

定义注册合并

在前面的例子中是将定义和注册分开来写的，但实际上，我们完全可以将定义和注册合二为一，并做一步。

示例：

<div id="app">
    <box></box>
    <btn></btn>
</div>        
var app = new Vue({
    el:"#app",
    data:{},
    components:{
        "btn":{
            template:"<button>定义一个button组件</button>"
        },
        "box":{
            template:`<form action=""> \
                <textarea></textarea> \
                </form>`
         }
    }
})

1.11 组件间通信

1.11.1 父组件向子组件传值（props）

组件接受的选项大部分与Vue实例一样，而选项Props是组件中非常重要的一个选项。要让子组件使用父组件的数据，需要通过子组件的 Props 选项。

// 字符串数组类型
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
// 对象类型
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

使用props传递数据包括静态和动态两种形式。

1.11.2.1 静态props

示例：

　　为了给子组件传递一个课程数据course，我们用一个props选项将课程数据course包含在其prop列表中；然后在父组件中将course数据作为一个自定义特性传递进子组件中。

img

1.11.2.2 动态props

　　在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件。

示例：

img

1.11.2.3 Props验证

　　可以为组件的 Props 指定验证规格。如果传入的数据不符合规格，Vue会在控制台发出警告。这对于其他人使用自己开发的组件时非常有用。注意：要指定验证规格，需要用对象的形式，而不能用字符串数组。

示例：

img

1.11.2 子组件向父组件传值（emit事件传值）

　　子组件到父组件的通信，必须要使用事件机制中的emit方法。需要分成两步：

  1. 在子组件中，需要emit一个事件。
  2. 在父组件中使用子组件时注册事件。

　　父组件注册了事件之后，就可以监听子组件上的事件。一旦有事件触发（emit）了，就能够执行绑定的事件处理函数，其中数据就可以通过参数来传递到父组件。

示例：

img

　　这样父组件就能得到子组件里面的数据了，那么兄弟组件之间呢？ 可以给兄弟组件找一个共同的父组件，然后还是使用props和emit事件来实现。

1.12 生命周期钩子

　　Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是Vue 实例从创建到销毁的过程，就是生命周期。就像人从生到死的过程。

　　在Vue的整个生命周期中，它提供了一些生命周期钩子，给了我们执行自定义逻辑的机会。所谓的生命周期钩子，就是一些函数，为我们提供了一个编写函数的机会，可以在这个函数中编写代码，来完成某些功能。

生命周期钩子 说明
beforeCreate 组件实例刚刚被创建，组件属性计算之前，如data属性
created 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
beforeMount 模板编译/挂载之前
mounted 模板编译/挂载之后
beforeUpdate 组件更新之前
update 组件更新之后
activated 组件被激活时调用
deactivated 组件被移除时调用
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

1.14 Vue-router

1.14.1 基本使用
1.14.2.1 安装

　　第一种：直接下载

　　下载地址：https://unpkg.com/vue-router/dist/vue-router.js

　　在vue.js后面引入vue-router

<script src="js/vue.js"></script>
<script src="js/router.js"></script>

第二种：NPM下载安装

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
1.14.2.2 使用

需求：

　　实现首页、列表页两个组件之间的切换。

效果图：

img img

　　第一步：定义好两个组件。

img

img

　　第二步：使用router-link 组件来导航，通过传入 to 属性指定链接；使用router-view组件设置路由出口，即路由匹配到的组件将渲染在这里（注释：router-link的作用，就好比是a标签）。

注释：此处的路径（例如：“/home”）应和第三步的路由配置中的路径一一对应。

img

　　第三步：配置路由。

注释：每个路由应该映射一个组件。每个路由定义为一个对象，指定路径和组件之间的对应关系，其中路径使用path来表示，组件使用component来表示；多个路由对象组成一个路由数组。

注释：此处的路径（例如：“/home”）应和第二步的路由配置中的路径一一对应。

img

　　第四步：实例化路由对象。

　　可以使用VueRouter构造器来实例化，只要引入了vue-router.js，那么它就提供了一个构造器VueRouter。在实例化的时候，只需要配置一个选项 ---- routes选项。

img

　　第五步：注入路由，让整个应用都有路由功能。

　　将vue-router和vue关联在一起。实际上，vue在实例化的时候，它还有一个选项--- router，它表示路由对象，我们把这个关联的过程，叫做注入路由。

img

1.14.2 动态路由匹配

　　在vue-router中，要实现动态路由，从两个方面出发：

  • 在网址中传入参数，传参的固定格式为： /路径/参数。
  • 如何在代码中接受这个参数。

　　在代码中接收这个参数，需要走两步：

  • 配置路由的格式变化为： 路径/:参数，路径参数需要使用冒号“:”来标记。
  • 当匹配到一个路由时，参数值会被设置到this.$route.params，即可以在每个组件内使用。

示例：

img

1.14.3 嵌套路由

实现多层嵌套组件主要从以下两个层面着手实现

　　a) 视图层面中：在组件中继续使用router-link和router-view。

　　b) 在js代码层：使用children选项来配置子路由。

示例：在上面示例基础上，为列表组件中的产品添加一个详情页面。

　　第一步：重新定义列表组件，使用router-link为列表组件中的产品添加导航路径，以及使用router-view设置二级路由的输出位置。

img

　　第二步：定义详情页面组件。

img

img

　　第三步：在列表组件路由中使用children配置二级路由。

img

注意：以 / 开头的嵌套路径会被当作根路径，配置二级路由时无需设置嵌套的路径，直接使用即可。

效果图：

img

1.14.4 编程式的导航

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

语法：（此方法会向history栈添加记录，即当用户点击浏览器后退按钮时，则会回到之前的URL）

router.push(location)

参数：该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

img

注释：

　　如果提供了 path，则params 会被忽略，取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

img

示例：

img

1.14.5 命名视图

　有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

示例：

　　给router-view添加属性name，并设置值。

img

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

img

1.15 Axios数据交互

Axios是一个基于Promise的HTTP库，可在浏览器和node.js中使用。它的使用方法和Jquery Ajax技术的使用方法大致一致，只有个别参数不同。

1.11.1 安装

　　第一种：使用NPM安装。 

npm install axios

　　第二种：使用cdn引用。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1.11.2 Axios API

可以通过向axios传递相关配置来创建请求。常用的API如下：

API 说明
url 用于请求的服务器 URL
method 创建请求时使用的方法，默认是get。其他请求方法有：request、delete、head、post、put、patch
baseURL 可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL，将自动加在 url 前面，除非 url 是一个绝对 URL
headers 即将被发送的自定义请求头
params 是即将与请求一起发送的 URL 参数，必须是一个无格式对象(plain object)或 URLSearchParams 对象
data 是作为请求主体被发送的数据
responseType 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'。默认为json

1.16 Vue-cli

Vue官方提供了一个vue-cli工具，用于快速构建基于vue+webpack+es6的开发环境。该工具提供开箱即用的构建工具配置，带来现代化的前端开发开发流程。

1.16.1 安装vue-cli

　　a) 步骤1：（安装webpack）

　　使用npm全局安装webpack：

img

　　安装完成之后输入以下命令：

img

　　如果出现相应的版本号，则说明安装成功。

img

　　b) 步骤2：（安装vue-cli）

　　全局安装vue-cli：

img

　　安装完成之后输入以下命令：

img

　　如果出现相应的版本号，则说明安装成功。

img

1.16.2 使用vue-cli快速构建应用

　　a) 步骤1：

　　创建一个文件夹vue_project作为项目文件夹，进入该文件夹输入（其中project为自定义的项目名称）：

img

　　b) 步骤2：

　　配置完成后，可以看到目录下多出了一个项目文件夹project，然后cd进入这个文件夹安装依赖。

img

　　c) 步骤3：

　　此时project文件夹的目录如下：

img

　　d) 步骤4：（启动项目）

img

　　项目启动完成后，返回以下数据表示项目启动成功。img

　　e) 步骤5：（浏览器访问）

　　在浏览器访问http:localhost:8080默认会打开一个欢迎界面。

img

　　f) 步骤6：（打包上线）

　　将自己的项目文件都放到 src 文件夹下。在项目开发完成之后，可以输入 npm run build 来进行打包工作。

1.17 Vuex

1.17.1 什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，vuex就好比是一个数据库，所有数据的增删改查，都是在vuex中来完成的。

  • 在开发项目的时候，vuex是可选的，并不是必须的。
  • 如果项目本身相对较为简单，根本就不需要使用vuex。
  • 如果项目规模较大，比较复杂，建议使用vuex。
1.17.2 Vuex的基本使用
1.17.2.1下载安装

　　下载安装有两种方式：

  • 下载js文件，然后在html文件中以script来引入。
  • 基于vue-cli的安装。
1.17.2.2 直接引入

　　我们先用第一种方式来熟悉vuex，vuex是属于vue的，因此引入vuex之前要先引入vue。

<script src="js/vue.js"></script>
<script src="js/vuex.js"></script>

　　先用vue.js实现以下点击加减的功能。

img

　　在实现这个点击加减功能时，很明显我们需要先考虑：数据是怎么变化的？

  • 数据是谁？就是data中定义的。
  • 如何显示的？使用{{}}语法来显示。
  • 怎么变化的？事件触发时，修改了数据，导致重新渲染。

　　那在vuex中是怎么实现这个功能的呢？首先我们要来了解下vuex中的store。每一个 Vuex 应用的核心就是 store（仓库），store是一个容器，包含着应用中大部分的状态（state）。这里的状态，其实就是和data中代理的数据是一个东西。

　　store有两大特点：

  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  • 不能直接改变store中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。

　　接下来我们先来实例化一个vuex构造器：

img

　　实例化完成一个vuex构造器后，我们将其和vue进行比较。可以发现：

  • state就好比是data。
  • Mutations就好比是methods。但是mutations中的任何方法，第一个参数都是state。

　　有了store对象之后，接下来需要考虑如何获取和修改状态。

  • 获取状态通过store.state。
  • 修改状态通过store.commit（‘修改方法名’）。

　　现在，需要将这个store应用到Vue.js中。

img

1.17.2.3 基于vue-cli运用vuex

前面课程学习了直接引入vuex文件来实现vuex的使用，接下来我们来学习如何基于Vue-cli脚手架运用vuex。

　　第一步：使用Vue-cli创建project项目，安装vuex。

// 在项目目录下利用npm下载vuex包
npm install vuex -save

　　第二步，定义store并导出。

　　在src文件夹下新建一个名叫store的文件夹，并在文件夹下新建store.js文件。因为store.js是基于vue的，所以需要引入vue和vuex。

img

　　 第三步，在根组件main.js中注入store对象。

img

　　 第四步，定义一个组件，使用store。

img

　　 第五步，修改路由。

img

1.17.4 理解核心概念

　　实际上，vuex的核心就是store，用来保存应用（项目）的状态的，状态其实就是数据，通常就是js对象，对于这个数据，我们在应用中，一般都会有两种操作：

  • 获取数据
  • 修改数据

　　针对这两种操作，store中提供了一系列的接口：

  1. state
  2. getters
  3. mutations
  4. actions

state就是根据你项目的需求，自己定义的一个数据结构，里面可以放些通用的状态，这些状态可以在各个页面通过vuex访问。

getter通俗的理解可以认为是getter里的函数就是vuex里的计算属性，类似于computed函数。

mutations官方定义：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷（payload）作为第二个参数（提交荷载在大多数情况下应该是一个对象，提交荷载是可以省略的）。

需要注意：Mutations必须是同步函数。 如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了。

Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。如果我在Vue页面里想用action，我们可以分发 Action，Action 通过 store.dispatch 方法触发：

2.UI框架

2.1 ElementUI框架

2.1.1 安装

官网：https://element.eleme.cn/#/zh-CN

第一种安装（npm）：

npm i element-ui -S

第二种安装（CDN）：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2.1.2 引入
2.1.2.1 全局引入

在 main.js 中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2.1.2.2 按需引入

（1）借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

npm install babel-plugin-component -D

（2）修改 .babelrc文件

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

（3）在main.js种引入部分组件。

以按钮和下拉选择框为例：

import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
2.1.3 使用
2.1.3.1 按钮组件：

示例：

<el-button>按钮</el-button>

按钮组件属性包含如下：

  • type值：primary、success、info、warning、danger、text
  • plain：透明背景
  • round：圆角
  • circle：圆形
  • disabled：禁用
  • size:medium、small、mini、size
2.1.3.2 输入框组件

示例：

<el-input v-model="input" placeholder="请输入内容"></el-input>
<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

常用属性如下：

  • disabled：禁用
  • clearable：可清空
  • show-password：可切换显示隐藏的密码框
  • autosize：文本域的高度能够根据文本内容自动进行调整

注意：其他组件使用方法与以上介绍的两种相同

3.SASS

sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

3.1 安装

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。

window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

img

Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板，如下图所示：

img

（1）通过命令安装Sass

gem install sass

（2）运行sass文件

sass input.scss output.css

3.2 使用变量

sass使用$符号来标识变量

（1）变量声明

$color:#f00;
$height:100px;
nav{
  width:200px;
  height:$height;
  background:$color;
}

编译后：

nav{
   width:200px;
   height:100px;
   background:#f00;
}

sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。

3.3 嵌套CSS规则

sass语法种父选择器的标识符是:\&

css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：

示例如下：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

其中id为content元素是article和aside元素的父级；h1和p元素的父级是article元素。

3.4 混合器

混合器使用@mixin标识符定义，通过@include来使用这个混合器，放在任何地方。

3.4.1 使用

示例如下：

/* 定义混合器 */
@mixin flex-style {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #ccc;
}
/* 使用混合器 */
#content{
    width:100%;
    height:400px;
    margin:auto;
    @include flex-style;
}
3.4.2 传参

当css属性值为多个时，我们可以进行传参设置，示例如下：

/* 定义带有参数的混合器 */
@mixin more-colors($normal,$hover,$visited){
   color:$normal;
   $:hover{
     color:$hover
   }
   $:visited:{
     color:$visited;
   }
}
/* 使用 */
a{
  text-decoration: none;
  font-size: 20px;
  @include more-colors(red,blue,green);
}