当前位置： 首页 > news >正文

Vue基本使用

news 来源：原创 2025/5/7 5:23:38

什么是Vue?

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

第一个Vue程序

什么是MVVM?

MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM 就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。MVVM架构中，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View和Model之间的交互也是双向的。

那么这和Vue有什么关系呢？
Vue.js是一个前端框架，它实现了MVVM架构，也就是说，Vue.js通过MVVM架构，将数据绑定到视图上，当数据发生变化时，视图会自动更新。Vue.js的核心是数据绑定，它通过双向数据绑定，将Model和View连接起来，使得数据的变化能够自动反映到视图上，同时也使得视图的变化能够自动反映到数据上。

那么为了能在IDEA中使用Vue，我们首先需要在IDEA中安装Vue.js插件
然后为了在我们的html中使用vue,我们需要引入vue.js的cdn

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

简单使用

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
</head>
<body>

<div id="app">
  <h1>{{myTitle}}</h1>
</div>



<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el:"#app",
    data:{
      myTitle:'Hello Vue!'
    }
  });
</script>
</body>
</html>

在这个页面中，我们首先引入了Vue.js的cdn，然后在html中创建了一个div，并给它一个id，然后在js中创建了一个Vue实例，并将这个div绑定到Vue实例上，然后我们在data中定义了一个myTitle属性，然后在div中使用双大括号语法将myTitle的值显示出来。
在Vue实例中，我们使用了el属性来指定要绑定的元素（例中使用id选择器进行指定），data属性来定义数据，除此之外，我们可能还会用到methods属性来定义方法，computed属性来定义计算属性，watch属性来定义观察者，等等。

Vue语法

v-bind

v-bind指令用于将Vue实例中的数据绑定到HTML元素上，例如：

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

<div id="app">
  <span v-bind:title="myTitle">
    鼠标悬停此处查看动态绑定数据信息
  </span>
</div>



<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el:"#app",
    data:{
      myTitle:'Hello Vue!'
    }
  });
</script>
</body>
</html>

在这个例子中，我们使用了v-bind指令将Vue实例中的myTitle属性绑定到span元素的title属性上，当鼠标悬停在该元素上时，会显示myTitle的值。

v-if

v-if指令用于根据条件渲染元素

if

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

<div id="app">
  <p v-if="num===11">remember11 真好玩</p>
  <p v-else-if="num===17">ever17 真好玩</p>
  <p v-else>remember11 和 ever17 都很好玩</p>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
  var vm = new Vue({
            el:"#app",
            data:{
              num: 11
            }
          }
  );
</script>
</body>
</html>

在这个例子中，我们使用了v-if指令根据num的值来决定是否渲染p元素。如果num的值为11，则渲染"remember11 真好玩"；如果num的值为17，则渲染"ever17 真好玩"；否则渲染"remember11 和 ever17 都很好玩"。

v-for

v-for指令可用于循环数组来获取对象

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

<div id="app">
  <li v-for="item in items">
      {{item.message}}
  </li>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
  var vm = new Vue({
            el:"#app",
            data:{
                items:[
                    {message:"remember11 真好玩"},
                    {message: "ever 17 真好玩"},
                    {message: "remember11 和 ever17 都很好玩"}
                ]
            }
          }
  );
</script>
</body>
</html>

在这个例子中，我们使用了v-for指令来循环items数组，并使用item.message来获取每个对象的message属性值，并将其渲染到li元素中。

v-on

事件绑定
v-on指令用于绑定事件，例如点击事件、键盘事件等。

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

<div id="app">
  <button v-on:click="myClick">按钮</button>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
  var vm = new Vue({
            el: "#app",
            data: {
              message: "remember11 is very fun"
            },
            methods:{
               myClick : function(){
                 alert(this.message);
               }
            }
          }
  );
</script>
</body>
</html>

在这个例子中，我们使用了v-on指令来绑定点击事件，并在methods中定义了一个myClick方法来处理点击事件。当按钮被点击时，会弹出一个提示框，显示message的值。

