ES6和Vue系列

最新推荐文章于 2024-08-15 16:00:54 发布
最新推荐文章于 2024-08-15 16:00:54 发布
阅读量120 收藏
点赞数
分类专栏： springboot基础学习 文章标签： es6 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53219882/article/details/131515846
版权
本文介绍了如何运行一个基于ES6和Vue的market项目，包括下载源码、安装依赖、启动项目以及在浏览器中测试。同时，文章探讨了Vue作为流行前端框架的特点，如响应式数据绑定和组件化，以及Vue3.0的生态发展，包括Element-Plus等UI组件库对Vue3.0的支持。此外，还展示了Vue项目的创建、项目结构和组件的使用方法，包括选项式API和组合式API的示例。
摘要由CSDN通过智能技术生成

ES6和Vue系列

market项目的运行

目标：运行我们的前端项目

运行前端项目的的步骤：

（1）下载项目源码

比如github上面等等。

这里解压提供的ui（前端）项目到一个位置，

将项目文件夹改名为market-frontend，也放到marketproject中，便于管理。

（2）安装项目依赖

npm install

（3）启动项目

看前端项目首先看package.json，看里面的scripts（运行脚本），找到运行的脚本命令

npm run serve

运行效果：

 DONE  Compiled successfully in 26105ms                                                                                                           09:34:06


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://10.25.191.44:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

（4）浏览器打开测试

http://localhost:8080/

Vue

Vue生态和架构

Vue 作为当下最为流行的前端开发框架之一，使用它可以快速构建企业级的 Web 应用，更因其出色的性能表现，使得众多互联网公司和开发人员对它格外地青睐。Vue 3.0 正式版本已上线半年有余，在 Vue 发布 3.0 之初，Vue 3.0 的周边生态，还不算健全，如路由插件 Vue-Router、状态管理插件 Vuex、各大组件库的 Vue 3.0 版本都还处以 beta 版本，甚至有些组件库都还没有更新，这让广大 Vue 使用者们很难去将自己的项目平稳的迁移至 Vue 3.0。

随着时间的推移，Vue 的周边插件开始升级为正式版，几大知名的 UI 组件库也都度过的阵痛期，纷纷推出了 Vue 3.0 版本，如 Element-Plus、Ant Design of Vue、Vant 等等，都是业界比较知名的 UI 组件库，它们作为先驱，为 Vue 生态作出的贡献有目共睹，在此也希望大家能一起为 Vue 的生态添砖加瓦。

前后端分离：https://juejin.cn/book/6844733826191589390

认识VUE3

中文官方站：

https://cn.vuejs.org/

https://v3.cn.vuejs.org/

当前版本：v3.2.31

dom和虚拟dom区别：

库和框架的区别：框架是半成品，库是单一功能的成品。框架一般是由多个库组成的。

VUE是一套用于构建用户界面的渐进式框架。

渐进式：从简单到复杂，灵活性强。

VUE两大核心：

  • 响应式的数据绑定：数据双向绑定，无需关心dom操作，只专心数据操作。
  • 可组合的视图组件：按照功能将视图切分为若干基础单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试。（可复用的可以做成组件）

两套Api风格：

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。

选项式 API (Options API)

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组合式 API (Composition API):

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

第一个vue的项目的创建和项目结构

第一步：初始化一个vue的项目：

找一个文件夹，用来存放项目文件

第二步：安装依赖，运行项目

  cd vuedemo
  # 安装依赖模块
  npm install
  #运行
  npm run dev

在这里插入图片描述

第三步：用vsc打开项目查看项目结构

在这里插入图片描述

后面写代码主要在src下面写。

vue脚手架项目的程序执行流程

现在的项目是vue（前端框架）提供的一个脚手架的项目，你基于这个脚手架进行开发。

程序访问的入口是：index.html

在这里插入图片描述

main.js
在这里插入图片描述

app.vue：可以认为是第一个主页面

页面的基本组成部分：

<!-- 视图模版：类似于html效果，展示用的 :必须有的-->
<template>
  hello
</template>

<!-- vue写js的脚本的地方，这里是组合式api ：和模版必须有一个-->
<script setup>

