寅贝勒
寅贝勒

Vue精简知识

Vue基础

Vue快速体验

1. Vue介绍

1.1 Vue是什么

Vue.JS是优秀的前端 JavaScript 框架

react/angular/vue

库和框架的区别:

  • 库(如jQuery)

    库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API

  • 框架

    框架提供了一套完整解决方案,

    使用者要按照框架所规定的某种规范进行开发

1.2 为什么要学习 Vue

传统开发模式: JQuery+RequireJS/SeaJS+artTemplate+Gulp/Grunt

随着项目业务场景的复杂,传统模式已无法满足需求

就出现了Angular/React/Vue等框架

  • 企业需求
  • 主流框架之一(React Angular Vue)
  • 易用、灵活、高效

1.3 Vue 能做什么

  • 最大程度上解放了 DOM 操作
  • 单页web项目(SinglePageApplication项目,例如Worktile官网)开发
  • 传统网站开发

1.4 核心特性

  • 双向数据绑定
    • vue(借鉴了react的虚拟DOM,借鉴了angular双向数据绑定)
  • 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML
  • 解耦视图与数据
  • 可复用组件
  • 虚拟DOM
  • M-V-VM
  • 数据驱动视图

1.5 一些链接

Vue官方文档

Vue开源项目汇总

Vue.js中文社区

2. Vue起步

2.1 安装Vue

  1. 直接下载源码然后通过路径引入

    • 开发版本：https://vuejs.org/js/vue.js
    • 生产版本：https://vuejs.org/js/vue.min.js

  2. CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  1. 使用 npm 下载（默认安装最新稳定版) 然后通过路径引入
npm init -y
npm i vue

Vue.js 不支持 IE8 及其以下版本

2.2 HelloWorld

作用:将数据应用在html页面中

1. body中,设置Vue管理的视图

2. 引入vue.js
3. 实例化Vue对象 new Vue();
4. 设置Vue实例的选项:如el、data...     
	new Vue({选项:值});
5. 在
中通过{{ }}使用data中的数据


<div id="app">
    
    <p>{{list}}p>
div>

<script src="./vue.js">script>
<script>
    new Vue({
        el: '#app',
        data: {
            list: '我是模拟发起ajax请求后从服务端返回的数据'
        }
    })
script>

2.3 Vue实例的选项(重要)

el
  • 作用:当前Vue实例所管理的html视图
  • 值:通常是id选择器(或者是一个 HTMLElement 实例)
  • 不要让el所管理的视图是html或者body!
data
  • Vue 实例的数据对象，是响应式数据(数据驱动视图)
  • 可以通过 vm.$data 访问原始数据对象
  • Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a
  • 视图中绑定的数据必须显式的初始化到 data 中
methods
  • 其值为可以一个对象
  • 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
  • 方法中的 this 自动绑定为 Vue 实例。
  • 注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
代码演示
<div id="a">
    {{msgA}} -- {{fn1()}}
div>

<script src="./vue.js">script>
<script>
    const vm = new Vue({
        // el作用:指定当前Vue实例所管理的视图,值通常是id选择器
        // 1. el的值可以是css选择器,通常是id选择器
        // 2. el的值不能是html标签和body标签

        el: '#a',
        // data作用:指定当前Vue实例的数据对象
        // 1. data中的数据是响应式数据
        // 2. 值可以是一个对象 {属性: 值}
        // 3. 所有数据部分写在data中
        // 4. 在当前Vue实例所管理的视图中通过属性名使用data中的数据
        // 5. 可以通过vm.$data.属性 访问数据
        // 6. 可以通过vm.属性 访问数据(更简单)
        data: {
            msgA: '第一个Vue实例对象'
        },
        // methods作用:指定当前Vue实例中的方法
        // 1. 可以直接通过vm实例访问这些方法，
        // 2. 方法中的 this 自动绑定为 Vue 实例。
        // 3. 不推荐使用箭头函数
        methods: {
            fn1: function() {
                console.log(this.msgA);
                console.log('vm实例中的methods里的fn1方法被调用');
            },
            fn2: function() {
                this.fn1();
                console.log('fn2方法被调用--');
            },
            fn3: () => {
                console.log(this);
            }
        }
    });
    // 调用fn2方法
    vm.fn2();
    // 调用fn3方法
    vm.fn3();
script>

除了以上常用的三个Vue实例选项, 还有很多选项,后续课程会陆续讲解

3. 术语解释

插值表达式

作用:会将绑定的数据实时的显示出来:

通过任何方式修改所绑定的数据,所显示的数据都会被实时替换

{{js表达式、三目运算符、方法调用等}}

不能写 var a = 10; 分支语句 循环语句

    <div id="app">
        
        {{message}}
        <p>{{message}}p>
        <p>{{message+'啦啦啦'}}p>
        <p>{{age>18?'成年':'未成年'}}p>
        <p>{{message.split("")}}p>
        
        <p>{{var a = 10}}p>
    div>
    
    <script src="./vue.js">script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中的message属性的值',
                age: 20
            }
        });
    script>

插值表达式中不能写js语句, 如var a = 10;

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

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

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue框架提供的语法

扩展了HTML的能力

减少DOM操作

  <div id="app">
        <p> {{message}}p>
        
        <button v-on:click="changeMsg">按钮button>
    div>
    
    <script src="./vue.js">script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中的message属性的值',
                age: 20
            },
            methods: {
                changeMsg: function() {
                    this.message += "啦";
                }
            }
        });
    script>

Vue常用指令

扩展了html标签的功能、大部分的指令的值是js的表达式

取代DOM操作

v-text和v-html

很像innerText和innerHTML

  • v-text:更新标签中的内容
    • v-text和插值表达式的区别
      • v-text 更新整个标签中的内容
      • 插值表达式: 更新标签中局部的内容
  • v-html:更新标签中的内容/标签
    • 可以渲染内容中的HTML标签
    • 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
 <div id="app">
        
        <p>{{str}}p>
        <p v-text="str">p>
        <p v-text="str">我是p标签中的内容p>
        <p v-text="strhtml">我是p标签中的内容p>
        <p v-html="str">p>
        
        <p v-html="strhtml">我是p标签中的内容p>
    div>
    <script src="./vue.js">script>
    <script>
        new Vue({
            el: '#app',
            data: {
                str: 'abc',
                strhtml: 'content'
            }
        });
    script>

v-if和v-show

作用:根据表达式的bool值进行判断是否渲染该元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ijd7XEvM-1604136215659)(assets/1536134173441.png)]

 <div id="app">
        
        <p v-if="isShow">我是p标签中的内容p>
        <p v-show="isShow">我是p标签中的内容p>
        
    div>
    <script src="./vue.js">script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        });
    script>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TwW314fQ-1604136215661)(assets\v-if和v-show效果对比.png)]

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；

如果在运行时条件很少改变，则使用 v-if 较好。

v-on

  • 作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。

  • 语法: @事件名.修饰符 = “methods中的方法名”

  • 注意: $event 可以传形参

     <div id="app">
        
        
        <button v-on:click="count += 1">增加 1button>
        
        <button @click="count += 1">增加 1button>
        
        <button @click="add">增加 1button>
        
        <button @click="fn1(count)">执行fn1方法button>
        
        <button @click="fn2($event)">执行fn2方法button>
        <hr>
        
        <button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法button>
        
        <button @click.once="fn4">只执行一次button>

        <p>上面的按钮被点击了 {{ count }} 次。p>
    div>
    <script src="./vue.js">script>
    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0,
                items: ['a', 'b', 'c']
            },
            methods: {
                add: function() {
                    this.count += 1;
                },
                fn1: function(count) {
                    console.log(count);
                    console.log('fn1方法被执行');
                },
                fn2: function(e) {
                    console.log(e);
                    console.log('fn2方法被执行');
                },
                fn3: function(index) {
                    console.log(index);
                    console.log('fn3方法被执行');
                },
                fn4: function() {
                    console.log('fn4方法被执行了');
                }
            }
        });
    script>

  • 修饰符

    • .once - 只触发一次回调。
    • .prevent - 调用 event.preventDefault()。

简写: @事件名.修饰符 = ‘methods中的方法名’

v-for

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-63PZavbW-1604136215664)(assets/1536134987496.png)]

根据一组数组或对象的选项列表进行渲染。

v-for 指令需要使用 item in items 形式的特殊语法，

items 是源数据数组 /对象

当要渲染相似的标签结构时用v-for


<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
    head>

    <body>
        <div id="app">
            
            
            <p v-for="item in list">{{item}}p>
            <hr>
            <p v-for="(item,index) in list">{{item}}----{{index}}p>
            
            <hr>
            
            
            <p v-for="value in per">{{value}}p>
            <hr>
            <p v-for="(value,key) in per">{{value}}----{{key}}p>
            <hr>
            <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}p>

        div>
        <script src="./vue.js">script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    list: ['a', 'b', 'c'],
                    per: {
                        name: '老王',
                        age: 38,
                        gender: '男'
                    }
                },
                methods: {

                }
            })
        script>
    body>

html>

注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)


 <div id="app">

        
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}---{{index}}li>
        ul>
    div>
    <script src="./vue.js">script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: ['a', 'b', 'c']
            },
            methods: {

            }
        });
    script>

v-bind

作用: 可以绑定标签上的任何属性。

绑定src和id属性

  <div id="app">
        
        <img v-bind:src="src" />
        <p v-bind:id="idValue">内容p>
    div>
    <script src="./vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                src: './logo.png',
                idValue: 'b'
            }
        });
    script>

绑定class类名

对象语法和数组语法

对象语法

如果isActive为true，则返回的结果为 

 .active {
            color: red;
 }

 <div id="app">
        <div v-bind:class="{active: isActive}">
            hei
        div>
        <button @click="changeClassName">点击切换类名button>
    div>


  <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true
            },
            methods: {
                changeClassName: function() {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
数组语法

渲染的结果 

<div v-bind:class="[activeClass, dangerClass]">
    hei
div>
  <script src="./vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
        	activeClass: 'active',
            dangerClass: 'text-danger'
        }
    });
script>

绑定style

对象语法和数组语法

对象语法

渲染的结果

 <div id="app">
        <div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
            文本内容
        div>
    div>
    <script src="./vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                redColor: 'red',
                font18: 18
            }
        });
    script>
数组语法
<div v-bind:style="[color, fontSize]">abcdiv>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: {
                color: 'red'
            },
            fontSize: {
                'font-size': '18px'
            }
        }
    });
script>

简化语法

<div v-bind:class="{active: isActive}">
div>

<div :class="{active: isActive}">
div>

