小吴在敲Bug
小吴在敲Bug

vue框架快速入门

vue

  • 1、第一个Vue程序
    • 1.1、什么是Vue程序
    • 1.2、为什么要使用MVVM
    • 1.3、Vue
    • 1.4、第一个vue程序
  • 2、基础语法
    • 2.1、v-bind
    • 2.2、v-if， v-else
    • 2.3、v-for
    • 2.4、v-on
  • 3、Vue表单双绑、组件
    • 3.1、什么是双向数据绑定
    • 3.2、在表单中使用双向数据绑定
    • 3.3、什么是组件
  • 4、Axios异步通信
    • 4.1、什么是Axios
    • 4.2、第一个Axios应用程序
  • 5、计算属性、内容分发、自定义事件
    • 5.1、什么是计算属性
    • 5.2、内容分发
    • 5.3、自定义事件
    • 5.4、Vue入门小结
  • 6、第一个vue-cli项目
    • 6.1、什么是vue-cli
    • 6.2、需要的环境
    • 6.3、第一个vue-cli应用程序
  • 7、webpack使用
    • 7.1、什么是Webpack
    • 7.2、模块化的演进
    • 7.3、安装Webpack
    • 7.4使用webpack
  • 8、vue-router路由
    • 8.1、说明
    • 8.2、安装
    • 8.2、测试
  • 9、实战快速上手
    • 9.1、创建工程
    • 9.2、创建登录页面
    • 9.3、路由嵌套
    • 9.4、参数传递
    • 9.5、组件重定向
    • 9.6、路由模式与 404
    • 9.7、路由钩子与异步请求

1、第一个Vue程序

1.1、什么是Vue程序

MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互
    vue框架快速入门_第1张图片
    MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS

1.2、为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

  • 低耦合： 视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
  • 可复用： 你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑
  • 独立开发： 开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计
  • 可测试： 界面素来是比较难以测试的，而现在测试可以针对ViewModel来写
    vue框架快速入门_第2张图片

（1）View

View是视图层， 也就是用户界面。前端主要由HTH L和csS来构建， 为了更方便地展现vi eu to del或者Hodel层的数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。

（2）Model

Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

（3）ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。
  需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的

  • 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
  • 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)

视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
  MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
  View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。

1.3、Vue

Vue(读音/vju/， 类似于view) 是一套用于构建用户界面的渐进式框架， 发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层， 不仅易于上手，还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合

（1）MVVM模式的实现者

  • Model：模型层， 在这里表示JavaScript对象
  • View：视图层， 在这里表示DOM(HTML操作的元素)
  • ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的ViewModel层的实现者

在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者

  • ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新
  • ViewModel能够监听到视图的变化， 并能够通知数据发生改变

至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定

（2）为什么要使用Vue.js

  • 轻量级， 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
  • 移动优先。更适合移动端， 比如移动端的Touch事件
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处， 并拥有自己独特的功能，如：计算属性
  • 开源，社区活跃度高

1.4、第一个vue程序

【说明】IDEA可以安装Vue的插件!
  注意：Vue不支持IE 8及以下版本， 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器

（1）下载地址

  • Vue.js
  • CDN：

（2）代码编写
Vue.js的核心是实现了MVVM模式， 她扮演的角色就是View Model层， 那么所谓的第一个应用程序就是展示她的数据绑定功能，操作流程如下：

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

    </head>
    <body>

        <!--view层-->
        <div id="app">
            {{message}}
        </div>


        <!--1.导入Vue.js-->
        <script src="./static/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                //Model : 数据
                data: {
                    message: "hello,vue"
                }
            });
        </script>

    </body>
</html>
  • 说明：
    1. el : "#vue"：绑定元素的ID
    2. data:{message : "Hello Vue!"}：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！
    3. 只需要在绑定的元素中使用 双花括号 将Vue创建的名为message属性包裹起来， 即可实现数据绑定功能， 也就实现了View Model层所需的效果

2、基础语法

2.1、v-bind

我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新!
  我们还可以使用v-bind来绑定元素特性!

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

    </head>
    <body>

        <!--view层-->
        <div id="app">
            <span v-bind:title="message">
                鼠标悬停几秒查看此处动态绑定提示信息！
            </span>
        </div>


        <!--1.导入Vue.js-->
        <script src="./static/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                //Model : 数据
                data: {
                    message: "页面加载于" + new Date().toLocaleString()
                }
            });
        </script>

    </body>
</html>

你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。

2.2、v-if， v-else

什么是条件判断语句，以下两个属性

  • v-if
  • v-else

使用v-*属性绑定数据是不需要双花括号包裹的

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--view层，模板-->
        <div id="app">
            <h1 v-if="type==='A'">A</h1>
            <h1 v-else-if="type==='B'">B</h1>
            <h1 v-else="type">C</h1>
        </div>

        <!--1.导入Vue.js-->
        <script src="./static/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                /*Model：数据*/
                data: {
                    type: 'A'
                }
            });
        </script>
    </body>
</html>

2.3、v-for

  • v-for
  • items是数组，item是数组元素迭代的别名
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--view层，模板-->
        <div id="app">
            <li v-for="item in items">
                {{item.message}}
            </li>

        </div>

        <!--1.导入Vue.js-->
        <script src="./static/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                /*Model：数据*/
                data:{
                    items:[
                        {message:'Java学不会'},
                        {message:'前端学不会'},
                        {message:'运维学不会'}
                    ]
                }
            });
        </script>
    </body>
</html>

2.4、v-on

  • v-on监听事件
    emsp;事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件， 可以绑定到Vue中的methods中的方法事件!
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

        <div id="app">
            <button v-on:click="sayHi">点我</button>
        </div>

        <script src="./static/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    message:'Hello World'
                },
                methods:{
                    sayHi:function(event){
                        //'this'在方法里面指向当前Vue实例
                        alert(this.message);
                    }
                }
            });
        </script>
    </body>
</html>

3、Vue表单双绑、组件

3.1、什么是双向数据绑定

Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
  值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。

  • 为什么要实现数据的双向绑定:
    在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

3.2、在表单中使用双向数据绑定

你可以用v-model指令在表单、