</script>

<!-- 页面样式： scoped表示定义的样式只适用于当前页面；如果不加scoped样式全局有效。可选的可选的-->
<style scoped>

</style>

父组件调用子组件的方式：
在这里插入图片描述

步骤：

第一步：引入组件

第1.5步（如果不用组合式api，用选项api）：还需要需要定义组件

第二步：页面上使用组件标签就行了。

下面我们自定义一个子组件：

components/MyHelloWorld.vue

<!-- 视图模版：类似于html效果，展示用的 :必须有的-->
<template>
    我是子组件
  </template>
  
  <!-- vue写js的脚本的地方，这里是组合式api ：可选-->
  <script setup>
  
  </script>
  
  <!-- 页面样式： scoped表示定义的样式只适用于当前页面；如果不加scoped样式全局有效。可选的可选的-->
  <style scoped>
  
  </style>

我们在MyApp.vue里面引入子组件：

<!-- 视图模版：类似于html效果，展示用的 :必须有的-->
<template>
  hello
  <div>
    <MyHelloWorld/>
    <my-helloWorld/>
  </div>
</template>

<!-- vue写js的脚本的地方，这里是组合式api ：可选-->
<script setup>
// 引入子组件
import MyHelloWorld from './components/MyHelloWorld.vue'


</script>

<!-- 页面样式： scoped表示定义的样式只适用于当前页面；如果不加scoped样式全局有效。可选的可选的-->
<style scoped>

</style>

我们在MyApp.vue里面引入子组件：

<!-- 视图模版：类似于html效果，展示用的 :必须有的-->
<template>
  hello
  <div>
    <MyHelloWorld/>
    <my-helloWorld/>
  </div>
</template>

<!-- vue写js的脚本的地方，这里是组合式api ：可选-->
<script setup>
// 引入子组件
import MyHelloWorld from './components/MyHelloWorld.vue'


</script>

<!-- 页面样式： scoped表示定义的样式只适用于当前页面；如果不加scoped样式全局有效。可选的可选的-->
<style scoped>

</style>

在这里插入图片描述

Vue的双向数据绑定（响应式）-选项式api

需求：在页面有输入框，还有展示数据的，还有按钮点击改变。。。

为了更好的测试，可以删除main.js中加载的全局样式。

// import './assets/main.css'

新建一个组件：

src\components\Demo1.vue

<template>
    <!-- 插值表达式，有点bug -->
    <!-- 数据绑定 -->
    {{ msg }}
    <button @click="changeMsg()">改变内容</button>
    <!-- 数据模型绑定指令，只针对表单元素 -->
    <input v-model="msg"/>
    <!-- 展示数据可以使用绑定文本指令 -->
    <div v-text="msg"></div>
    <!-- 展示html -->
    <div v-html="msg"></div>
    
  </template>
  
  <script>
    export default {
    // data() 返回的属性将会成为响应式的状态
    // 并且暴露在 `this` 上
    data() {
        return {
            // 定义的双向数据绑定的办理
            msg: '我是demo1'
        }
    },

    // methods 是一些用来更改状态与触发更新的函数
    // 它们可以在模板中作为事件处理器绑定
    methods: {
        changeMsg() {
            this.msg='我是改变了的demo1';
        }
    },

    // 生命周期钩子会在组件生命周期的各个不同阶段被调用
    // 例如这个函数就会在组件挂载完成后被调用
    mounted() {
        console.log(`The initial count is.`)
    }
    }
  
  </script>
  
  <style scoped>
  
  </style>

在MyApp.vue中引入组件：

<!-- 视图模版：类似于html效果，展示用的 :必须有的-->
<template>
  hello
  <div>
    <MyHelloWorld/>
    <my-helloWorld/>

  </div>
  <div>
    <Demo1/>
  </div>
</template>

<!-- vue写js的脚本的地方，这里是组合式api ：和模版必须有一个-->
<script setup>
// 引入子组件
import MyHelloWorld from './components/MyHelloWorld.vue';
import Demo1 from './components/Demo1.vue';


</script>