v-model

作用: 表单元素的绑定

特点: 双向数据绑定

  • 数据发生变化可以更新到界面
  • 通过界面可以更改数据
  • v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 data选项中声明初始值。

绑定文本框

**效果:**当文本框的值发生变化后，div中的内容也会发生变化

 <div id="app">
        <p>{{message}}p>
        <input type='text' v-model='message'>
        <hr>
        
        <input v-bind:value='message' v-on:input='message = $event.target.value' />

    div>
    <script src="./vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'message默认值'
            }
        });
    script>

绑定多行文本框

 <div id="app">
        <textarea v-model="message">
           我是textarea内的插值表达式 无效 {{str}}
        textarea>
        <div>{{ message }}div>
    div>
    <script src="./vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'message默认值',
                str: 'str字符串'
            }
        });
    script>

**注意：**多行文本框中使用插值表达式 无效

绑定复选框

  • 绑定一个复选框

checked是布尔类型的数据

<input type="checkbox" v-model="checked">
<div>{{ checked }}div>
  • 绑定多个复选框

    此种方式需要input标签提供value属性

    v-model绑定的是数组-

 
	<div id="app">
        <div>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jacklabel>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">Johnlabel>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mikelabel>
            <br>
            <span>Checked names: {{ checkedNames }}span>
        div>
    div>
    <script src="./vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                checkedNames: []
            }
        });
    script>
  • 绑定单选框

    需要input提供value属性的值

    男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
{{sex}}
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            sex: ''
        }
    });
script>
  • 绑定下拉框
    <div id="app">  

        <select v-model="selected">
            <option disabled value="">请选择option>
            <option>北京option>
            <option>上海option>
            <option>深圳option>
        select> <span> 您选择的是: {{selected}}span>
div>
    <script src="./vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                selected: ''
            }
        });
    script>

v-cloak

问题:在使用vue绑定数据的时候，渲染页面有时会出现变量闪烁，例如

<div id="app" v-cloak>
       <p>{{message}}p>
   div>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
   <script>
       var vm = new Vue({
           el: '#app',
           data: {
               message: '我是data中message的数据'
           }
       });
   script>

效果: 在页面加载时,有时会在页面中看到这个:

{{message}}

解决方案: 使用v-cloak

<div id="app" v-cloak>
    <p>{{message}}p>
div>

**注意:**要在css代码部分写如下代码

[v-cloak] {
    display: none;
}

这样:就可以防止也页面闪烁

v-once

**解决的问题:**只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

 <div id="app">
        <p v-once>{{message}}p>
        <input type="text" v-model="message">
    div>
    <script src="./vue.js">script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中message的属性的值'
            }
        });
    script>

当添加v-once的指令所对应的元素, 其数据发生改变时,并不会再一次进行渲染

v-cloak和v-once 不需要表达式, 直接将指令写在开始标签中即可

案例-表格展示

  • 效果演示
  • 功能分析
    • 渲染表格
    • 删除商品
    • 添加商品

渲染表格

目的:动态渲染表格 数据为Vue实例中data里面的属性items:[]

  1. 在data中添加商品信息的数组
  2. v-for渲染列表
  3. 插值表达式渲染数据
<tr v-for="item in items">
                    <td>{{item.id}}td>
                    <td>{{item.name}}td>
                    <td>{{item.date}}td>
                    <td><a href="#">删除a>td>
tr>

 <script src="./vue.js"></script>
    <script>
        // 1. 实例化Vue对象
        // 2. 设置Vue对象的选项
        new Vue({
            el: '#app',
            data: {
                items: [{
                        name: 'LV',
                        date: '2018-8-1'
                    }, {
                        name: 'Lenovo',
                        date: '2018-8-1'
                    }, {
                        name: 'TCL',
                        date: '2018-8-1'
                    }

                ]
            },
            methods: {

            }
        })
    </script>

处理无数据时的渲染

效果: 如果表格中没有数据,展示页面中的"没有品牌数据"

<tr v-if="items.length === 0">
    <td colspan="4">没有品牌数据td>
tr>

删除商品

效果:点击每个表格中的删除按钮, 当前数据从页面中移除

  1. 绑定click事件
  2. 取消默认点击事件
  3. 执行删除deleItem方法
  4. 将点击的a所在的tr的位置进行传递(目的是找到当前点击的tr)
  5. 点击后, 删除当前tr
<td>
    
    <a href="#" @click.	prevent="deleItem(index)">删除a>
td>

methods: {
    deleItem: function(index) {
        console.log(index);
        this.items.splice(index, 1);
        console.log(this.items);
    }
}

添加商品

效果:点击添加按钮,向商品列表中添加商品信息

  1. 绑定click事件
  2. 在data中添加要绑定的属性name
  3. v-model绑定name属性
  4. 点击按钮后,将商品信息添加到items数组中
<div class="add">
    品牌名称:
    <input type="text" v-model="name">
    <input type="button" value="添加" @click="addItem">
div>

data: {
    name: ''
},
    methods: {
        addItem: function() {
            console.log('添加按钮被点击');
            const item = {
                name: this.name,
                date: new Date()
            };
            this.items.unshift(item)
        }
    }

细节处理

  1. 删除提示框
deleItem: function(index) {
    // console.log(index);
    if (confirm('是否删除')) {
        this.items.splice(index, 1);
    }
    // console.log(this.items);
}
  1. 添加的数据为空时的处理

如果文本框为空, 提示输入内容

如果文本框不为空,直接添加

if (this.name.length === 0) {
    alert('请输入商品信息');
    return;
}
this.items.unshift(item);

当商品信息为空时,禁用添加按钮

<div class="add">
    品牌名称:
    <input type="text" v-model="name">
    <input :disabled="name.length === 0" type="button" value="添加" @click="addItem">
div>

添加数据成功后,清空文本输入框

addItem: function() {
    console.log('添加按钮被点击');
    const item = {
        name: this.name,
        date: new Date()
    };
    if (this
        .name.length === 0) {
        alert('请输入商品信息');
        return;
    }
    this.items.unshift(item);
    // 添加完毕 清空文本框
    this.name = '';
}

Vue其他知识点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FM92cdUL-1604136215669)(./assets/1536239741647.png)]

过滤器

  • 作用:处理数据格式
  • 使用位置:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
  • 分类:局部注册和全局注册

1. 局部注册

  1. 在vm对象的选项中配置过滤器filters:{}
  2. 过滤器的名字: (要过滤的数据)=>{return 过滤的结果}
  3. 在视图中使用过滤器: {{被过滤的数据 | 过滤器的名字}}
<div id="app">
    
    <p>{{ msg | upper | abc }}p>
div>
<script src="./vue.js">script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'kfc'
        },
        // 1. 设置vm的过滤器filters选项
        filters: {
            upper: function(v) {
                // 2. 在过滤器的方法中操作数据并返回结果
                return v.toUpperCase();
            }
        }
    });
script>

注意: 局部注册的过滤器只适用于当前vm对象

2. 全局注册

  1. 在创建 Vue 实例之前定义全局过滤器Vue.filter()
  2. Vue.filter(‘该过滤器的名字’,(要过滤的数据)=>{return 对数据的处理结果});
  3. 在视图中通过{{数据 | 过滤器的名字}}或者v-bind使用过滤器
<div id="app">
    
    <p>{{msg | toUpper}}p>
div>
<script src="./vue.js">script>
<script>
    // 1. 定义全局过滤器
    Vue.filter('toUpper', (value) => {
        console.log(value);
        // 2. 操作数据并返回
        value = value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
        console.log(value);
        return value;
    });

    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        methods: {

        }
    });
script>

注意: 全局注册的过滤器, 不同的vm对象都可以使用

  1. 过滤器是可以串联使用的, 比如 {{msg | upper1 | upper2}}
  2. 过滤器是可以传参数的,比如{{msg | upper1(自己传的参数)}}

ref操作DOM

  • 解决的问题: 在vue中操作DOM元素
  • 使用步骤:
    1. 给DOM元素设置ref属性的值
    2. 在Vue中的mounted选项下通过this.$refs.属性 获取到要操作的DOM
<div id="app">
    
    <input type="text" ref="txt">
div>
<script src="./vue.js">script>
<script>
    new Vue({
        el: '#app',
        // mounted当页面加载完毕执行
        mounted() {
            console.log(this.$refs.txt);
            // 2. 用this.$refs.属性 去操作DOM
            this.$refs.txt.focus();
        },
    });
script>

自定义指令

  • 使用场景:需要对普通 DOM 元素进行操作，这时候就会用到自定义指令
  • 分类:全局注册和局部注册

1. 局部注册

  1. 在vm对象的选项中设置自定义指令 directives:{}
  2. directives:{‘指令的核心名称’:{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } }}
  3. 在视图中通过标签去使用指令
<div id="app">
    
    <input v-focus type="text">
div>

<script src="./vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        // 1. 在vm对象的选项中设置自定义指令 directives:{}

        directives: {
            // 2. directives:{'指令的核心名称':{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } }}
            focus: {
                // 指令的定义
                inserted: function(el) {
                    el.focus();
                }
            }
        }
    });
script>

2. 全局注册

1. 在创建 Vue 实例之前定义全局自定义指令Vue.directive()
2. Vue.directive('指令的名称',{ inserted: (使用指令的DOM对象) => { 具体的DOM操作 } } );
3. 在视图中通过"v-自定义指令名"去使用指令

<div id="app">
    
    <input v-focus type="text">

div>
<script src="./vue.js">script>
<script>
    // 全局自定义指令
    // 1.在创建 Vue 实例之前定义全局自定义指令Vue.directive()
    // 2. Vue.directive('指令的核心名称',{ inserted: (使用指令时的DOM对象) => { 具体的DOM操作 } } );
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时,inserted会被调用
        inserted: (el) => {
            // el 就是指令所在的DOM对象
            el.focus();
        }
    });

    var vm = new Vue({
        el: '#app'
    });
script>

Vue.directive(自定义指令名) 不需要加v- 使用自定义指令时需要加v-

inserted: 当被绑定的元素插入到 DOM 中时,会被调用

计算属性

  • 计算属性:是Vue实例的一个选项 computed:{}
  • 作用:在计算属性中去处理data里的数据
  • 使用场景:任何复杂逻辑，都应当使用计算属性
  • 本质: 计算属性的其实就是一个属性,用法和data中的属性一样,但计算属性的值是一个带有返回值的方法
<div id="app">
    <p>{{a}}p>
    <p>{{b}}p>
    

    
    
    <p>{{comC}}p>
    <p>{{comC}}p>
    <p>{{comC}}p>