v-model

双向数据绑定
v-model指令用于实现双向数据绑定，即视图和模型之间的数据同步，当视图中的数据发生变化时，模型中的数据也会相应地更新，反之亦然。

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

<div id="app">
  <select id="select" v-model="selected">
    <option value='' disabled>--请选择--</option>
    <option>remember11 真好玩</option>
    <option>ever17 真好玩</option>
  </select>

  <p>您觉得什么好玩：{{selected}}  </p>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
  var vm = new Vue({
            el: "#app",
            data: {
              selected: '',
            }
          }
  );
</script>
</body>
</html>

在这个例子中，我们使用了v-model指令来绑定select元素和selected数据属性，实现了双向数据绑定。当用户选择不同的选项时，selected的值会自动更新，视图中的文本也会相应地更新。

组件

组件是Vue.js中非常重要的概念，它允许我们将页面拆分成多个可复用的部分，每个部分都有自己的数据和逻辑。组件可以提高代码的可维护性和可复用性
组件可以通过vue.component()方法来定义

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

<div id="app">
  <ul>
    <my-component v-for="item in items" :key="item" :word="item"></my-component>
  </ul>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
  Vue.component("my-component", {
    props: ['word'],
    template: '<li>{{ word }}</li>'
  });

  var vm = new Vue({
    el: "#app",
    data: {
      items: ["remember11 真好玩", "ever17 真好玩"]
    }
  });
</script>
</body>
</html>

Vue.component()方法接受两个参数，第一个参数是组件的名称，第二个参数是一个对象，包含了组件的配置信息。在这个例子中，我们定义了一个名为my-component的组件，它接受一个名为word的属性，并在模板中显示这个属性的值。然后，我们在Vue实例中使用v-for指令来循环渲染组件，并将items数组中的每个元素作为word属性的值传递给组件。

Vue的生命周期

Vue实例的生命周期包括创建、挂载、更新和销毁四个阶段。每个阶段都有相应的事件钩子函数，可以在这些函数中执行一些特定的操作。

创建阶段：

  • beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。在这个阶段，实例的data和methods属性还没有被初始化。
  • created：在实例创建完成后调用，此时实例的data和methods属性已经被初始化，但是还没有开始编译模板。

挂载阶段：

  • beforeMount：在模板编译完成后，挂载之前调用。在这个阶段，模板已经被编译成渲染函数，但是还没有开始渲染DOM。
  • mounted：在模板挂载完成后调用，此时DOM已经被渲染，实例的$el属性指向了挂载的DOM元素。

更新阶段：

  • beforeUpdate：在数据更新之前调用，此时数据已经被更新，但是还没有开始重新渲染DOM。
  • updated：在数据更新完成后调用，此时DOM已经被重新渲染。

销毁阶段：

  • beforeDestroy：在实例销毁之前调用，此时实例仍然可以使用，但是它的$el属性已经被移除。
  • destroyed：在实例销毁完成后调用，此时实例已经被完全销毁，它的$el属性已经被移除。

使用生命周期钩子函数实现异步通信

首先我们需要创建一个data.json，用于表示我们要获取的数据

{
  "name": "维尔汀",
  "url": "https://www.bilibili.com/"
}

然后我们需要在我们的html页面中引入axios库，用于发送异步请求

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

现在我们在mounted钩子函数中发送异步请求，并将获取到的数据赋值给data中的info属性,并将获取的数据渲染到页面上

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

<div id="app">
<!-- 在页面中使用我们获取到的数据 -->
  <p>{{info.name}}</p>
  <a v-bind:href="info.url">点击进入哔哩哔哩</a>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    // 用于将我们从axios获取到的数据存入到data属性中
    data(){
      return {
        info: {
          name: null,
          url: null
        }
      }
    },
    // 钩子函数从data.json中异步获取数据并返回
    mounted(){
      axios.get('data.json').then(response => (this.info = response.data))
    }
  });
</script>
</body>
</html>

计算属性

