0
点赞
收藏
分享

微信扫一扫

【狂神说】vue详细笔记，前端vue。vue-router路由，基础语法，组件，Axios，vue声明周期，插槽，自定义事件，Vue-Cli，vue+elementuUI

Yaphets_巍 2022-01-20 阅读 38
vue.js前端javascript

文章目录


【遇见狂神说】
https://www.bilibili.com/video/BV18E411a7mC?p=1

vue

vue官网：https://cn.vuejs.org/v2/guide/

注意：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

开发版本

  • 包含完整的警告和调试模式：https://vuejs.org/js/vue.js
  • 删除了警告，30.96KB min + gzip： https://vuejs.org/js/vue.min.js

CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
</script>

第一个vue程序

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

1、创建一个 HTML 文件 01-hello.html

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

2、引入 Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

3、创建一个 Vue 的实例

<script>
    var vm = new vue({
        el : "#app",
        data : {
            message : "hello,vue!"
        }
    });
</script>

4、将数据绑定到页面元素（视图层）

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

1. 基础语法

我们对于基础语法，说白了就是实现元素赋值，循环，判断，以及事件响应即可！

1.1、v-bind

我们还可以使用 v-bind 来绑定元素特性!

<body>
<div id="app">
    <!--
        如果要将模型数据绑定在html属性中
        则使用 v-bind 指令,此时title中显示的是模型数据
     -->
    <h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1>
    <h1 :title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            message : '我是悬浮信息！'
        }
    });
</script>
</body>

1.2、v-if 系列

  • v-if
  • v-else-if
  • v-else
<body>
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            type : 'A'
        }
    });
</script>
</body>

测试：观察在控制台输入 vm.type = ‘B’、‘C’、‘D’ 的变化 。

1.3、v-for

语法格式：

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

注：items 是数组，item是数组元素迭代的别名。和Thymeleaf模板引擎的语法和这个十分的相似！

代码：03-v-for.html

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            items : [
                {message : "江南1"},
                {message : "江南2"},
                {message : "江南3"}
            ]
        }
    });
</script>
</body>

测试 ：在控制台输入 vm.items.push({message: ‘江南4’}) ，尝试追加一条数据，你会发现
浏览器中显示的内容会增加一条 江南4 .

在这里插入图片描述

1.4、v-on

v-on 监听事件：

事件有Vue的事件、和前端页面本身的一些事件！我们这 click 是vue的事件，可以绑定到Vue中的methods 中的方法事件！ 简写为一个(@)

代码：04-v-on.html

<body>
<div id="app">
    <button v-on:click="sayHi">点我</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            message : 'Hello,World'
        },
        methods : {
            sayHi : function (event) {
                alert(this.message);
            }
        }
    });
</script>
</body>

点击测试即可

1.5、v-model

​ Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。
​ 值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。
​ 你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

文本框：

<div id="app">
    输入的文本：<input type="text" v-model="message"> 显示的文本：{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            message : ''
        }
    });
</script>

在这里插入图片描述

单选按钮

<div id="app">
    性别：
    <input type="radio" name="sex" value="男" v-model="checked">男
    <input type="radio" name="sex" value="女" v-model="checked">女
    <p>
        选中了哪个：{{checked}}
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            checked : ''
        }
    });
</script>

在这里插入图片描述

多选按钮

<body>
<div id="app">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <span>选中的值: {{ checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
    new Vue({
        el: '#app',
        data: {
            checkedNames: []
        }
    })
</script>
</body>

在这里插入图片描述

下拉框

<body>
<div id="app">
    下拉框：
    <select v-model="checked">
        <option value="" disabled>--请选择：--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>
        选中了哪个：{{checked}}
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            checked : ''
        }
    });
</script>
</body>

2. 组件

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

在这里插入图片描述

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

注意：在实际开发中，我们并不会用以下方式开发组件，以下方法只是为了让大家理解什么是组件。

使用 Vue.component() 方法注册组件：

06-vue-component.html

<body>
<div id="app">
    <component></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    // 先注册组件
    Vue.component("component",{
        template : '<li>Hello</li>'
    });
    // 在实例化 Vue
    var vm = new Vue({
        el: '#app'
    });
</script>
</body>

在这里插入图片描述

像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用 props 属性了！
注意：默认规则下 props 属性里的值不能为大写：

<body>
<div id="app">
    <component v-for="item in items" v-bind:jiang="item"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    // 先注册组件
    Vue.component("component",{
        props : ['jiang'],
        template : '<li>{{jiang}}</li>'
    });
    // 在实例化 Vue
    var vm = new Vue({
        el: '#app',
        data : {
            items : ["江南1","江南2","江南3"]
        }
    });