div>
<script src="./vue.js">script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            a: 0,
            b: 0,
            c: 0
        },
        // 计算属性
        /*
             * 计算属性是Vue实例的一个选项
             * 计算属性的值是一个对象
             * 计算属性也是属性,只不过值是带有返回值的函数
             * 当data中的属性一发生变化, 会自动调用计算属性的方法
             */
        computed: {
            comC: function() {
                return this.a + this.b
            }
        }
    });
script>

computed和methods

  • computed:
    • 一旦data中的数据发生变化,就会触发计算属性的方法
    • 会将data中属性的结果进行缓存,对比缓存中的结果是否发生变化
  • methods: 一调用就会触发, 和数据的变化与否无关
<div id="app">
    <p>{{fn()}}p>
    <p>{{fn()}}p>
    <p>{{fn()}}p>
    <hr>
    <p>{{comFn}}p>
    <p>{{comFn}}p>
    <p>{{comFn}}p>

div>
<script src="./vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'abc'
        },
        methods: {
            fn() {
                // 返回一个值
                console.log('fn');
                return new Date();
            }
        },
        computed: {
            comFn() {
                // 计算属性，如果data中的数据变化，会重新执行，
                console.log('计算属性');
                return new Date();
            }
        }
    });
script>

相关工具

JSON-server

说明: 可以快速把一个json文件托管成一个 web 服务器(提供接口)

**特点:**基于Express，支持CORS和JSONP跨域请求，支持GET, POST, PUT和 DELETE 方法

使用:

// 1 安装json-server工具(只安装一次即可)
npm i -g json-server
// 2 启动
// 创建一个目录server,在该目录下创建一个json文件，db.json
// 在server目录下执行
json-server --watch db.json

验证:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaqTp2Pg-1604136215675)(./assets/1533793182715.png)]

在浏览器地址栏中输入 http://localhost:3000 发起请求、观察cmd中的变化、观察浏览器中返回的json数据

注意: 直接使用课程包中的db.json文件

也可以改变端口 --port

RESTful:接口规则

1. 说明

  • RESTful是一套接口设计规范
  • 用不同的请求类型发送同样一个请求标识 所对应的处理是不同的
  • 通过Http请求的不同类型(POST/DELETE/PUT/GET)来判断是什么业务操作(CRUD )
  • json-server应用了RESTful规范

2. HTTP方法规则举例

HTTP方法 数据处理 说明
POST Create 新增一个没有id的资源
GET Read 取得一个资源
PUT Update 更新一个资源。或新增一个含 id 资源(如果 id 不存在)
DELETE Delete 删除一个资源

通过标准HTTP方法对资源CRUD：

POST：创建单个资源 (资源数据在请求体中)

POST /brands

GET：查询

GET /brands // 获取所有商品信息
GET /brands/1 // 获取id为1的商品信息

PUT：更新单个资源，客户端提供完整的更新后的资源

PUT /brands/1 // 更新id为1的商品信息

DELETE：删除

DELETE /brands/1  //删除id为1的商品

Postman:接口测试工具

  • 说明:Postman是一款功能强大的网页调试与发送网页HTTP请求的测试工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3TBMmaCd-1604136215677)(./assets/1533797985495.png)]

Vue中的网络请求

在Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。

  1. vue-resource: Vue.js的插件，已经不维护，不推荐使用
  2. axios :不是vue的插件，可以在任何地方使用，推荐

说明: 既可以在浏览器端又可以在node.js中使用的发送http请求的库，支持Promise，不支持jsonp

如果遇到jsonp请求, 可以使用插件 jsonp 实现

  • 发送get请求

    axios.get('http://localhost:3000/brands')
    .then(res => {
    console.log(res.data);
})
    .catch(err => {
    console.dir(err)
});

  • 发送delete请求

    axios.delete('http://localhost:3000/brands/109')
    .then(res => {
    console.log(res.data);
})
    .catch(err => {
    console.dir(err)
});

  • 发送post请求

    axios.post('http://localhost:3000/brands', {name: '小米', date: new Date()})
    .then(res => {
    console.log(res);
})
    .catch(err => {
    console.dir(err)
});

  • jsonp (如果是jsonp请求, 可以使用jsonp 包)

    • 安装jsonp 包 npm i jsonp
    jsonp('http://localhost:3000/brands', (err, data) => {
    if (err) {
        console.dir(err.msg);
    } else {
        console.dir(data);
    }
});

案例-表格展示

  • 效果演示
  • 功能分析
    • 日期格式处理
    • 搜索商品功能
    • 输入框自动聚焦

日期格式处理

说明:表格中的日期格式需要处理, 这里使用moment包

分析:把日期数据进行格式处理,将处理后的日期渲染到页面中->过滤器

  1. 安装/引入moment包
  2. 全局注册过滤器
  3. 在过滤器的方法中,使用moment包对data中的日期进行处理
  4. 在视图中渲染日期的位置使用过滤器
<div id="app">
    
    
    <td>{{ item.date | fmtDate('YYYY-MM-DD HH:mm:ss') }}td>

    
div>


<script src="./moment.js">script>
<script>
    // 2 定义全局过滤器
    Vue.filter('fmtDate', (v, fmtString) => {
        // 3 在过滤器的方法中,使用moment包对data中的日期进行处理
        return moment(v).format(fmtString);
    });

    var vm = new Vue({
        // ...
    });
script>

搜索商品功能

说明: 在搜索输入框中输入商品名称时, 在商品列表中显示对应的商品

分析: 要渲染的视图会根据搜索内容的变化而变化-> 计算属性

  1. 在data中定义属性 searchValue
  2. 在搜索输入框中 v-model绑定searchValue
  3. 添加计算属性:根据搜索的内容 返回搜索的结果数组
  4. 将页面中遍历items数组替换为计算属性返回的数组
<div id="app">
    
    <div class="add">
        
        品牌名称:
        <input type="text" v-model="searchValue" placeholder="请输入搜索条件">
    div>
    
    
    <tr v-for="(item,index) in newItems">
        
    <tr v-if="newItems.length===0">
        <td colspan="4">没有品牌数据td>
    tr>
div>
<script>
    // 省略
    new Vue({
        el: '#app',
        data: {
            // 省略
            // 1. 在data中定义属性 searchValue
            searchValue: ''
        },
        // 计算属性
        computed: {
            newItems() {
                // 3. 根据搜索的内容 返回搜索的结果数组
                // filter返回满足条件的数组
                return this.items.filter((item) => {
                    // item表是数组中的每个元素
                    // 筛选item (判断item中的name的值是否以searchValue开头)
                    return item.name.startsWith(this.searchValue);
                });
            }
        },
        // 省略
    });
script>

输入框自动聚焦

说明:进入页面时,添加商品的输入框自动获取焦点,等待用户输入

  1. 全局自定义指令
  2. 获取要操作的input,进行DOM操作
  3. 在页面中使用自定义指令
<div class="add">
    品牌名称:
    
    <input v-focus type="text" v-model="name">
    <input :disabled="name.length===0" @click="addItem(name)" type="button" value="添加">
div>


<script>

    // 1 定义全局自定义指令-自动聚焦
    Vue.directive('focus', {
        // 2 当被绑定的元素插入到 DOM 中时,inserted会被调用
        inserted: (el) => {
            // el 就是指令所在的DOM对象
            el.focus();
        }
    });
script>

在案例中使用axios

说明: 使用axios请求server/db.json中的数据

渲染列表

  1. 启动json-server
  2. 安装并导入axios
  3. 将items数组清空
  4. 在mounted方法中发送网络请求
  5. 使用返回的数据