在 Vue.js 中，计算属性（Computed Properties）是基于组件的响应式依赖进行缓存的属性。它们用于处理复杂的逻辑，并返回一个计算结果。计算属性的值会根据依赖的数据自动更新，且只有在依赖发生变化时才会重新计算，否则会直接使用缓存的值。
简单来说，计算属性相当于缓存，只有缓存中的属性变化了，计算属性才会重新计算一遍

简单使用：

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

<div id="app">
  <!-- 使用计算属性 -->
  当前时间：{{getTime}}
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

  var vm = new Vue({
    el: "#app",
    // 使用计算属性，返回当前时间，只有属性中的数据变化、刷新后，才会重新计算，可以节省开销
    computed:{
      getTime(){
        return new Date();
      }
    }
  });
</script>
</body>
</html>

slot插槽

插槽（Slot）是 Vue.js 中用于在组件中插入内容的机制。它允许我们在组件的模板中定义一个占位符，然后在组件的使用过程中，通过插槽传递内容到这个占位符中。

示例：

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

<div id="app">
  <contents>
<!--    匹配组件和插槽-->
    <first-slot slot="插槽1" :title="title"></first-slot>
    <second-slot slot="插槽2" v-for="item in items" :item="item"></second-slot>
  </contents>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  Vue.component("contents",{
      // 我们这里定义一个组件，其中设定两个插槽，这两个插槽我们之后可以插入其他组件
      template: "<div>\
              <slot name='插槽1'></slot>\
              <ul>\
                <slot name='插槽2'></slot>\
              </ul>\
              </div>"
  });
  // 这里定义其余两个组件，可以插入插槽
  Vue.component("firstSlot",{
    props: ["title"],
      template: "<div>{{title}}</div>"
  });
  Vue.component("secondSlot",{
    props: ["item"],
      template: "<li>{{item}}</li>"
  });

  var vm = new Vue({
    el: "#app",
    data: {
        title: "Vertin is so beautiful!",
        items: [
                "十四行诗",
                "十五行诗",
                "十六行诗"
        ]
    }
  });
</script>
</body>
</html>

在这个例子中，我们定义了一个组件contents,这个组件的模版中，我们在其中放置了两个插槽, 这个插槽我们可以设定它的名字，然后我们又编写了两个组件用于插入插槽中，在页面中，我们通过插槽的名字对应刚刚编写的插槽，从而实现了插槽的插入。

自定义事件分发

现在假设我们希望在页面的列表中每一项后面添加一个删除按钮，当用户按下这个按钮的时候，能够删除选定项
我们先来修改我们的页面：

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

<div id="app">
  <contents>
<!--    匹配组件和插槽-->
    <first-slot slot="插槽1" :title="title"></first-slot>
    <second-slot slot="插槽2" v-for="item in items" :item="item"></second-slot>
  </contents>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  Vue.component("contents",{
      // 我们这里定义一个组件，其中设定两个插槽，这两个插槽我们之后可以插入其他组件
      template: "<div>\
              <slot name='插槽1'></slot>\
              <ul>\
                <slot name='插槽2'></slot>\
              </ul>\
              </div>"
  });
  // 这里定义其余两个组件，可以插入插槽
  Vue.component("firstSlot",{
    props: ["title"],
      template: "<div>{{title}}</div>"
  });
  Vue.component("secondSlot",{
    props: ["item"],
      template: "<li>{{item}} <button @click=''>删除</button></li>"
  });

  var vm = new Vue({
    el: "#app",
    data: {
        title: "Vertin is so beautiful!",
        items: [
                "十四行诗",
                "十五行诗",
                "十六行诗"
        ]
    },
    methods:{
        removeElement: function(index){
            this.items.splice(index,1);
        }
    }
  });
</script>
</body>
</html>

在现在这个页面中，我们为每一个列表项后面都添加了一个删除按钮，并且在Vue实例中，我们添加了一个用于删除列表中指定索引的方法，那么现在问题来了，我们应该如何将这个方法传递给子组件呢？答案就是使用v-on指令，我们可以在子组件中添加一个点击事件，将这个方法作为参数传递给子组件，然后在子组件中调用这个方法，这样就可以实现删除列表项的功能了。

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