</script>
</body>

在这里插入图片描述

3.Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX异步通信，其功能特点如下：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API [ JS中链式编程 ]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF（跨站请求伪造）

GitHub：https://github.com/axios/axios

中文文档：http://www.axios-js.com/

由于 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以Vue.js 并不包含 A JAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vueresource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁！

1、咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：
创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下。

{
  "name": "江小南...",
  "url": "https://www.baidu.com",
  "page": 1,
  "address": {
    "street": "洪崖洞",
    "city": "重庆市",
    "country": "中国"
  }
}

2、测试代码

<body>
<div id="vue" v-cloak>
    <div>名称：{{info.name}}</div>
    <div>地址：{{info.address.country}}-{{info.address.city}}-
        {{info.address.street}}</div>
    <div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
    </div>
</div>
<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data() {  // 这里是data()方法，区别data属性
            return {
                info: {
                    name: null,
                    address: {
                        country: null,
                        city: null,
                        street: null
                    },
                    url: null
                 }
            }
        },
        mounted() { //钩子函数  基于ES6浏览器
            axios.get('../data.json').then(response => (this.info = response.data));
        }
    });
</script>
</body>

在这里插入图片描述

4.vue声明周期

官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

在这里插入图片描述

5.计算属性

计算属性的重点突出在“属性”两个字上（属性是名词），首先它是个属性，其次这个属性有计算的能力（计算是动词），这里的“计算”就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！