<script src="./axios.js">script>
<script>
    new Vue({
        el: '#app',
        data: {
            items: [],
            name: '',
            searchValue: ''
        },
        // 当页面加载完毕之后执行
        mounted() {
            // 加载列表数据
            this.loadData();
        },
        methods: {
            // 加载列表数据
            loadData() {
                // 加载数据
                axios
                    .get('http://localhost:3000/brands')
                    .then((res) => {
                    this.items = res.data;
                })
                    .catch((err) => {
                    console.log(err);
                });
            },
            // 省略代码
script>

添加数据

说明:点击添加按钮时,发送post请求向db.json中增加商品数据

将addItem中的代码进行改写

addItem: function(name) {
    axios
        .post('http://localhost:3000/brands', {
        name: this.name,
        date: new Date()
    })
        .then((res) => {
        // 判断响应码  201  created
        if (res.status === 201) {
            // 添加成功 重新加载列表
            this.loadData();
        } else {
            alert('添加失败');
        }
    })
        .catch((err) => {
        console.log(err);
    })
}

删除数据

说明:点击删除按钮时,发送DELETE请求从db.json中删除商品数据

将deleItem中的代码进行改写

deleItem: function(id) {
    // 删除提示
    if (!confirm('是否确认删除？')) {
        return;
    }
    axios
        .delete('http://127.0.0.1:3000/brands/' + id)
        .then((res) => {
        if (res.status === 200) {
            // 删除成功
            this.loadData();
        } else {
            alert('删除失败');
        }
    })
        .catch((err) => {
        console.log(err);
    })
},

搜索商品

说明: 根据搜索框中的文本信息 动态发送请求获取数据

用到了watch选项: 当属性值发生变化 就执行响应的代码

// 侦听器
watch: {
    // 监听的是data中的属性searchValue
    searchValue(nValue, oValue) {
        // console.log(newValue, oldValue);
        // 发送异步请求
        axios
            .get('http://127.0.0.1:3000/brands?name=' + nValue)
            .then((res) => {
            this.items = res.data;
        });
    }
}

组件基础

什么是组件

**需求:**如果页面中有多个一样结构的控件,比如

<div id="app">
    
        <span>{{count1}}span> <button @click="changeCount1">按钮button> <br>
        <span>{{count2}}span> <button @click="changeCount2">按钮button> <br>
        <span>{{count3}}span> <button @click="changeCount3">按钮button> <br>
        <span>{{count4}}span> <button @click="changeCount4">按钮button> <br>
        <span>{{count5}}span> <button @click="changeCount5">按钮button> <br>
div>
<script src="./vue.js">script>
<script>
    new Vue({
        el: '#app',
        data: {
            count1: 0,
            count2: 0,
            count3: 0,
            count4: 0,
            count5: 0
        },
        methods: {
            changeCount1() {
                this.count1++;
            },
            changeCount2() {
                this.count2++;
            },
            changeCount3() {
                this.count3++;
            },
            changeCount4() {
                this.count4++;
            },
            changeCount5() {
                this.count5++;
            }
        }
    });
script>

问题:

  1. 代码重复 冗余
  2. 不利于维护

解决方案: 使用Vue中一个十分重要的特性-组件

体验组件的使用

<div id="app">
    
    <span-btn>span-btn>
    <span-btn>span-btn>
    <span-btn>span-btn>
    <span-btn>span-btn>
div>
<script src="./vue.js">script>
<script>
    // 注册全局组件
    Vue.component('span-btn', {
        template: `


{{count}} 

    

`,
        data() {
            return {
                count: 0
            }
        },
        methods: {
            changeCount() {
                this.count++;
            }
        }
    });

    new Vue({
        el: '#app'
    });
script>

什么是组件:

组件系统是 Vue 的另一个重要概念，允许我们使用小型、独立和通常可复用的组件构建大型应用。

仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kkPb3Sou-1604136215679)(./assets/1533888610958.png)]

  • 组件是可复用的 Vue 实例，且带有一个名字
  • 组件的选项:
    • 组件与 new Vue 接收相同的选项:例如 data、computed、watch、methods 以及生命周期钩子等。
    • 仅有的例外是像 el 这样根实例特有的选项
  • 另外, 组件也有自己的选项 template components等

组件的特点

  • 组件是一种封装
  • 组件能够让我们复用已有的html、css、js
  • 可复用
  • 是一个特殊的Vue实例
  • 可以任意次数的复用
  • 每用一次组件，就会有一个它的新实例被创建
  • 组件中的data要求必须是一个函数,且需要返回一个对象
    • 组件有自己的作用域
  • template 每个组件模板有且只有一个根元素

建议: 在实际开发中,尽可能使用各种第三方组件

组件的分类和使用

  • **分类:**全局注册和局部注册
  • **使用(步骤)*1. 注册组件 2. 通过组件名字使用组件

全局注册

  1. 使用Vue.component(组件名,组件选项) 进行注册

    组件名:推荐小写加减号的命名方式

  2. 用在其被注册之后的任何 (通过 new Vue) 新创建的 (一个或者多个)Vue 实例

      Vue.component('组件名', {
            // 组件选项: data methods template等(没有el)
            // data 的值是一个函数, 需要返回一个对象
      });

<div id="app">
    
    <span-btn>span-btn>
    <span-btn>span-btn>
    <span-btn>span-btn>
    <span-btn>span-btn>
div>
<hr>
<div id="app1">
    <span-btn>span-btn>
    <My-Component>My-Component>
div>
<hr>
<div id="app2">
    <span-btn>span-btn>

div>
<hr>
<div id="app3">
    <span-btn>span-btn>
div>
<script src="./vue.js">script>
<script>
    // 1. 注册组件
    // Vue.component('组件名', {
    //     // 组件选项: data methods template等
    // });
    Vue.component('span-btn', {
        // template: 页面字符串,有且仅有一个根元素
        template: `


{{count}} 

    

`,
        data() {
            return {
                count: 0
            }
        },
        methods: {
            changeCount() {
                this.count++;
            }
        }
    });

    Vue.component('myComponent', {
        template: `



{{num}}
 

    

`,
        style: './style.css',
        data() {
            return {
                num: 0
            }
        },
        methods: {
            changeTitle() {
                this.num++;
            }
        }
    });

    new Vue({
        el: '#app'
    });

    new Vue({
        el: '#app1'
    });
    new Vue({
        el: '#app2'
    });
    new Vue({
        el: '#app3'
    });
script>

注意:

  1. 全局组件必须写在Vue实例创建之前，才在该根元素下面生效
  2. 在不同的Vue实例中可以使用多个不同的全局组件
  3. 每个组件有自己的作用域

局部注册

  • 直接在Vue实例里面通过 components选项进行注册
  • 对于 components 对象中的每个属性来说，
    • 其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
    head>

    <body>
        <div id="app">
            
            <com-A>com-A>
            <com-B>com-B>
            <com-C>com-C>
        div>
        <script src="./vue.js">script>
        <script>
            // 局部组件的选项
            const comA = {
                template: `
{{titleA}}
`,
                data() {
                    return {
                        titleA: 'comA中的data里的titleA'
                    }
                }
            };
            const comB = {
                template: `
{{titleB}}
`,
                data() {
                    return {
                        titleB: 'comB中的data里的titleB'
                    }
                }
            };

            const comC = {
                template: `
{{titleC}}
`,
                data() {
                    return {
                        titleC: 'comC中的data里的titleC'
                    }
                }
            };

            new Vue({
                el: '#app',
                // 1. 在Vue实例中设置components选项{组件名:组件选项}
                components: {
                    // 在页面中的组件名:组件选项
                    'comA': comA,
                    'comB': comB,
                    'comC': comC
                }
            });
        script>
    body>

html>

组件嵌套

我们可以在new Vue()实例中使用自定义组件,

也可以在注册自定义组件时,嵌套另一个自定义组件,也就是父子组件的关系

父子组件-写法一

<div id="app">
    
    <parent-Com>parent-Com>
div>
<script src="./vue.js">script>
<script>
    // 1. 注册全局组件
    Vue.component('childCom', {
        template: `



childCom全局组件

    

`
    });

    Vue.component('parentCom', {
        // 在parentCom中嵌入childCom组件
        // parentCom和childCom属于父子组件
        // 父组件是parentCom
        // 子组件是childCom
        template: `



parentCom全局组件


    

`
    });

    new Vue({
        el: '#app'
    });
script>

父子组件-写法二

<div id="app">
    
    <parent-Com>parent-Com>
div>
<script src="./vue.js">script>
<script>
    // 1. 局部组件的选项
    const childCom = {
        template: `



childCom局部组件

    

`
    };

    // 在parentCom组件选项中 使用components选项设置其子组件
    // 在template中使用该子组件
    const parentCom = {
        template: `



parentCom局部组件


    

`,
        components: {
            'childCom': childCom
        }
    };

    new Vue({
        el: '#app',
        components: {
            'parentCom': parentCom
        }
    });
script>

组件通信

父->子(在子组件中使用父组件数据) props : 不可修改 单向数据传递

子->父(在父组件中使用子组件数据) 自定义事件!

兄弟组件

组件让我们提高了代码的复用性,接下来考虑如何在不同的组件中进行传值

比如: 父组件有items数组 在子组件中使用父组件中的items数组去渲染列表

父子组件通信

目的: 要在子组件中使用父组件中data中的属性值

关键点:通过Props给子组件传值

步骤:

  1. 在子组件中通过props声明自定义属性title
  2. 注册局部组件
  3. 使用子组件时,设置props选项, 通过自定义属性获取父组件的值
<div id="app">
    
    <component-a :title="msg" :lists="items">component-a>
div>

<script src="./vue.js">script>
<script>
    var ComponentA = {
        // 1. 在子组件中通过props声明自定义属性title
        template: `


{{ title }}


    

  • 
{{item.name}}
    
    • 
    
 
    
`,
        // 用来接收外部传过来的数据
        // 值的传递是单向的，内部不要修改props里变量的值
        props: ['title', 'lists']
    };

    new Vue({
        el: '#app',
        // 目的: 要在子组件中使用父组件的msg的值
        data: {
            msg: 'hello heima',
            items: [{
                'id': 1,
                'name': '小狗'
            }, {
                'id': 2,
                'name': '小猫'
            }, {
                'id': 3,
                'name': '小羊'
            }

                   ]
        },
        // 2. 注册局部组件
        components: {
            'component-a': ComponentA
        }
    });
script>

父子组件的传值有多种方法, 兄弟组件的通信也有自己的写法

避免混淆,这里我们先只讲父子组件通信的一种写法

会在后续的案例中会进行讲解

组件和模块

  • 模块：侧重于功能或者数据的封装
  • 组件：包含了 template、style 和 script，而它的 script 可以由各种模块组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h2WZIRFZ-1604136215682)(C:/Users/liu99/Desktop/temp/vue7%E5%A4%A9/01-vue/%E7%AC%94%E8%AE%B0/media/b25efd3e8af188b5ab36ccb66baddd71_hd.jpg)]

钩子函数

生命周期是指Vue实例或者组件从诞生到消亡经历的每一个阶段，在这些阶段的前后可以设置一些函数当做事件来调用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvTrqy7x-1604136215706)(assets/lifecycle.png)]

<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red","message: " + this.message) 
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);   
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message)
    }
  })
</script>
</html>

前端路由

什么是单页应用

单页应用(single page web application，SPA)，是在一个页面完成所有的业务功能，浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面完成，这一切都由JavaScript来控制。

单页应用优缺点

  • 优点
    • 操作体验流畅
    • 完全的前端组件化
  • 缺点
    • 首次加载大量资源(可以只加载所需部分)
    • 对搜索引擎SEO不友好 -> 服务端渲染
    • 开发难度相对较高

单页应用的实现原理

前后端分离(后端专注于数据、前端专注于交互和可视化)+前端路由

  • Hash路由

    • 利用URL上的hash，当hash改变不会引起页面刷新，所以可以利用 hash 值来做单页面应用的路由，

      并且当 url 的 hash 发生变化的时候，可以触发相应 hashchange 回调函数。

    • 模拟实现:

    <a href="#/">首页</a>
<a href="#/users">用户管理</a>
<a href="#/rights">权限管理</a>
<a href="#/goods">商品管理</a>
<div id="box">
    </div>
<script>
    var box = document.getElementById('box');
window.onhashchange = function() {
    // #/users
    var hash = location.hash;
    hash = hash.replace('#', '');
    switch (hash) {
        case '/':
            box.innerHTML = '这是首页';
            break;
        case '/users':
            box.innerHTML = '这是用户管理';
            break;
        case '/rights':
            box.innerHTML = '这是权限管理';
            break;
    }
};
</script>

  • History路由

    • History 路由是基于 HTML5 规范，在 HTML5 规范中提供了 history.pushState || history.replaceState 来进行路由控制

vue-router

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

实现根据不同的请求地址 而显示不同的组件

快速体验

  1. 导入vue和vue-router

  2. 设置HTML中的内容

    
<router-link to="/users">用户管理router-link>


<router-view>router-view>

  3. 创建组件

    // 创建组件
// 组件也可以放到单独的js文件中
var Home = {
    template: '
    这是Home内容
    '    
};
var Users = {
    template: '
    这是用户管理内容
    '    
};

  4. 配置路由规则

    // 配置路由规则
var router = new VueRouter({
    routes: [
        { name: 'home', path: '/', component: Home },
        { name: 'users', path: '/users', component: Users }
    ]
});

  5. 设置vue的路由选项

    var vm = new Vue({
    el: '#app',
    router
});

动态路由