<div id="app">
  <contents>
<!--    匹配组件和插槽-->
    <first-slot slot="插槽1" :title="title"></first-slot>
    <second-slot slot="插槽2" v-for="(item,index) in items" :item="item" :index="index"
                 v-on:myremove="removeElement" ></second-slot>
  </contents>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  Vue.component("contents",{
      // 我们这里定义一个组件，其中设定两个插槽，这两个插槽我们之后可以插入其他组件
      template: "<div>\
              <slot name='插槽1'></slot>\
              <ul>\
                <slot name='插槽2'></slot>\
              </ul>\
              </div>"
  });
  // 这里定义其余两个组件，可以插入插槽
  Vue.component("firstSlot",{
    props: ["title"],
      template: "<div>{{title}}</div>"
  });
  Vue.component("secondSlot",{
    props: ["item", "index"],
      template: "<li>{{item}} <button @click='removeItem'>删除</button></li>",
      methods: {
        removeItem: function (index) {
            this.$emit("myremove",index);
        }
      }
  });

  var vm = new Vue({
    el: "#app",
    data: {
        title: "Vertin is so beautiful!",
        items: [
                "十四行诗",
                "十五行诗",
                "十六行诗"
        ]
    },
    methods:{
        removeElement: function(index){
            this.items.splice(index,1);
        }
    }
  });
</script>
</body>
</html>

注意看，在现在这个页面中，我们在视图的第二个组件中使用v-on:myremove="removeElement"自定义了一个myremove事件，这个事件绑定了我们在Vue实例中的removeElement方法，现在我们就可以在第二个组件内部调用这个方法了，通过this.$emit(“myremove”,index)，我们就可以触发这个事件，并且将index作为参数传递过去，这样我们就可以在第二个组件内部调用Vue实例中的方法了。

第一个Vue-cli项目

什么是Vue-cli？

Vue-cli是Vue.js官方提供的脚手架工具，它可以帮助我们快速搭建Vue.js项目，并且提供了很多有用的功能，比如热更新、打包、测试等等。

安装环境

首先我们需要安装Node.js
官网：https://www.nodejs.com.cn/download.html
安装Windows安装包64位版本即可
然后安装时一直下一步即可
在cmd命令行中输入node -v，如果出现版本号则说明安装成功

为了能够加速我们后面的下载，我们需要先安装Node.js的淘宝镜像加速器(cnpm),在cmd命令行中输入以下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后，我们就可以使用cnpm命令来代替npm命令了,这样可以加速我们以后的下载

现在我们可以开始安装vue-cli了，在cmd命令行中输入以下命令：

cnpm install -g vue-cli

创建项目

首先我们需要创建一个文件夹，然后在cmd命令行中进入这个文件夹，输入以下命令：

vue init webpack myvue

其中my-project是我们项目的名称，这个命令会自动帮我们创建一个名为my-project的项目，并且会自动安装一些必要的依赖。
在选项中，我们只需要选择默认的选项即可，不需要进行修改，即一路回车并选择no即可。

运行项目

在cmd命令行中进入项目目录，输入以下命令：

cd myvue
cnpm install
npm run dev

这样我们的项目就可以运行了，我们可以在浏览器中输入http://localhost:8080/来查看我们的项目。

同时，我们可以使用IDEA打开我们的项目目录，即可在IDEA中运行和编辑我们的项目了。
此时，我们就可以通过在IDEA中的终端窗口中输入npm run dev来运行我们的项目了。

webpack学习及使用

什么是webpack？

webpack是一个前端模块打包工具，它可以将我们的代码打包成一个或多个文件，并且可以处理我们的代码中的依赖关系，比如我们的代码中使用了某个模块，webpack会自动帮我们找到这个模块，并且将其打包到我们的代码中；同时webpack也可以将我们写的基于es6的代码转换为基于es5的代码，这样就可以在浏览器中运行了(因为有的浏览器不支持es6的语法)。