<!-- 页面样式： scoped表示定义的样式只适用于当前页面；如果不加scoped样式全局有效。可选的可选的-->
<style scoped>

</style>

将下述代码添加到html文件

// 子组件 Demo1
    const Demo1 = {
      template: `
        <div>
          <!-- 插值表达式，有点bug -->
          <!-- 数据绑定 -->
          {{ msg }}
          <button @click="changeMsg()">改变内容</button>
          <!-- 数据模型绑定指令，只针对表单元素 -->
          <input v-model="msg"/>
          <!-- 展示数据可以使用绑定文本指令 -->
          <div v-text="msg"></div>
          <!-- 展示html -->
          <div v-html="msg"></div>
        </div>
      `,
      data() {
        return {
          msg: '初始内容'
        };
      },
      methods: {
        changeMsg() {
          this.msg = '改变后的内容';
        }
      }
    };

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
</head>

<body>
  <div id="app">
    <my-hello-world>
      <template #default>
        <my-component></my-component>
      </template>
    </my-hello-world>
    <demo1></demo1> <!-- 添加了一个使用 Demo1 组件的例子 -->
  </div>

  <script src="https://unpkg.com/vue@3.2.6/dist/vue.global.js"></script>
  <script>
    // 子组件 MyHelloWorld
    const MyHelloWorld = {
      template: `
        <div>
          <h1>Hello World</h1>
          <slot></slot>
        </div>
      `
    };

    // 子组件 MyComponent
    const MyComponent = {
      template: `
        <div>
          我是子组件
        </div>
      `
    };

    // 子组件 Demo1
    const Demo1 = {
      template: `
        <div>
          <!-- 插值表达式，有点bug -->
          <!-- 数据绑定 -->
          {{ msg }}
          <button @click="changeMsg()">改变内容</button>
          <!-- 数据模型绑定指令，只针对表单元素 -->
          <input v-model="msg"/>
          <!-- 展示数据可以使用绑定文本指令 -->
          <div v-text="msg"></div>
          <!-- 展示html -->
          <div v-html="msg"></div>
        </div>
      `,
      data() {
        return {
          msg: '初始内容'
        };
      },
      methods: {
        changeMsg() {
          this.msg = '改变后的内容';
        }
      }
    };

    // 创建 Vue 应用
    const app = Vue.createApp({
      components: {
        'my-hello-world': MyHelloWorld,
        'my-component': MyComponent,
        'demo1': Demo1 // 将 Demo1 组件注册到应用中
      }
    });

    // 挂载应用
    app.mount('#app');
  </script>
</body>

</html>

在这里插入图片描述

Vue的双向数据绑定-组合式api

讲义选项式api的代码（src\components\Demo1.vue）复制一份改一改

src\components\Demo2.vue

<template>
    <!-- 插值表达式，有点bug -->
    <!-- 数据绑定 -->
    {{ msg }}
    <button @click="changeMsg()">改变内容</button>
    <!-- 数据模型绑定指令，只针对表单元素 -->
    <input v-model="msg"/>
    <!-- 展示数据可以使用绑定文本指令 -->
    <div v-text="msg"></div>
    <!-- 展示html -->
    <div v-html="msg"></div>
    
  </template>
  

  <script setup>
//   结构方式引入vue中的功能
        import { ref, onMounted } from 'vue'

        //----------消息业务

        // 响应式状态：将普通的值转成响应式的值
        const msg = ref('我是demo2');
        // const msg = '我是demo2';//不是响应式的

        // 用来修改状态、触发更新的函数
        function changeMsg() {
            //取得或修改响应式变量的值，必须用.value
            msg.value='我是改变了的demo2';
        }

        // 生命周期钩子
        onMounted(() => {
            console.log(`The initial count is .`)
        })
        //-----------其他业务，u


    </script>

  
  <style scoped>
  
  </style>

引入到MyApp.vue中

<!-- 视图模版：类似于html效果，展示用的 :必须有的-->
<template>
  hello
  <div>
    <MyHelloWorld/>
    <my-helloWorld/>

  </div>
  <div>
    <Demo1/>
  </div>
  <hr/>
  <div>
    <Demo2/>
  </div>