场景: 不同的path对应同一个组件

注意: 变化的路由 改成 :参数

此时可以通过路由传参来实现，具体步骤如下：

  1. 路由规则中增加参数，在path最后增加 :id

    { name: 'users', path: '/users/:id', component: Users },

  2. 通过 传参，在路径上传入具体的值

    <router-link to="/users/120">用户管理router-link>

  3. 在组件内部可以使用，this.$route 获取当前路由对象

    var Users = {
    template: '
    这是用户管理内容 {{ $route.params.id }}
    '    ,
    mounted() {
        console.log(this.$route.params.id);
    }
};

路由嵌套

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zuKAtfym-1604136215708)(./assets/1536283239126.png)]

如果存在组件嵌套,就需要提供多个视图容器

同时,router-link和router-view 都可以添加类名、设定样式

<div id="app">
    
    <nav>
        <router-link to="/top">热点router-link>
        <router-link to="/tech">教育router-link>
        <router-link to="/soc">社会router-link>
        <router-link to="/mus">音乐router-link>
        <router-link to="/te">体育router-link>
    nav>

    
    <router-view class="box">
    router-view>
div>

<script src="./vue.js">script>
<script src="./vue-router.js">script>
<script>
    // 组件:

    // 热点
    var Top = {
        template: '
Top
'
    };

    // 体育:带参数的二级路由
    var Te = {
        template: `



    

  • 篮球
    • 

  • 足球
    • 

  • 好多球
    • 
    


    

`
    };

    // 教育:使用了data
    var Tech = {
        data: function() {
            return {
                name: "luck",
                age: 10,
                fn: function() {
                    alert(1);
                }
            }
        },
        template: `



{{name}}


{{age}}

    

`
    }

    // 社会
    var Soc = {
        template: '
soc
'
    };


    // 音乐:不带参数的二级路由
    var Mus = {
        // template: '
mus
'
        template: `



    

  • 流行
    • 

  • 古典
    • 

  • 摇滚
    • 
    


    

`
    };

    // 音乐:二级路由的视图
    var Pop = {
        template: '
mus下的pop模块
'
    };

    // 体育:二级路由的视图
    var Ball = {
        //路由参数 $route.params
        template: "
{{$route.params}}
"
    };

    // 配置路由
    var routes = [
        // 热点
        {
            path: '/top',
            component: Top
        },
        // 教育
        {
            path: '/tech',
            component: Tech
        },
        // 社会
        {
            path: '/soc',
            component: Soc
        }, {
            path: '/mus',
            component: Mus,
            //子路由配置
            children: [{
                path: 'pop',
                component: Pop,
            }]
        },
        // 体育
        {
            path: '/te',
            component: Te,
            children: [{ // /te/形参/10
                path: ':cate/10',
                component: Ball
            }]
        },

        //重定向:默认或者404界面 
        {
            path: '*',
            redirect: '/top'
        }
    ];

    // 实例化路由
    var router = new VueRouter({
        // routes : routes
        routes
    });

    // 实例化vue
    var vue = new Vue({
        el: '#app',
        // router : router
        router
    });
script>

过渡和动画

基本用法就是给我们需要动画的标签外面嵌套transition标签 ,并且设置name属性

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

  • 在 CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库，如 Animate.css

在 CSS 过渡和动画中自动应用 class

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

// v要替换成transition组件的name属性值
v-enter：定义进入过渡的开始状态。
v-enter-active：定义进入过渡生效时的状态。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。
v-leave: 定义离开过渡的开始状态。
v-leave-active：定义离开过渡生效时的状态。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。

示例：

<style>
    .box {
        position: absolute;
        left: 0;
        top: 50px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .slide-enter, .slide-leave-to {
        left: 200px;
        opacity: 0;
    }
    .slide-enter-active, .slide-leave-active {
        transition: all 2s;
    }
    .slide-enter-to, .slide-leave {
        left: 0px;
        opacity: 1;
    }
style>
<button @click="isShow = !isShow">显示/隐藏button>

<transition name="slide"> 
    <div v-show="isShow" class="box">div>
transition>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    });
script>

自定义过渡动画的类名

可以通过transition组件自定义过渡动画的类名，可以方便结合第三方的动画库使用，比如：animate.css

// transition组件的属性 
enter-class
    enter-active-class
        enter-to-class (2.1.8+)
leave-class
    leave-active-class
        leave-to-class (2.1.8+)

示例：

<button @click="isShow = !isShow">togglebutton>
<transition 
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut">
    <div v-show="isShow">hellodiv>
transition>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    });
script>

vue-cli(脚手架)

为什么要用vue-cli

可以快速创建vue项目结构,而不需要我们一点点的去创建/管理项目所需要的各种文件夹/文件

什么是vue-cli

vue-cli是npm包

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。

使用vue-cli

# 安装 Vue CLI 脚手架
# 如果已经安装过则不需要
# 这里安装的是最新版本 3版本
npm install -g @vue/cli

# 执行vue --verson查看是否安装成功，
# 显示vue的版本，就是安装成功了
vue -V

# 如果仍然要使用vue-cli 2版本的指令 需要安装一个桥接工具
npm install -g @vue/cli-init

# 使用脚手架工具初始化你的项目
# webpack-simple是一种工程模板
vue init webpack-simple 项目名称

# 进入你初始化好的项目
cd 项目路径

# 安装项目模板所需要的依赖
npm i

# 启动开发模式
# 或者 npm start
npm run dev

运行npm run dev后,会在浏览器中看到如下效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XnZMSoXN-1604136215711)(./assets/1534009067048.png)]

项目目录说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-McBgHMFN-1604136215713)(./assets/1534009729744.png)]

  • node_modules 项目依赖包
  • src 项目核心文件(项目核心代码都放在这个文件夹下)!!!
    • assets 静态资源(样式类文件,如css、less、sass以及外部的js文件)
    • App.vue 根组件,所有页面都是在App.vue下进行切换的
      • 也可以理解为所有的路由也是App.vue的子组件
    • main.js 入口文件:主要作用是初始化vue实例并使用需要的插件。
  • .babelrc babel配置参数
  • .editorconfig 代码格式
  • .gitignore git忽略文件
  • index.html 项目的首页
  • package-lock.json
  • package.json
  • README.md 项目说明
  • webpack.config.js webpack配置文件

注意:

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

我们关心的重点是src中的文件夹

单文件组件

说明:

  1. *.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。
  2. 每个.vue文件包含三种类型的顶级语言块 ,

template 部分

  • 代表它的 html 结构
  • 必须在里面放置一个 html 标签来包裹所有的代码
  • 我们在其他地方写好了一个组件，然后就可以在当前template中引入

script 部分

export default {
    // 这里写你的代码,如
    el:,
    data:,
    props:
    // 省略
};

style 部分

就是针对我们的 template 里内容出现的 html 元素写一些样式

注意: vue-cli的作用就是让我们把精力放在业务编码上,一切准备的工作交给vue-cli去做

之后我们可以直接使用vue-cli去做案例或者项目

Vue案例

讲完了Vue基础知识和vue-cli工具

我们利用所讲知识完成一个简单的案例–英雄列表

目的:

  1. 熟悉vue-router的使用
  2. 熟悉单文件组件的使用
  3. 熟悉vue-cli的使用

案例演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EyomgeMG-1604136215715)(./assets/1536664536268.png)]

功能拆分

  1. vue-cli创建项目hero
  2. 路由配置
  3. 英雄列表
    • 列表展示
    • 添加英雄
    • 编辑英雄
    • 删除英雄

项目起步

利用脚手架vue-cli生成项目结构

# 安装 Vue CLI 脚手架
# 如果已经安装过则不需要!
npm i -g @vue/cli

# 使用脚手架工具初始化你的项目
vue init webpack-simple 项目名称

# 进入你初始化好的项目
cd 项目路径

#安装项目所需依赖
npm i

# 启动开发模式
# 或者 npm start
npm run dev

调整模板

将vue-cli生成的文件中无用的代码进行删除

首页展示

步骤分析:

  1. 导入素材: 将课程包中index.html的标签结构放在App.vue的template中
  2. 安装[email protected]: index.html使用了bootstrap和index.css,在vue项目中安装和导入
  3. 在main.js中引入bootstrap和index.css
  4. 修改webpack配置: 程序报错、无法识别字体文件, 需要在webpack.config.js中进行配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-In685lt2-1604136215717)(./assets/1534220243520.png)]

代码演示

1. 导入素材

2. 安装bootstrap,导入index.css

  1. npm i [email protected]
  2. 将课程包中的css文件夹放在assets中

3. 引入bootstrap和index.css

main.js

import Vue from 'vue'
import App from './App.vue'

import "../node_modules/bootstrap/dist/css/bootstrap.css";
import "./assets/css/index.css";

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

4. 修改webpack.config.js配置

{
    test: /.(ttf|woff2|woff|eot)$/,
        loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
}

接下来我们用单文件组件的方式将页面文件提取为不同的组件

提取公共头部组件

步骤分析:

1. 新建AppHeader.vue

2. 修改App.vue的template

3. 使用AppHeader.vue

代码演示:

  1. 在src下新建components/AppHeader.vue
  2. 找到头部的标签结构,将其放置于AppHeader.vue的template中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBY2QYeg-1604136215720)(./assets/1534222080131.png)]

  1. 在App.vue中引入并使用AppHeader.vue组件
    1. 引入AppHeader.vue组件
    2. 注册AppHeader.vue组件
    3. 使用AppHeader.vue组件

AppHeader.vue

<template>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CRUD</a>
</div>
</div>
</nav>
</template>

<script>
    export default {

}
</script>
<style>

</style>

App.vue

<template>
    <div>
    <!-- 3 使用AppHeader.vue组件 -->
<AppHeader></AppHeader>
<!--后面的标签结构 省略..-->
</div>
</template>

<script>

    // 1. 导入AppHeader.vue组件
    import AppHeader from './components/AppHeader';


export default {
    name: 'app',
    data () {
        return {

        }
    },
    // 2. 注册AppHeader组件
    components:{
        // 注意命名
        AppHeader:AppHeader
    }
}
</script>

<style lang="scss">

    </style>

提取侧边栏组件

步骤分析

1. 新建AppSilder.vue

2. 修改App.vue的template

3. 使用AppSilder.vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2UJOqoPu-1604136215722)(./assets/1534223067628.png)]

提取英雄列表组件

新建AppList.vue,并将App.vue中的英雄列表的页面标签提取到AppList.vue中

步骤分析

1. 新建AppList.vue

2. 修改App.vue的template

3. 使用AppList.vue