安装webpack

在cmd命令行中输入以下命令：

npm install webpack -g
npm install webpack-cli -g

这样我们就可以全局安装webpack了。

使用webpack

首先我们先建一个新的目录，然后通过IDEA打开这个目录。

然后，我们在项目中创建一个modules的文件夹,在其中创建一个hello.js的文件，内容如下：

// 暴露一个方法
exports.sayHi = function() {
    document.write("<h1>Hello vue!</h1>");
}

在这个文件中，我们暴露了一个函数，用于之后其他文件的调用

然后我们继续在modules文件夹中创建一个main.js的文件，内容如下：

// 接收我们刚刚写的对象
 var hello = require("./hello");
// 使用对象的方法
hello.sayHi();

在这个文件中，我们引入了刚刚写的hello.js文件，并且调用了其中的方法。

然后我们在项目的根目录下创建一个webpack.config.js的文件，内容如下：

module.exports = {
    entry: './modules/index.js',
    output: {
        filename: './js/bundle.js'
    }
}

在这个文件中，我们配置了webpack的入口文件和输出文件。

然后我们在IDEA的终端中输入以下命令：

webpack

这样就可以将我们的代码打包成一个文件了。

然后我们创建一个index.html的文件，并在其中引入我们的打包文件即可显示我们的内容了

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

<!--导入生成的打包文件-->
<script src="dist/js/bundle.js"></script>
</body>
</html>

vue-router路由的使用

什么是vue-router?

vue-router是Vue.js官方的路由管理器。它可以帮助我们实现单页面应用程序（SPA）的路由功能。
下面我们来演示一下如何使用vue-router。
首先我们先切换回我们之前写的myvue的项目，就是第一个vue-cli项目。

安装vue-router

我们在IDEA中通过npm来安装vue-router，命令如下：

npm install vue-router@3.6.5 --save-dev

然后我们需要编写要跳转的页面组件，在components文件夹中创建一个Content.vue的文件，内容如下：

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

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

<style scoped>

</style>

再创建一个MainPage.vue的文件，内容如下：

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

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

<style scoped>

</style>

然后我们需要创建一个router文件夹，并在其中创建一个index.js的文件，用于编写我们的路由配置，内容如下:

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

import Content from '../components/Content'
import main from '../components/MainPage.vue'
import MainPage from "../components/MainPage.vue";

// 安装使用路由
Vue.use(VueRouter);

// 配置导出路由
export default new VueRouter({
  routes: [
    {
      // 路由路径
      path: "/content",
      // 路由的命名
      name: "content",
      // 跳转的组件
      component: Content
    },
    {
      // 路由路径
      path: "/main",
      // 路由的命名
      name: "mainPage",
      // 跳转的组件
      component: MainPage
    }
  ]
})

然后，我们需要在main.js中引入路由，并使用路由，内容如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'  //自动扫描里面的路由配置index.js

Vue.config.productionTip = false

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

最后，我们需要在App.vue中使用我们配置好的路由跳转，内容如下：

<template>
  <div id="app">
    <div>network page</div>
<!--    跳转的视图连接-->
    <router-link to="/content">内容页</router-link>
    <router-link to="/main">主页</router-link>
<!--    跳转的视图展示-->
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

这样，我们就可以在单页面内完成路由组件的跳转了。

Element UI使用

什么是Element UI?

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element UI 是基于 Vue.js 2.0 的一个组件库，它提供了一套完整的 UI 组件，可以帮助开发者快速构建现代化的 Web 应用程序。Element UI 的组件库非常丰富，包括表单、表格、按钮、对话框、导航栏等，几乎涵盖了所有常见的 UI 组件。Element UI 的组件库都是基于 Vue.js 的，因此可以非常方便地与 Vue.js 项目集成。

简单使用

配置环境

首先我们先建立一个文件夹，并在cmd中进入这个文件夹，然后输入以下命令初始化一个项目：