</template>

<!-- vue写js的脚本的地方，这里是组合式api ：和模版必须有一个-->
<script setup>
// 引入子组件
import MyHelloWorld from './components/MyHelloWorld.vue';
import Demo1 from './components/Demo1.vue';
import Demo2 from './components/Demo2.vue';


</script>

<!-- 页面样式： scoped表示定义的样式只适用于当前页面；如果不加scoped样式全局有效。可选的可选的-->
<style scoped>

</style>

Element Plus

简介

这是饿了吗团队的作品，还不错。

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

它基于vue帮你做好了很多的组件，基本上覆盖到大部分的的，你用了它，就基本上不用太关心样式了。

分两个版本：一个基于vue2的element ui，另一个是基于vue3的element plus。

在这里插入图片描述

新版的element plus官网：https://element-plus.org/zh-CN/#/zh-CN

快速使用

第一步：初始化项目

新初始化一个vue的项目:必须是vue3

npm init vue@latest

输入项目名element-plus-demo，typescript选yes，后面都回车。

在项目中安装element-plus

# NPM
npm install element-plus

第二步：全局引入element

src\main.ts

启动项目：

npm run dev

浏览器打开：

第三步：使用组件

使用方式：复制粘贴即可

修改App.vue：

<template>
   <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main

            <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

          </el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>


</script>



<style scoped>

</style>

vue-element-plus-admin

很多个人基于element plus做出一个接近成品的后台管理系统的前端。比如下面这个：

官网：http://element-plus-admin-doc.cn/

快速开始

第一步：下载源代码

从 GitHub 获取代码

第一步：下载源代码

从 GitHub 获取代码

# clone 代码
git clone https://github.com/kailong321200875/vue-element-plus-admin.git

#从 Gitee 获取代码-推荐

git clone https://gitee.com/kailong110120130/vue-element-plus-admin.git

第二步：将其解压到一个文件夹

在这里插入图片描述

此时可以用开发工具打开

第三步：安装pnpm

官方推荐用pnpm，

# 全局安装 pnpm
npm i -g pnpm

# 验证
pnpm -v

第四步：安装依赖

在项目根目录下，打开命令窗口执行，耐心等待安装完成即可

# 安装依赖
pnpm i

第五步：运行

当依赖安装完成后，执行以下命令即可启动项目：

pnpm run dev

浏览器打开

官网：http://element-plus-admin-doc.cn/
在这里插入图片描述