Vue-Router使用

使用 Vue-Router 实现页面导航管理

步骤分析及代码演示

  1. 安装路由模块
npm i vue-router
  1. 在 main.js 中加载
...
import VueRouter from 'vue-router' // 加载路由模块

// 注册到 Vue 中才可以使用
Vue.use(VueRouter)

// ...
  1. 在 main.js 中 new 出 VueRouter 实例，并挂载到根实例的 router 选项中
// ...

// 配置路由表
const appRouter = new VueRouter({
    routes: [
    ]
})

// ...

new Vue({
    el: '#app',
    render: h => h(App),
    // 配置实例选项 router 为你在上面 new 出来的 VueRouter 实例对象
    router: appRouter
});
  1. 配置路由表
// ...
// 配置路由表
const appRouter = new VueRouter({
    // routes 选项用来配置路由表
    // 当请求 /xxx 的时候，渲染 xxx 组件
    // routes 是一个数组，数组中存储一些固定格式的对象
    // 对象 path 表示请求的路径
    // 对象的 component 用来指定当你请求 path 路径的时候，渲染该组件
    // 现在的问题是？匹配到 path 的时候，组件往哪里渲染？
    // 在你的根组件预留一个路由的出口，用来告诉路由到匹配到某个 path 的时候，把该组件渲染到哪里
    routes: [
        {
            path: '/foo',
            component: {
                template: `
foo 组件啊
`
            }
        },
        {
            path: '/bar',
            component: {
                template: `
bar 组件啊
`
            }
        }
    ]
});
// ...
  1. 在 src/App.vue 组件中设置路由出口（告诉路由往哪里渲染 path 匹配到的组件）
<template>
    <div id="app">
        <AppHeader>AppHeader>
        <div class="container-fluid">
            <div class="row">
                <AppSidebar>AppSidebar>
                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                    
                    
                    <router-view>router-view>
                div>
            div>
        div>
    div>
template>
...
  1. 在侧边栏 src/components/AppSidebar.vue 组件中 增加两个导航链接用来导航 foo 和 bar
<template>
    <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
            <li class="active"><a href="#">英雄管理 <span class="sr-only">(current)span>a>li>
            <li><a href="#">用户管理a>li>
            <li><a href="#">商品管理a>li>
            <li><a href="#">订单管理a>li>
            
            <li><a href="#/foo">Go Fooa>li>
            <li><a href="#/bar">Go Bara>li>
        ul>
    div>
template>

<script>script>

<style>style>

将路由导航到 .vue 组件

src/components/Foo.vue:

<template>
    <div>
        Foo 组件
    div>
template>

<script>script>
<style>style>

src/components/Bar.vue:

<template>
    <div>
        Bar 组件
    div>
template>

<script>script>
<style>style>

src/main.js:

// ...
// ...
import Foo from './components/Foo'
import Bar from './components/Bar'
import HeroList from './components/HeroList'

// ...
// ...

// 配置路由表
const appRouter = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: Foo
            // component: {
            //   template: `
foo 组件啊
`
            // }
        },
        {
            path: '/bar',
            component: Bar
        },
        {
            path: '/heroes',
            component: HeroList
        }
    ]
});

// ...

提取路由模块router.js

将main.js中路由相关的代码提取到router.js中

新建router.js

import Vue from 'vue';

// 1. 导入路由
import VueRouter from 'vue-router';

// 导入组件
import AppList from './components/AppList.vue';
import Bar from './components/Bar.vue';
import Foo from './components/Foo.vue';


// 注册插件
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(VueRouter);

// 2. 创建路由对象，配置路由规则
const router = new VueRouter({
    routes: [
        // { name: 'home', path: '/', redirect: '/heroes' },
        { name: 'home', path: '/', redirect: { name: 'heroes' } },
        // 路由规则
        { name: 'heroes', path: '/heroes', component: AppList },
        { name: 'bar', path: '/bar', component: Bar },
        { name: 'foo', path: '/foo', component: Foo }
    ]
});

// 3 导出模块
export default router;

main.js

import Vue from 'vue'
import App from './App.vue'

// import Foo from './components/Foo'
// import Bar from './components/Bar'
// import AppList from './components/AppList'

// import VueRouter from 'vue-router' // 加载路由模块
// // 注册到 Vue 中才可以使用
// Vue.use(VueRouter);

// 1 导入路由对象
import router from './router';

import "../node_modules/bootstrap/dist/css/bootstrap.css";
import "./assets/css/index.css";


new Vue({
    el: '#app',
    render: h => h(App),
    // 配置实例选项 router 为你在上面 new 出来的 VueRouter 实例对象
    // router: appRouter
    router
});

配置导航菜单

将AppSilder.vue中的a标签改成router-link

AppSilder.vue

<template>
    <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar">
            <!-- <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#/heroes">Reports</a></li>
    <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
            <li><a href="#/foo">Go Foo</a></li>
                <li><a href="#/bar">Go Bar</a></li> -->
                    <router-link tag="li" to="/heroes">
                        <a>英雄列表</a>
</router-link>
<router-link tag="li" to="/bar">
    <a>武器列表</a>
</router-link>
<router-link tag="li" to="/foo">
    <a>装备列表</a>
</router-link>
</ul>
</div>
</template>

<script>
    export default {

}
</script>
<style>

</style>

API-Server

接下来要实现具体的功能, 首先是英雄列表展示,其中的数据要来源于服务器

我们使用json-server快速启动api服务器 监听课程包中的db.json

可以使用postman测试接口

英雄列表数据渲染

利用axios发送请求获取英雄列表的数据渲染到AppList.vue的template中

步骤分析:

  1. 启动json-server
  2. 在安装并在AppList.vue中导入axios
  3. 在data选项中添加属性list:[]
  4. 将发送请求的方法写在methods中 loadData
  5. 在created钩子函数中调用loadData方法
  6. 将list中的数据渲染到template中的相应位置

代码演示:

AppList.vue

<template>
    <div>
        <h2 class="sub-header">Hero Listh2>
        <a class="btn btn-success" href="add.html">Adda>
        <div class="table-responsive">
            <table class="table table-striped">
                
                <thead>
                    <tr>
                        <th>#th>
                        <th>名称th>
                        <th>性别th>
                        <th>操作th>
                    tr>
                thead>
                <tbody>
                    <tr :key="item.id" v-for="(item, index) in list">
                        <td>{{ index + 1 }}td>
                        <td>{{ item.name }}td>
                        <td>{{ item.gender }}td>
                        <td>

                            <a href="edit.html">edita>
                              
                            <a href="javascript:window.confirm('Are you sure?')">deletea>            td>
                    tr>
                tbody>
            table>
        div>
    div>
template>

<script>
    import axios from 'axios';

    export default {
        data(){
            return {
                list:[]
            }
        },
        created(){
            this.loadData();
        },
        methods:{
            loadData(){
                axios.get('http://localhost:3000/users')
                    .then((res)=>{
                    console.log(res);
                    const {status,data} = res;
                    if (status == 200) {
                        this.list = data;
                    }

                })
            }
        }
    }
script>
<style>

style>

实现效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-egADMzJg-1604136215725)(./assets/1534228452013.png)]

删除功能

点击英雄列表中每个英雄信息后面的删除按钮,可以删除当前英雄数据

步骤分析

  1. 找到删除按钮, 绑定click事件
  2. 将要删除的英雄的id传给删除方法
  3. 在methods中实现删除方法
    1. 获取当前英雄的id
    2. 提示用户是否删除
    3. 如果是, 则调用axios.delete方法删除数据
      1. 删除成功, 重新渲染列表

代码演示

AppList.vue

<template>
    <div>
        <h2 class="sub-header">Hero Listh2>
        <a class="btn btn-success" href="add.html">Adda>
        <div class="table-responsive">
            <table class="table table-striped">

                <thead>
                    <tr>
                        <th>#th>
                        <th>名称th>
                        <th>性别th>
                        <th>操作th>
                    tr>
                thead>
                <tbody>
                    <tr :key="item.id" v-for="(item, index) in list">
                        <td>{{ index + 1 }}td>
                        <td>{{ item.name }}td>
                        <td>{{ item.gender }}td>
                        <td>
                            <a href="edit.html">edita>
                              
                            
                            <a href="#" @click.prevent="handleDelete(item.id)">deletea>

                        td>
                    tr>
                tbody>
            table>
        div>
    div>
template>

<script>
    import axios from 'axios';

    export default {
        data(){
            return {
                list:[]
            }
        },
        created(){
            this.loadData();
        },
        methods:{
            loadData(){
                axios.get('http://localhost:3000/users')
                    .then((res)=>{
                    console.log(res);
                    const {status,data} = res;
                    if (status == 200) {
                        this.list = data;
                    }

                })
            },

            handleDelete(id) {
                // 删除提示
                if (!confirm('是否确认删除？')) {
                    return;
                }
                axios
                    .delete(`http://localhost:3000/users/${id}`)
                    .then((res) => {
                    if (res.status === 200) {
                        // 删除成功，重新渲染列表
                        this.loadData();
                    } else {
                        alert('删除失败');
                    }
                })
                    .catch((err) => {
                    console.log(err);
                });
            }
        }
    }
script>
<style>

style>

添加功能-页面

点击添加按钮 进入到添加的组件,输入新英雄信息,点击确定, 回到列表页渲染新数据

我们先让添加的页面显示出来

步骤分析

  1. 新建add.vue组件
  2. 将课程包中的add.html中添加的页面标签放置在add.vue中
  3. 修改路由router.js
    1. 导入add.vue
    2. 注册add.vue
    3. 使用add.vue
  4. 根据效果调整add.vue中的标签

代码演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QvAGhbqE-1604136215727)(./assets/1534229426837.png)]

add.vue

<template>
    <div>
        <h2 class="sub-header">Add Heroh2>
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email addresslabel>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            div>
            <div class="form-group">
                <label for="exampleInputPassword1">Passwordlabel>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            div>
            <div class="form-group">
                <label for="exampleInputFile">File inputlabel>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.p>
            div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                label>
            div>
            <button type="submit" class="btn btn-success">Submitbutton>
        form>
    div>
template>

<script>
    export default {

    }
script>

<style>

style>

router.js

import Vue from 'vue';

// 1. 导入路由
import VueRouter from 'vue-router';

// 导入组件
import AppList from './components/AppList.vue';
import Bar from './components/Bar.vue';
import Foo from './components/Foo.vue';
import Add from './components/add.vue';


// 注册插件
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(VueRouter);