vue init webpack hello-vue

然后我们需要安装需要的依赖：

# 进入项目目录
cd hello-vue

# 安装 vue-router
npm install vue-router --save-dev

# 安装 Element UI
npm install element-ui -S

# 安装依赖
npm install

# 安装SASS 加载器
cnpm install sass-loader sass --save-dev

# 启动测试
npm run dev

简单使用Element UI

然后我们在IDEA中打开这个项目，在IDEA中编写后续代码。
我们先在src目录下创建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="dialogVisible"
      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: " 密码不可为空 ", trigger: '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>

以及Main.vue

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

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

<style scoped>

</style>

在Login.vue中，我们使用了Element UI的表单组件，并为其绑定了验证规则。在methods中，我们使用了this. r e f s 来获取表单的引用，并调用 v a l i d a t e 方法进行表单验证。如果验证通过，则使用 t h i s . refs来获取表单的引用，并调用validate方法进行表单验证。如果验证通过，则使用this. refs来获取表单的引用，并调用validate方法进行表单验证。如果验证通过，则使用this.router.push方法进行页面跳转；如果验证不通过，则显示对话框。

在Main.vue中，我们只是简单地显示了一个标题。

然后我们在src目录下创建一个router文件夹，并在其中创建一个index.js文件，用于配置路由。

import Vue from "vue";
import Router from 'vue-router'

import Main from '../views/Main.vue'
import Login from '../views/Login.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

在main.js中，我们需要将路由器添加到Vue实例中。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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.use(router);
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

然后我们就可以在App.vue中使用router-link来创建导航链接了。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

此时测试可能会出现兼容性的问题，我们需要在packet.json中将sass-loader的版本改为7.3.1，然后重新npm install。

现在我们就可以测试运行了，在浏览器中输入http://localhost:8080/#/login，就可以看到登录页面了。

在主页中添加不同组件

现在假设我们想在我们主页添加显示个人信息和个人列表这两个组件
首先，我们需要编写这两个组件:
在views文件夹下新建一个user文件夹，并在其中创建Profile.vue:

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

<template>
  <h1>用户列表</h1>
</template>

<style scoped>

</style>

List.vue:

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

<template>
  <h1>用户列表</h1>
</template>

<style scoped>

</style>

然后我们需要在router/index.js中添加这两个路由：

import Vue from "vue";
import Router from 'vue-router'

import Main from '../views/Main.vue'
import Login from '../views/Login.vue'

import UserProfile from '../views/user/Profile.vue'
import UserList from '../views/user/List.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      children:[
        {path: '/user/profile',component:UserProfile},
        {path: '/user/list',component:UserList},
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

现在我们就可以在Main.vue中添加这两个组件了：

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <router-link to="/user/profile">个人信息</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/user/list">用户列表</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
          <e1-menu-item-group>
            <el-menu-item index="2-1">分类管理</el-menu-item>
            <el-menu-item index="2-2">内容列表</el-menu-item>
          </e1-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right:15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>

    </el-container>
  </el-container>
</template>

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