<body>
<div id="app">
    <!--注意，一个是方法，一个是属性-->
    <p>调用当前时间的方法：{{currentTime1()}}</p>
    <p>当前时间的计算属性：{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            message : 'Hello,World'
        },
        methods: {
            currentTime1 : function () {
                return Date.now();
            }
        },
        computed : {  // 这是个属性，不是个方法，这里要注意
            currentTime2 : function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>
</body>

在这里插入图片描述

注意：methods 和 computed 里的东西不能重名。

结论：
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

6.插槽

在 Vue 中我们使用 元素，作为承载分发内容的出口，作者称其为"插槽"，可以应用在组合组件的场景中;

比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？

第一步: 定义一个待办事项的组件

// slot，插槽
    Vue.component('todo', {
        template: '<div>\
                    <div>待办事项</div>\
                         <ul>\
                            <li>学习狂神说Java</li>\
                         </ul>\
                    </div>'
    });

第二步: 我们需要让待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽!

1、将上面的代码留出一个插槽,即 slot

    Vue.component('todo', {
        template: '<div>\
                        <slot name="todo-title"></slot>\
                             <ul>\
                                <slot name="todo-items"></slot>\
                             </ul>\
                    </div>'
    });

2、定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件

    Vue.component('todo-title', {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
    Vue.component('todo-items', {
        props: ['item', 'index'],
        template: '<li>{{index + 1}}. {{item}}</li>'
    });

3、实例化 Vue 并初始化数据

    new Vue({
        el: '#app',
        data: {
            todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
        }
    })

4、将这些值,通过插槽插入

<div id="app">
    <todo>
        <todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    v-bind:item="item" v-bind:index="index"></todo-items>
    </todo>
</div>

完整代码：

<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    v-bind:item="item" v-bind:index="index"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    // slot，插槽
    Vue.component('todo', {
        template: '<div>\
                        <slot name="todo-title"></slot>\
                             <ul>\
                                <slot name="todo-items"></slot>\
                             </ul>\
                    </div>'
    });

    Vue.component('todo-title', {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
    Vue.component('todo-items', {
        props: ['item', 'index'],
        template: '<li>{{index + 1}}. {{item}}</li>'
    });

    new Vue({
        el: '#app',
        data: {
            todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
        }
    })
</script>
</body>

在这里插入图片描述

7.进阶：自定义事件

通过以上代码不难发现，数据项在 Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue 实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用 this.$emit(‘自定义事件名’, 参数)，操作过程如下：

1、在vue的实例中,增加了 methods 对象并定义了一个名为removeTodoItems 的方法

new Vue({
        el: '#app',
        data: {
            title : '秦老师系列课程',
            todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
        },
        methods: {
            removeItems : function (index) {
                this.todoItems.splice(index,1);
            }
        }
    })

2、修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件!

//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
    Vue.component('todo-items', {
        props: ['item', 'index'],
        template: '<li>{{index + 1}}. {{item}}<button @click="remove">删除</button></li>',
        methods : {
            remove : function (index) {
                // 调用自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

3、修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到vue的方法中!

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>

在这里插入图片描述

完整代码：

<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item, index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    // slot，插槽
    Vue.component('todo', {
        template: '<div>\
                        <slot name="todo-title"></slot>\
                             <ul>\
                                <slot name="todo-items"></slot>\
                             </ul>\
                    </div>'
    });

    Vue.component('todo-title', {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    //这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
    Vue.component('todo-items', {
        props: ['item', 'index'],
        template: '<li>{{index + 1}}. {{item}}<button @click="remove">删除</button></li>',
        methods : {
            remove : function (index) {
                // 调用自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            title : '秦老师系列课程',
            todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
        },
        methods: {
            removeItems : function (index) {
                this.todoItems.splice(index,1);  // 注意这种删除的写法
            }
        }
    })
</script>
</body>

在这里插入图片描述

删除成功！

8.Vue 入门小结

核心 : 数据驱动 , 组件化
优点 : 借鉴了 AngulaJS 的模块化开发 和 React 的虚拟Dom , 虚拟Dom就是把Dom操作放到内存中执行;
常用的属性 :

  • v-if
  • v-else-if
  • v-else
  • v-for
  • v-on 绑定事件 , 简写 @
  • v-model 数据双向绑定
  • v-bind 给组件绑定参数，简写 :

组件化 :

  • 组合组件， slot 插槽。
  • 组件内部绑定事件需要使用到 this.$emit(“事件名”,参数) ;
  • 计算属性的特色，缓存计算数据

遵循SoC 关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios 框架做异步通信；

9.Vue-Cli

9.1、Vue-Cli简介

主要的功能 :

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

9.2、环境准备

  • Node.js

node.js下载：http://nodejs.cn/download/

下载完安装测试

node -v命令，查看是否能够输出版本号
npm -v命令，查看是否能够输出版本号

在这里插入图片描述

  • 安装vue
npm install vue
  • 安装node.js淘宝镜像加速器（cnpm）
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 安装vue-cli
cnpm instal1 vue-cli-g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

在这里插入图片描述

关于有报错的情况参考文章：

https://www.cnblogs.com/xu360/articles/12307609.html

9.3 第一个vue-cli程序

  • 找到一个项目路径(空文件夹)
  • 创建一个基于webpack模板的vue应用程序
#1、首先需要进入到对应的目录 cd D:\workspace\vue
#2、这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue

  • 创建过程需要的操作

    一路选no

在这里插入图片描述
在这里插入图片描述

  • 初始化并运行
cd myvue
npm install
npm run dev

在这里插入图片描述

访问localhost:8080即可

在这里插入图片描述

  • 使用idea导入并打开文件目录即可

在这里插入图片描述

9.4webpack的使用

9.4.1 安装Webpack

安装

# 安装工具
npm install webpack -g
# 客户端
npm install webpack-cli -g

测试安装成功：

webpack -v
webpack-cli -v

在这里插入图片描述

配置：

webpack.config.js

  • entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
  • output：输出， 指定WebPack把处理完成的文件放置到指定路径
  • module：模块， 用于处理各种类型的文件
  • plugins：插件， 如：热更新、代码重用等
  • resolve：设置路径指向
  • watch：监听， 用于设置文件改动后直接打包
module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

直接运行webpack命令打包

9.4.2 使用webpack

  • 创建项目
  • 创建一个名为modules的目录，用于放置JS模块等资源文件
  • 在modules下创建模块文件hello.js
//暴露一个方法：sayHi
exports.sayHi = function(){
    document.write("<div>Hello Webpack</div>");
}
  • 在modules下创建一个名为main.js的入口文件main.js，用于打包时设置entry属性
//require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();
  • 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports = {
    entry:"./modules/main.js",
    output:{
        filename:"./js/bundle.js"
    }
}
  • 打包：

在这里插入图片描述

  • 在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>江小南</title>
    </head>
    <body>
        <script src="dist/js/bundle.js"></script>
    </body>
</html>

直接打开index.html

在这里插入图片描述

备注

# 参数--watch 用于监听变化,如果要打包的东西有变化，就重新打包
webpack --watch

10.vue-router路由

10.1 安装

  • 基于第一个vue-cli进行测试学习； 先查看node modules中是否存在vue-router, vue-router是一个插件包， 所以我们还是需要用npm/cnpm来进行安装的，注意执行命令的位置是在你当前项目下
npm install vue-router --save-dev

在这里插入图片描述

  • 如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能（注意后面的index.js）
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

10.2 测试路由

  • 删除第一个vue-cli项目中的没用的东西
  • components 目录下存放我们自己编写的组件
  • 定义几个自己的组件 Content.vue 、Main.vue、Myvue.vue

Content.vue

<template>
  <h1>内容页</h1>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>
</style>

Main.vue

<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>
</style>

Myvue.vue

<template>
    <h1>My-vue</h1>
</template>

<script>
    export default {
        name: "Myvue"
    }
</script>

<style scoped>
</style>
  • 将组件导入到路由中

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Content from '../components/Content'
import Main from '../components/Main'
import Myvue from '../components/Myvue'

// 安装路由  显示写出
Vue.use(VueRouter);

// 配置导出路由
export default new VueRouter({
  routes:[
      {
      // 路由路径
      path: '/content',
      // 跳转的组件
      name: 'content',
      component:Content
    },{
      // 路由路径
      path: '/main',
      // 跳转的组件
      name: 'main',
      component:Main
    },{
      // 路由路径
      path: '/myvue',
      // 跳转的组件
      name: 'myvue',
      component:Myvue
    }
  ]
});
  • 编写程序主入口（实现跳转功能）

App.vue

<template>
  <div id="app">
    <h1>Vue-Router</h1>
    <!--
          router-link：默认会被渲染成一个<a>标签，to属性为指定链接
          router-view：用于渲染路由匹配到的组件
        -->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-link to="/myvue">我的vue</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  • 编写程序主配置

main.js

import Vue from 'vue'
import App from './App'
import router from './router'  // 自动扫描里面的路由配置

Vue.config.productionTip = false

new Vue({
  el: '#app',
  // 配置路由
  router,
  components: { App },
  template: '<App/>'
})

在这里插入图片描述
在这里插入图片描述

11. vue+elementuUI

elementuUI官网：

https://element.eleme.io/#/zh-CN

实战小demo

11.1 创建工程

  • 创建一个名为hello-vue的工程
vue init webpack hello-vue

在这里插入图片描述

  • 安装依赖， vue-router、element-ui、sass-loader和node-sass四个插件
#进入工程目录
cd hello-vue
#安装vue-routern 
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启功测试
npm run dev

在这里插入图片描述
在这里插入图片描述

  • idea打开创建好的项目

  • 先把删除没用的文件（比如HelloWorld组件等）

11.2 创建登录页面

  • 项目结构如下

在这里插入图片描述

  • 在views目录下创建首页视图Main.vue组件
<template>
    <h1>首页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>
</style>
  • 在views目录下创建登录页面视图Login.vue组件
<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onsubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
          return{
            form:{
              username:'',
              password:''
            },
            //表单验证，需要在 el-form-item 元素中增加prop属性
            rules:{
              username:[
                {required:true,message:"账号不可为空",trigger:"blur"}
              ],
              password:[
                {required:true,message:"密码不可为空",tigger:"blur"}
              ]
            },

            //对话框显示和隐藏
            dialogVisible:false
          }
      },
      methods:{
          onSubmit(formName){
            //为表单绑定验证功能
            this.$refs[formName].validate((valid)=>{
              if(valid){
                //使用vue-router路由到指定界面，该方式称为编程式导航
                this.$router.push('/main');
              }else{
                this.dialogVisible=true;
                return false;
              }
            });
          }
      }
    }
</script>

<style lang="scss" scoped>
  .login-box{
    border:1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align:center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>
  • 在router目录下创建一个名为index.js的vue-router路由配置文件
//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main
    },
    //首页
    {
      path: '/login',
      component: Login
    },
  ]
})
  • 编写 APP.vue
<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/login">登录页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
  • 在main.js中配置路由
import Vue from 'vue'
import App from './App'
import router from "./router"

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(router)
Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  render:h=>h(App)
})
  • 测试npm run dev

参看文章：https://blog.csdn.net/a2986467829/article/details/121788853

在这里插入图片描述
在这里插入图片描述
未完待续…

举报

相关推荐

vue-cli学习笔记 02、Vue-router(路由)

vue.jsjavascript前端嵌套路由配置前端开发

Vue-cli和Vue-router

日记本前端

【Vue】Vue狂神说笔记

vue.js前端javascript

【Vue】vue-router 路由基础

vuejsvue.js占位符重定向系统/运维

Vue，Vue-cli，Vue-router，Vuex 版本对应关系

vue.jsjavascript前端创建项目虚拟化云计算

IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向

vue.jswebpackintellij-ideanode.js

Vue路由vue-router

vue.jsjavascript前端

vue之vue-router路由

VueApp模块化虚拟化云计算

vue-axios、vue-router、Vuex

ios数据数据传递编程语言

Vue 路由（vue-router）简单使用

vue.jsjavascript前端
0 条评论