// 2. 创建路由对象，配置路由规则
const router = new VueRouter({
    routes: [
        // { name: 'home', path: '/', redirect: '/heroes' },
        { name: 'home', path: '/', redirect: { name: 'heroes' } },
        // 路由规则
        { name: 'heroes', path: '/heroes', component: AppList },
        { name: 'bar', path: '/bar', component: Bar },
        { name: 'foo', path: '/foo', component: Foo },
        { name: 'add', path: '/add', component: Add }

    ]
});

// 3 导出模块
export default router;

AppList

<template>
    <div>
        <h2 class="sub-header">Hero Listh2>
        
        
        <router-link :to="{name:'add'}">添加router-link>
        <div class="table-responsive">
            
        div>
    div>
template>

// 省略

add.vue

<template>
    <div>
        <div>
            <h2 class="sub-header">Add Heroh2>
            <form>
                <div class="form-group">
                    <label for="name">英雄名称label>
                    <input type="text" class="form-control" id="name" placeholder="Name">
                div>
                <div class="form-group">
                    <label for="sex">英雄性别label>
                    <input type="text" class="form-control" id="sex" placeholder="Sex">
                div>
                <button type="submit" class="btn btn-success">Submitbutton>
            form>
        div>
    div>
template>

添加功能-功能实现

有了页面,接下来我们实现添加的功能

步骤分析:

  1. 绑定文本框
  2. 添加按钮注册事件
  3. 发送请求

代码演示:

add.vue

<template>
    <div>  
        <h2 class="sub-header">Add Heroh2>
        <form>
            <div class="form-group">
                <label for="name">英雄名称label>
                <input v-model="formData.name" type="text" class="form-control" id="name" placeholder="Name">
            div>
            <div class="form-group">
                <label for="sex">英雄性别label>
                <input v-model="formData.gender" type="text" class="form-control" id="sex" placeholder="Sex">
            div>
            <button @click.prevent="handleAdd" type="submit" class="btn btn-success">Submitbutton>
        form>
    div>
template>

<script>

    import axios from 'axios'
    export default {
        data() {
            return {
                // 绑定到表单元素
                formData: {
                    name: '',
                    gender: ''
                }
            }
        },
        methods:{
            handleAdd() {
                axios
                    .post('http://localhost:3000/users', this.formData)
                    .then((res) => {
                    const { status, data } = res;
                    if (status === 201) {
                        // 判断添加是否成功
                        // 添加成功，跳转到英雄列表
                        this.$router.push({ name: 'heroes' });
                    } else {
                        alert('添加失败');
                    }
                })
            }
        }
    }
script>

<style>

style>

编辑功能-页面

编辑的页面和添加的页面很像

步骤分析

  1. 新建edit.vue组件
  2. 将add.vue中的代码copy到edit.vue中进行修改
  3. 修改路由router.js
    1. 导入edit.vue
    2. 注册edit.vue
    3. 使用edit.vue
  4. 在AppList中设置router-link 动态参数

代码演示

edit.vue

<template>
    <div>

        <h2 class="sub-header">Edit Heroh2>
        <form>
            <div class="form-group">
                <label for="name">英雄名称label>
                <input v-model="formData.name" type="text" class="form-control" id="name" placeholder="Name">
            div>
            <div class="form-group">
                <label for="sex">英雄性别label>
                <input v-model="formData.gender" type="text" class="form-control" id="sex" placeholder="Sex">
            div>
            <button  type="submit" class="btn btn-success">Submitbutton>
        form>
    div>
template>

<script>

    import axios from 'axios'
    export default {
        data() {
            return {
                // 绑定到表单元素
                formData: {
                    name: '',
                    gender: ''
                }
            }
        },
        methods:{

        }
    }
script>

<style>

style>

router.js

import Vue from 'vue';

// 1. 导入路由
import VueRouter from 'vue-router';

// 导入组件
import AppList from './components/AppList.vue';
import Bar from './components/Bar.vue';
import Foo from './components/Foo.vue';
import Add from './components/add.vue';
import Edit from './components/edit.vue';

// 注册插件
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(VueRouter);

// 2. 创建路由对象，配置路由规则
const router = new VueRouter({
    routes: [
        // { name: 'home', path: '/', redirect: '/heroes' },
        { name: 'home', path: '/', redirect: { name: 'heroes' } },
        // 路由规则
        { name: 'heroes', path: '/heroes', component: AppList },
        { name: 'bar', path: '/bar', component: Bar },
        { name: 'foo', path: '/foo', component: Foo },
        { name: 'add', path: '/add', component: Add },
        { name: 'edit', path: '/edit/:id', component: Edit }
    ]
});

// 3 导出模块
export default router;

AppList


<router-link :to="{name:'edit',params:{id:item.id}}">编辑router-link>

编辑功能-功能实现

步骤分析:

  1. 进入编辑页面，显示当前要编辑的英雄
    1. 获取url上的id，created()
    2. 发送请求获取数据
    3. 绑定文本框
  2. 点击Submit按钮，实现更新功能

代码演示

edit.vue

<template>
    <div>
        <h2 class="sub-header">Edit Heroh2>
        <form>
            <div class="form-group">
                <label for="name">英雄名称label>
                <input v-model="formData.name" type="text" class="form-control" id="name" placeholder="Name">
            div>
            <div class="form-group">
                <label for="sex">英雄性别label>
                <input v-model="formData.gender" type="text" class="form-control" id="sex" placeholder="Sex">
            div>
            <button @click.prevent="handleEdit" type="submit" class="btn btn-success">Submitbutton>
        form>
    div>
template>

<script>

    import axios from 'axios';

    // 1. 进入编辑页面，显示当前要编辑的英雄
    // 1.1 获取url上的id，created()
    // 1.2 发送请求获取数据
    // 1.3 绑定文本框

    // 2. 点击Submit按钮，实现更新功能

    export default {
        data() {
            return {
                formData: {
                    name: '',
                    gender: ''
                },
                // 获取url上的id，默认-1
                heroId: -1
            }
        },
        // 组件创建完毕
        created() {
            // 获取路由参数
            this.heroId = this.$route.params.id;
            console.log(this.heroId);

            // 调用 获取英雄对象的方法
            this.loadData();
        },
        methods: {
            // 根据id，获取英雄对象
            loadData() {
                axios
                    .get(`http://localhost:3000/users/${this.heroId}`)
                    .then((res) => {
                    if (res.status === 200) {
                        this.formData = res.data;
                    }
                });
            },
            handleEdit() {
                axios
                    .put(`http://localhost:3000/users/${this.heroId}`, this.formData)
                    .then((res) => {
                    if (res.status === 200) {
                        this.$router.push({ name: 'heroes' });
                    } else {
                        alert('修改失败');
                    }
                });
            }
        }
    };
script>

<style>

style>

当前选中导航的样式

选中某个导航时,其样式和其他的不同, 为active的样式

参考文档

router.js

添加 linkActiveClass: ‘active’,全局配置

// 省略
const router = new VueRouter({
    linkActiveClass: 'active',
    routes: [
        // { name: 'home', path: '/', redirect: '/heroes' },
        { name: 'home', path: '/', redirect: { name: 'heroes' } },
        // 路由规则
        { name: 'heroes', path: '/heroes', component: AppList },
        { name: 'bar', path: '/bar', component: Bar },
        { name: 'foo', path: '/foo', component: Foo },
        { name: 'add', path: '/add', component: Add },
        { name: 'edit', path: '/edit/:id', component: Edit }
    ]
});
// 省略

全局配置axios

axios请求在多个组件中都要使用,

所以, 可以考虑给Vue实例添加axios选项,

这样 所有的组件都可以使用

main.js

// 省略--

// 导入axios
import axios from 'axios';
// 配置所有Vue的实例都具有$http这个成员
Vue.prototype.$http = axios;

new Vue({
    el: '#app',
    render: h => h(App),
    // 配置实例选项 router 为你在上面 new 出来的 VueRouter 实例对象
    // router: appRouter
    router
});

将之前在组件中使用axios的位置改成

  1. 去掉import axios from ‘axios’
  2. 将axios. 改成this.$http.

add.vue

<script>

    // import axios from 'axios'
    export default {
data() {
return {
// 绑定到表单元素
formData: {
    name: '',
        gender: ''
}
}
},
    methods:{
        handleAdd() {
            this.$http
                .post('http://localhost:3000/users', this.formData)
                .then((res) => {
                const { status, data } = res;
                if (status === 201) {
                    // 判断添加是否成功
                    // 添加成功，跳转到英雄列表
                    this.$router.push({ name: 'heroes' });
                } else {
                    alert('添加失败');
                }
            })
        }
    }
}
    </script>

配置baseUrl

请求的url中有一部分是一样的, 每次写很麻烦,

所以, 可以使用axios的API 配置baseURl

main.js

// 省略--

// 导入axios
import axios from 'axios';
// 设置baseURL
axios.defaults.baseURL = 'http://localhost:3000/';

// 省略--

在发起this.$http请求的位置, 简化原来的url

add.vue

<script>

    // import axios from 'axios'
    export default {
data() {
return {
// 绑定到表单元素
formData: {
    name: '',
        gender: ''
}
}
},
    methods:{
        handleAdd() {
            this.$http
                .post('users', this.formData)
                .then((res) => {
                const { status, data } = res;
                if (status === 201) {
                    // 判断添加是否成功
                    // 添加成功，跳转到英雄列表
                    this.$router.push({ name: 'heroes' });
                } else {
                    alert('添加失败');
                }
            })
        }
    }
}
    </script>

      return {
            formData: {
                name: '',
                gender: ''
            },
            // 获取url上的id，默认-1
            heroId: -1
        }
    },
    // 组件创建完毕
    created() {
        // 获取路由参数
        this.heroId = this.$route.params.id;
        console.log(this.heroId);

        // 调用 获取英雄对象的方法
        this.loadData();
    },
    methods: {
        // 根据id，获取英雄对象
        loadData() {
            axios
                .get(`http://localhost:3000/users/${this.heroId}`)
                .then((res) => {
                if (res.status === 200) {
                    this.formData = res.data;
                }
            });
        },
        handleEdit() {
            axios
                .put(`http://localhost:3000/users/${this.heroId}`, this.formData)
                .then((res) => {
                if (res.status === 200) {
                    this.$router.push({ name: 'heroes' });
                } else {
                    alert('修改失败');
                }
            });
        }
    }
};


## 当前选中导航的样式