<style scoped lang="scss">
.el-header {
  background-color: #048bd1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

通过 <router-link> 实现传递参数

现在我们希望在点击个人信息时，能够传递一个id的参数，然后在个人信息组件内显示这个id信息

首先我们需要修改Main页面的<router-link>,为其添加参数传递：

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <!-- 添加参数传递 -->
              <router-link :to="{name:'profile',params:{id:1}}">个人信息</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <router-link to="/user/list">用户列表</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
          <e1-menu-item-group>
            <el-menu-item index="2-1">分类管理</el-menu-item>
            <el-menu-item index="2-2">内容列表</el-menu-item>
          </e1-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right:15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>

    </el-container>
  </el-container>
</template>

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

<style scoped lang="scss">
.el-header {
  background-color: #048bd1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

然后我们需要改变一下路由的配置，通过路径获取id这个参数, 类似与restful风格

import Vue from "vue";
import Router from 'vue-router'

import Main from '../views/Main.vue'
import Login from '../views/Login.vue'

import UserProfile from '../views/user/Profile.vue'
import UserList from '../views/user/List.vue'
import profile from "../views/user/Profile.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      children:[
        {path: '/user/profile/:id',name:'profile',component:UserProfile, props:true},
        {path: '/user/list',component:UserList},
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

最后在Profile.vue中使用id参数

<script>

  export default {
    // 第二种传参方式
    props:['id'],
    name:"UserProfile",
  }
</script>

<template>
  <div>
    <h1>个人信息</h1>
    {{ $route.params.id }}
<!--    当我们使用props:true时可以直接接收并使用id参数-->
    {{id}}
  </div>

</template>

<style scoped>

</style>

这样我们就完成了传递id参数并使用的功能了。

使用路由钩子函数实现异步请求

首先我们需要安装axios：

 cnpm install axios -s

然后在main.js中使用axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

然后我们需要在static文件夹中放入一个data.json文件，文件内容如下：

{
  "name": "维尔汀",
  "url": "https://www.bilibili.com/"
}

然后我们需要修改我们的Profile.vue组件，使用路由钩子函数在路由前从data.json中获取数据

<script>

  export default {
    // 第二种传参方式
    props:['id'],
    name:"UserProfile",
    beforeRouteEnter:(to, from, next) =>{
      console.log("进入路由前执行")
      next(vm => {
        vm.getData(); // 进入路由前执行getData
      });
    },
    methods:{
      getData: function(){
        this.axios(
          {
            method:'get',
            url:'http://localhost:8081/static/data.json'
          }
        ).then(function (response) {
          console.log(response);
        });
      }
    }
  }
</script>

<template>
  <div>
    <h1>个人信息</h1>
    {{ $route.params.id }}
<!--    当我们使用props:true时可以直接接收并使用id参数-->
    {{id}}
  </div>

</template>

<style scoped>

</style>

然后我们就可以在浏览器中访问http://localhost:8081/#/user/profile/1，然后查看控制台，可以看到我们成功获取到了data.json中的数据。

其中可能会遇到Model parse failed:Unexpected token的问题，解决方法：
将packet.json中的axios依赖版本改为1.5.0: “axios”: “^1.5.0”
然后执行npm install axios@1.5.0 --save即可正常运行

笔记总结于视频：

https://www.bilibili.com/video/BV18E411a7mC?vd_source=16bf0c507e4a78c3ca31a05dff1bee4e&spm_id_from=333.788.videopod.episodes

相关文章：

  • qt+opengl 加载三维obj文件
  • 23.linux下电脑健康检查
  • 【NLP 47、实践 ⑫ 通过mask和loss计算实现SFT】
  • TensorRT怎么实现加速的
  • 001初识多视图几何
  • 虚拟机（一）：Java 篇
  • 与Aspose.pdf类似的jar库分享
  • C++三大特性之继承
  • 数字化转型的点线面体：从局部突破到生态构建
  • 2181、合并零之间的节点
  • GD32 ISP下载程序（串口烧录）
  • 31天Python入门——第14天:异常处理
  • leetcode 2829. k-avoiding 数组的最小总和 中等
  • 单例模式（Singleton Pattern）
  • ubuntu下终端打不开的排查思路和解决方法
  • 硬件基础--04_电场_电势_电势能
  • 解决centos部署的java项目上传文件成功后，访问403
  • SQL注入操作
  • EF Core 执行原生SQL语句
  • 大模型应用平台架构
  • 娱见 | 为了撕番而脱粉，内娱粉丝为何如此在乎番位
  • “五一”假期出入境人数达1089.6万人次，同比增长28.7%
  • 山东滕州一车辆撞向公交站台撞倒多人，肇事者被控制，案件已移交刑警
  • 景点变回监狱，特朗普下令重新启用“恶魔岛”
  • 韩国总统选举民调：共同民主党前党首李在明支持率超46%
  • 禅定佛的微笑，从樊锦诗提到过的那尊说起