猪猪锤qqq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
ES、Kibana的安装
m0_69720862的博客
08-15 396
ES、Kibana的安装
ES的基本操作
m0_69720862的博客
08-19 634
ES的基本操作
尚医通（四）前端开发之ES | Vue
Knight
02-05 1033
尚医通（四）前端开发之ES | Vue
ES6 VUE学习笔记
ZhengXinMing1998的博客
06-27 175
1、ES5和6的一些新特性 1.1 let和const命令 ①let：与var类似，不过let专门定义的是局部变量。 ②const：用const定义的变量相当于常量，不能对其再进行修改。 2.2、解构表达式
esvu:esvu是您一站式购买ECMAScript的所有实现
04-13
埃斯武 esvu是您一站式购买ECMAScript的所有实现。 安装 $ npm i -g esvu 将~/.esvu/bin添加到您的PATH 。 用法 首次运行esvu ，它将询问您要安装哪些引擎。 首次运行后，运行esvu将更新您选择的引擎。 $ esvu更新所有已安装的引擎，或选择要安装的引擎 $ esvu install <engine>安装引擎<engine> $ esvu uninstall <engine>卸载<engine> $ esvu update <engine>更新<engine> 。 与install类似，但必须事先安装引擎。 如果您使用的是 ，则可以在安装引擎后运行eshost --configure-esvu ，以使eshost自动找到已安装的引擎。 引擎 二进制名称 darwin-x64 darwin-arm64 linux-ia32 li
前端基础 es6、vue
liangjiayy的博客
03-15 2461
前端技术类比 es6 vue
ES6和Vue的练习题
m0_60677470的博客
10-28 649
1、举例说明ES6和CommonJS的模块化机制，并说明他们的差异。 ES6 导入 import { firstName, lastName, a, post } from ‘./module1.js’; import { firstName as first, lastName as last } from ‘./module1.js’; 导入默认 import data from ‘./module1.js’ 导入全部 import * as data from ‘./module1.js’; 导入执
从es6到Vue入门
seacean2000的专栏
07-21 448
一个拼接怪叫Vue
ES6语法和vue基础
Rk的博客
03-13 837
一、使用yarn创建vue项目 1. 安装脚手架 yarn global add @vue/cli 2. 使用脚手架创建项目 vue create 项目名 || vue ui(图形化创建了解) 3. 启动项目 yarn serve 启动成功: //切换为淘宝镜像 yarn config set registry https://regi...
es6和vue关于遍历
qq_46019581的博客
07-02 275
es6的两种遍历 1.用in取代 for(let i in this.books) { fprice+=this.books[i].price*this.books[i].count } 2. for(let item of this.books) { //fprice+=this.books[i].price*this.books[i].count fprice+=item.price*item.count
前端Bootstrap+Es6+vue学习笔记
06-10
前端Bootstrap+Es6+vue学习笔记 Bootstrap 框架是一种基于 HTML/CSS/JS 的开源框架，由 Twitter 公司的两名技术工程师研发。其主要特点包括： 1. 跨设备跨浏览器：Bootstrap 支持多种设备和浏览器，可以在不同的...
基于node+egg.js+ES6+vue2 + vuex商城商店批发或零售pc管理端+微信小程序+后端服务源码.zip
02-20
基于node+egg.js+ES6+vue2 + vuex商城商店批发或零售pc管理端+微信小程序+后端服务源码.zip ## 技术栈 微信小程序：uni-app pc前端：vue2 + vuex + vue-router + vue-cli3 + element-ui + ES6 后端：node + ...
summarize-es6-vue-jquery:es6,vue双向数据绑定，jquery
05-07
本文将深入探讨三个关键概念：ES6（ECMAScript 2015），Vue.js以及jQuery，这些都是JavaScript的重要扩展和框架，对于现代Web应用的构建至关重要。 首先，我们来了解一下**ES6**，即ECMAScript 2015，这是...
config.js vue + es6
09-17
vue
ES6 Proxy实现Vue的变化检测问题
10-16
在Vue 2.x版本中，变化检测主要依赖于`Object.defineProperty`来实现，通过监听对象属性的getter和setter来检测变化。然而，这种方式存在一些局限性，比如无法检测到数组某些变异方法（如`push`、`pop`）的变更，...
vue学习笔记
躺赢啊
03-15 565
1、动态加载图片 src前有冒号
JavaScript基础——闭包
weixin_64294248的博客
08-14 1007
在JavaScript中，重复声明同一个变量会导致变量冲突，在JavaScript中，闭包是指封闭的执行环境，指的是一个函数能够记住并访问其创建时所在的作用域，即使这个函数在其原始作用域之外被执行，也就是说一个函数(内部)有权访问另一个(外部)函数作用域的变量。闭包通常由创建，即一个函数内部定义了另一个函数。外层函数可以返回内层函数，而内层函数可以访问外层函数的变量。
【vue讲解：es6导入导出语法、 vue-router简单使用、登录跳转案例、scoped的使用、elementui使用】
最新发布
weixin_50556117的博客
08-15 1003
vue讲解：es6导入导出语法、 vue-router简单使用、登录跳转案例、scoped的使用、elementui使用
【vue讲解：ref属性、动态组件、插槽、vue-cli创建项目、vue项目目录介绍、vue项目开发规范、es6导入导出语法】
weixin_50556117的博客
08-14 1376
vue讲解：ref属性、动态组件、插槽、vue-cli创建项目、vue项目目录介绍、vue项目开发规范、es6导入导出语法
jsp 引入 es6 和 vue
06-11
要在 JSP 中引入 ES6 和 Vue，你需要分别引入它们的相关文件。 首先，在 JSP 页面中引入 Vue 的 CDN： ``` <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ``` 然后，在你的 JavaScript 代码中...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值