> 选中某个导航时,其样式和其他的不同, 为active的样式
>
> [参考文档](https://router.vuejs.org/zh/api/#tag) 

`router.js` 

添加    linkActiveClass: 'active',全局配置

```js
// 省略
const router = new VueRouter({
    linkActiveClass: 'active',
    routes: [
        // { name: 'home', path: '/', redirect: '/heroes' },
        { name: 'home', path: '/', redirect: { name: 'heroes' } },
        // 路由规则
        { name: 'heroes', path: '/heroes', component: AppList },
        { name: 'bar', path: '/bar', component: Bar },
        { name: 'foo', path: '/foo', component: Foo },
        { name: 'add', path: '/add', component: Add },
        { name: 'edit', path: '/edit/:id', component: Edit }
    ]
});
// 省略

全局配置axios

axios请求在多个组件中都要使用,

所以, 可以考虑给Vue实例添加axios选项,

这样 所有的组件都可以使用

main.js

// 省略--

// 导入axios
import axios from 'axios';
// 配置所有Vue的实例都具有$http这个成员
Vue.prototype.$http = axios;

new Vue({
    el: '#app',
    render: h => h(App),
    // 配置实例选项 router 为你在上面 new 出来的 VueRouter 实例对象
    // router: appRouter
    router
});

将之前在组件中使用axios的位置改成

  1. 去掉import axios from ‘axios’
  2. 将axios. 改成this.$http.

add.vue

<script>

    // import axios from 'axios'
    export default {
data() {
return {
// 绑定到表单元素
formData: {
    name: '',
        gender: ''
}
}
},
    methods:{
        handleAdd() {
            this.$http
                .post('http://localhost:3000/users', this.formData)
                .then((res) => {
                const { status, data } = res;
                if (status === 201) {
                    // 判断添加是否成功
                    // 添加成功，跳转到英雄列表
                    this.$router.push({ name: 'heroes' });
                } else {
                    alert('添加失败');
                }
            })
        }
    }
}
    </script>

配置baseUrl

请求的url中有一部分是一样的, 每次写很麻烦,

所以, 可以使用axios的API 配置baseURl

main.js

// 省略--

// 导入axios
import axios from 'axios';
// 设置baseURL
axios.defaults.baseURL = 'http://localhost:3000/';

// 省略--

在发起this.$http请求的位置, 简化原来的url

add.vue

<script>

    // import axios from 'axios'
    export default {
data() {
return {
// 绑定到表单元素
formData: {
    name: '',
        gender: ''
}
}
},
    methods:{
        handleAdd() {
            this.$http
                .post('users', this.formData)
                .then((res) => {
                const { status, data } = res;
                if (status === 201) {
                    // 判断添加是否成功
                    // 添加成功，跳转到英雄列表
                    this.$router.push({ name: 'heroes' });
                } else {
                    alert('添加失败');
                }
            })
        }
    }
}
    </script>

你可能感兴趣的:(vue,Vue)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • vue3中el-table中点击图片放大时，被表格覆盖 叫我小鹏呀 vue.jsjavascript前端
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • Vue中table合并单元格用法 weixin_30613343 javascriptViewUI
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • vue+el-table 可输入表格使用上下键进行input框切换 以对_ vue学习记录vue.jsjavascript前端
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
  • vue + Element UI table动态合并单元格 我家媳妇儿萌哒哒 elementUIvue.js前端javascript
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php课程设计vue.js
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2vue.jsjavascript前端
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js前端javascriptnode.jsnpm
    node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
  • vue2实现复制,粘贴功能 周bro vue.jsjavascript前端
    一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
  • 【vite 自动配置路由】 CODER-V 前端javascriptvue.js前端软件构建
    手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • Vue3 vant组件库自动导入 不叫虎子 Vuevue.js前端javascript前端框架typescript
    实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
  • vant-element-ts一起使用存在的问题 flynn_ 问题总结vue
    由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台 网顺技术团队 成品程序项目javavue.js汽车课程设计springboot
    基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • C# 开发教程-入门基础 天马3798 教程系列整理c#开发语言
    1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
  • 若依后端正常启动但是uniapp移动端提示后端接口异常 大可大可抖 uni-app
    pc端能用模拟器也能正常连接接口，手机端真机调试连不上接口解决：1.先看config.js的填自己的ip地址module.exports={//baseUrl:'https://vue.ruoyi.vip/prod-api',baseUrl:"http://192.168.101.5:8080",}2.网络环境问题（防火墙）点击属性然后选择专用
  • 好看的vue登录页面(附 源代码 背景图) 小小薛定谔 vue.jsjavascriptcss前端
    一、效果展示二、代码你好!欢迎回来登录忘记密码?注册exportdefault{name:"MedLogin",data(){return{confirm_disabled:false,loginForm:{no:'',password:''},rules:{no:[{required:true,message:'请输入账号',trigger:'blur'},{min:3,max:6,messag
  • uniapp 获取各种小程序code 灵魂清零 uniapp小程序
    各种小程序在进入小程序是都需要去获取code才能拿到基础信息，自己记录一下用uniapp开发小程序是获取微信小程序、百度小程序、头条小程序、支付宝小程序的codeVue.prototype.$global={appLogin(){returnnewPromise((resole,reject)=>{varthat=this;varwxLoginUrl=app.globalData.url+"/lo
  • redis学习笔记——不仅仅是存取数据 Everyday都不同 returnSourceexpire/delincr/lpush数据库分区redis
    最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷）   1、关于JedisPool.returnSource(Jedis jeids)   这个方法是从red
  • SQL性能优化-持续更新中。。。。。。 atongyeye oraclesql
    1 通过ROWID访问表--索引 你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 2 共享SQL语句--相同的sql放入缓存 3 选择最有效率的表
  • [JAVA语言]JAVA虚拟机对底层硬件的操控还不完善 comsci JAVA虚拟机
         如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？ 那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ &n
  • lvs- real 男人50 LVS
    #!/bin/bash # # Script to start LVS DR real server. # description: LVS DR real server # #.  /etc/rc.d/init.d/functions VIP=10.10.6.252 host='/bin/hostname' case "$1" in sta
  • 生成公钥和私钥 oloz DSA安全加密
    package com.msserver.core.util; import java.security.KeyPair; import java.security.PrivateKey; import java.security.PublicKey; import java.security.SecureRandom; public class SecurityUtil {
  • UIView 中加入的cocos2d，背景透明 374016526 cocos2dglClearColor
    要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
  • mysql常用命令 香水浓 mysql
    连接数据库 mysql -u troy -ptroy 备份表 mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 恢复表（与恢复数据库命令相同） mysql -u troy -ptroy mm_database < user.sql 备份数据库 mysqldump -u troy -ptroy
  • 我的架构经验系列文章 - 后端架构 - 系统层面 agevs JavaScriptjquerycsshtml5
    系统层面： 高可用性 所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
  • 利用ant进行远程tomcat部署 aijuans tomcat
    在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 1.配置tomcat的用户角色
  • 获取复利总收入 baalwolf 获取
           public static void main(String args[]){         int money=200;         int year=1;         double rate=0.1; &
  • eclipse.ini解释 BigBird2012 eclipse
    大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 Overview 1、Eclipse.ini的作用 Eclipse startup is controlled by th
  • AngularJS实现分页功能 bijian1013 JavaScriptAngularJS分页
            对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。   &nbs
  • [Maven学习笔记三]Maven archetype bit1129 ArcheType
    archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等.   mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式，   mvn archetype   1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
  • 【Java命令三】jps bit1129 Java命令
    jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看   [hadoop@hadoop bin]$ jps -help usage: jps [-help] jps [-q] [-mlvV] [<hostid>] Definitions: <hostid>: <hostname>[:
  • ZABBIX2.2 2.4 等各版本之间的兼容性 ronin47
    zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容 zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
  • unity 3d还是cocos2dx哪个适合游戏？ brotherlamp unity自学unity教程unity视频unity资料unity
    unity 3d还是cocos2dx哪个适合游戏？ 问：unity 3d还是cocos2dx哪个适合游戏？ 答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2，
  • 百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序 bylijinnan java算法面试百度招聘
    import java.util.Arrays; /** * 最早是在陈利人老师的微博看到这道题： * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K * 设计一个排序算法。It should be faster than O(n*lgn)。
  • 获取checkbox复选框的值 chiangfai checkbox
    <title>CheckBox</title> <script type = "text/javascript"> doGetVal: function doGetVal() { //var fruitName = document.getElementById("apple").value;//根据
  • MySQLdb用户指南 chenchao051 mysqldb
    原网页被墙，放这里备用。 MySQLdb User's Guide Contents Introduction Installation _mysql MySQL C API translation MySQL C API function mapping Some _mysql examples MySQLdb
  • HIVE 窗口及分析函数 daizj hive窗口函数分析函数
    窗口函数应用场景： （1）用于分区排序 （2）动态Group By （3）Top N （4）累计计算 （5）层次查询 一、分析函数 用于等级、百分点、n分片等。 函数             说明 RANK()     &nbs
  • PHP ZipArchive 实现压缩解压Zip文件 dcj3sjt126com PHPzip
    PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。 一、解压缩zip文件 01 02 03 04 05 06 07 08 09 10 11
  • 精彩英语贺词 dcj3sjt126com 英语
    I'm always here              我会一直在这里支持你                &nb
  • 基于Java注解的Spring的IoC功能 e200702084 javaspringbeanIOCOffice
                                      
  • java模拟post请求 geeksun java
    一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。 此处用HttpComponents的httpclient来完成使命。 import org.apache.http.HttpEntity ; import org.apache.http.HttpRespon
  • Swift语法之 ---- ?和!区别 hongtoushizi ?swift!
    转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html   Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错： var stringValue : String //
  • centos7安装jdk1.7 jisonami jdkcentos
    安装JDK1.7 步骤1、解压tar包在当前目录 [root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 步骤2：配置环境变量 在etc/profile文件下添加 export JAVA_HOME=/usr/java/jdk1.7.0_75 export CLASSPATH=/usr/java/jdk1.7.0_75/lib
  • 数据源架构模式之数据映射器 home198979 PHP架构数据映射器datamapper
    前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。   一、概念 数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 &nb
  • 在Python中使用MYSQL pda158 mysqlpython
    缘由 　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到 数据库中。 　　了解到 Python在这方面有优势，便选用之。 　　由于我有台 server上面安装有 mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里 记录一下，大家共勉。 　　 python中mysql的调用 　　 百度之后能够通过MySQLdb进行数据库操作。
  • 单例模式 hxl1988_0311 java单例设计模式单件
    package com.sosop.designpattern.singleton; /* * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点 * * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件 * * 必须考虑到并发情况下创建了多个实例对象 * */ /** * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
  • 27种迹象显示你应该辞掉程序员的工作 vipshichg 工作
    1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他