Vue：前端体系、前后端分离【入门】

最新推荐文章于 2024-09-17 19:45:31 发布
最新推荐文章于 2024-09-17 19:45:31 发布
阅读量158 收藏
点赞数
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44799103/article/details/130976927
版权

零、初识

1. 概述

vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合。
Vue HTML + CSS + JS
Soc 关注点分离原则

2. 前端知识体系

2.1 前端三要素

HTML（结构）：超文本标记语言，决定网页的结构和内容；
CSS（表现）：层叠样式表，设定网页的表现样式；
JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是有浏览器解释运行，用于控制网页的行为。

2.2 HTML

2.3 表现层CSS

CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备语法支持。
缺陷：

  • 语法不够强大，比如无法嵌套书写，倒置模块化开发中需要书写很多重复的选择器；
  • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
    导致在工作中无端增加了很多工作量。为解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。

常用的CSS预处理器有哪些

  • SASS：基于Ruby，通过服务器端处理，功能强大。解析效率高。需学习Ruby语言，上手难度高于LESS。
  • LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，效率解析也低于SASS，但在实际开发中足够了，所以后台人员有需要的话，建议LESS。

2.4 行为层（JavaScript）

Native原生JS开发
原生JS开发，也就是按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持。

  • ES3
  • ES4（内部，未正式发布）
  • ES5（全浏览器支持）
  • ES6（常用，主流版本：webpack打包成为ES5支持！）
    ES789 逐步增加新特性。

3. 前端开发人员使用的编辑器

Vscode
Hbuilder
Sublime
WebStrom

一、第一个Vue程序

IDEA可以安装Vue的插件
注意：Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的ECMAScript5特性。但它支持所有兼容ECMASCript5的浏览器。

下载地址

  • 开发版本
    • 包含完整的警告和调试模式：https://vuejs.org/js/vue.js
    • 删除了警告，30.96KB min + gzip：https://vuejs.org/js/vue.min.js
  • CDN
	- <script src="https://cdn.jsdeliver.net/npm/vue@2.5.21/dist/vue.js"></script>
	- <script src="https://cdn.jsdeliver.net/npm/vpm/vue@2.5.21/dist/vue.min.js"></script>

代码编写

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

1. 创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // Model : 数据
        data:{
            message: "Hello, Vue!"
        }
    });
</script>
</body>
</html>

什么是MVVM

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

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

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互
    在这里插入图片描述
    MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有vue.js，AngularJS等。

为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的就是分离视图和模型，有几大好处：

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

Vue

Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（vue-router, vue-resource, vuex）或既有项目整合。
Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定。
Vue有7个常用属性

二、Vue基本语法

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

v-bind

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

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

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

如果再次打开浏览器的JavaSCript控制台，输入app.message = “新信息”，就会再一次看到这个绑定了title特性的HTML已经进行了更新。

v-if, v-else

<!--view层 模板-->
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            ok: true
        }
    });
</script>

v-else-if

<!--view层 模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
</div>

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

v-for

<!--view层 模板-->
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items:[
                {message: 'laomao'},
                {message: 'piaobo'}
            ]
        }
    });
</script>

v-on

<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "laomao"
        },
        methods: { // 方法必须定义在Vue 的 Method对象中, v-on: 事件
            sayHi: function (event) {
                alert(this.message)
            }
        }
    });
</script>

三、Vue：表单双向绑定、组件

什么是双向绑定

Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也发生变化；视图发生变化时，数据也同步变化。

数据双向绑定，一定是对于UI空间来说的，非UI空间不会设计数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也使单向的，这就会和双向数据绑定有冲突。

<!--view层 模板-->
<div id="app">
    输入的文本：<input type="text" v-model="message"> {{message}}
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: '123'
        }
    });
</script>

单选框

<!--view层 模板-->
<div id="app">
    性别：
    <input type="radio" name="sex" value="男" v-model="laomao"> 男
    <input type="radio" name="sex" value="女" v-model="laomao"> 女
    {{laomao}}
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            laomao: ''
        }
    });
</script>

下拉框

<!--view层 模板-->
<div id="app">
    下拉框:
    <select v-mdoel="selected">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value:{{selected}}</span>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            selected: ''
        }
    });
</script>

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。应该通过JavaScript在组件的data选项中声明初始值。

什么是Vue组件【自定义标签】

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

在这里插入图片描述

<!--view层 模板-->
<div id="app">
    <laomao v-for="item in items" v-bind:mao="item"></laomao>
</div>

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

    // 定义一个Vue组件component
    Vue.component("laomao",{
        props: ['mao'],
        template: '<li>{{mao}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data:{
            items: ["Java", "Linux", "前端"]
        }
    });
</script>

四、Vue：Axios异步通信【网络通信】

什么是Axios

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

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

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

为什么要使用Axios

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

第一个Axios应用程序

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染更新渲染、卸载等一系列过程，我们称为Vue的生命周期。通俗说就是Vue实例从创建带销毁的过程。

在Vue的生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

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

    <!--v-clock:解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>

    <a v-bind:href="info.url">点我</a>
</div>

<!--导入 js 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        data(){
            return {
                // 请求的返回参数合适，必须和Json字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        mounted(){ //钩子函数
            axios.get('../data.json').then(response=>(console.log(this.info=response.data)))
        }
    });
</script>

</body>
</html>

五、计算属性、内容分发、自定义事件

什么是计算属性

计算属性的终端突出在属性两个字桑，这里的计算就是一个函数；它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已。

<div id="vue">
    <p>currentTime1 {{currentTime1()}}</p>
</div>

<!--导入 js 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#vue",
        data:{
            message: "Hello, laomao."
        },
        methods:{
            currentTime1: function () {
                return Date.now(); // 返回当前时间戳
            }
        },
        computed: { // 计算属性： methods， computed 方法名不能重名, 重名之后methods的优先级会高
            currentTime1: function () {
                return Data.now(); // 返回当前时间戳
            }
        }
    });
</script>

notes：

  1. methods：定义方法，调用方法使用currentTime1()， 需要带括号；
  2. computed： 定义计算属性，调用属性使用currentTime2，不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化；
  3. 如果在方法中的值发生了变化，则缓存会刷新！

六、插槽slot

<!--view层 模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.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>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
       el: "#app",
        data:{
           title: "冲大厂啊",
           todoItems:['百度', '阿里', '字节', '腾讯', '360']
        }
    });

</script>

效果展示：
在这里插入图片描述

七、自定义时间内容分发

<!--view层 模板-->
<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" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.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>'
    });
    Vue.component("todo-items",{
        props: ['item', 'index'],
        // 只能绑定当前组件的方法
        template: '<li>{{index}}--{{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit() 自定义时间内容分发
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
       el: "#app",
        data:{
           title: "冲大厂啊",
           todoItems:['百度', '阿里', '字节', '腾讯', '360']
        },
        methods: {
           removeItems: function (index) {
               console.log("删除了"+this.todoItems[index]+"OK");
               this.todoItems.splice(index, 1);    // 一次删除一个元素
           }
        }
    });

</script>

效果展示：
在这里插入图片描述

在这里插入图片描述

Vue 入门小结

核心：数据驱动，组件化
优点：借鉴了AngulaJS的模块化开发 和 React 的虚拟Dom，虚拟Dom就是把Dom操作放在内存中执行；

常用属性：

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

组件化：

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

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

Vue的开发都是基于NodeJS，实际开发采用vue-cli脚手架开发，vue-router路由，Vuex做状态管理；Vue UI界面，我们一般使用 ElementUI（饿了么出品）或者ICE（阿里巴巴出品），来快速搭建前端项目。

漂泊老猫
关注
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
天罡gg的专栏
03-07 1万+
如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？ 做Java开发都应该学习哪些框架技术？ 我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！ 那今天就给大家带来一门专栏课程，由 天罡gg 和 经海路大白狗 两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！
前端框架vue基础
lyyibaobao的博客
06-19 1782
typora-copy-images-to: E:\md文件\图片 前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language）决定网页的结构和内容 CSS（表现）：层叠样式表（Cascading Style Sheets ）设定网页表现样式 JavaScript（行为）：是一种弱类型脚本语言，启源代码不需要编译，而是由浏览器解析运行，用于控制行为 结构层（HTML） 表现层（CSS） css层叠样式表是一门标记语言，并不是编程语言，因此不可以定义变量，可以引用.
Vue：前端体系、前后端分离
adsdaas的博客
03-18 4754
1、概述     Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目整合。 &n...
vue快速入门
weixin_74009895的博客
08-29 1528
vue快速入门
vue前端
gjq2267787274的专栏
09-20 184
1.element-ui http://element-ui.cn/#/zh-CN/component/installation 2.基于Electron桌面应用开发-spring boot + vue + element-ui全栈开发入门 https://www.cnblogs.com/GoodHelper/p/8527523.html 3.基于element-ui的框架（一）环境搭建 ...
前端:vue
最新发布
weixin_70532458的博客
09-17 723
Vue.js 是一个开源的前端 JavaScript 框架，由尤雨溪（Evan You）于 2014 年创建。它主要用于构建用户界面和单页应用（SPA）。Vue.js 的设计哲学是简单易用，它通过响应式数据绑定和组合的视图组件，使得开发者能够以声明式的方式来编写界面。1. 最直接的代码数量:vue只需要70行,而常规代码110行,代码数量可以反映出那种方法的效率高2. 相比较起来,vue的使用更加简单,不需要对于参数和方法的调用也更加便捷。
Vue（前端框架）
热门推荐
qq_42925518的博客
07-28 1万+
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3HiAnlx-1658970670003)(\java\8.框架\VUE\vue\Vue的介绍.PNG)]H
python flask+vue3+sqlite 前后端分离 简单个人博客网站项目源码
06-05
flask+vue3+sqlite 前后端分离 简单个人博客网站项目 Vue3采用新的组件式API开发，axios后端接口请求。 flask采用sqlalchemy管理数据库，采用token验证登陆信息。 已实现文章列表显示，文章内容markdown渲染，文章...
vue-nodejs-elementUI-mysql-express-demo::star:vue+nodejs前后端分离项目，学习使用，包含基本的入门操作。包括从开始创建项目到最后部署的实现过程及过程中遇到的一些问题整理
05-30
vue+nodejs前后端分离项目，学习使用，包含基本的入门操作。包括从开始创建项目到最后部署的实现过程及过程中遇到的一些问题整理。 项目预览地址： 评论讨论地址： 数据库地址：express-demo/doc/demo2.sql MySQL...
基于SpringBoot+Vue实现一个前后端分离的在线教育平台源码（含前端+后端）.zip
07-01
基于SpringBoot+Vue实现一个前后端分离的在线教育平台源码（含前端+后端）.zip基于SpringBoot+Vue实现一个前后端分离的在线教育平台源码（含前端+后端）.zip基于SpringBoot+Vue实现一个前后端分离的在线教育平台源码...
vue前端项目架构（vue）
03-29
此项目集成了vue，vue-cli，axios（进行了二次封装），element-ui，router
前端-Vue.js
qq_46112274的博客
05-28 841
前端-Vue.js1、介绍1.1、什么是vue.js1.2、Vue入门程序1.2.1、创建文件夹vue1.2.2、在vue官网下载vue.min.js文件1.2.3、下载完成1.2.4、将vue.min.js引入项目文件夹1.2.5、创建 hello.html，引入vue.min.js1.2.6、第一个vue程序：1.2.7、运行1.3、创建vue代码片段，方便以后使用1.3.1、设置存放代码片段的文件名vue-html.code-snippets1.3.2、复制下方代码到vue-html.code-sni
前端-Vue入门
长安三万里
07-21 220
想必在入门前端三剑客HTML、CSS、JavaScript，熟悉DOM&BOM及ES6后，大家已经能够开始自己搭建网页了，那大概率逃不过这个前端框架——Vue3.0！Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
用Vue写前端
随风而欲的博客
12-17 3589
1，这里是在前后端分离的情况写用Vue写的有关购物的前端。 链接：https://pan.baidu.com/s/1y1ULewapOGrzOwp2ZCSeVQ 提取码：cqln
初学vue3+node搭建前后分离项目框架
qq_39156660的博客
06-20 659
前端这部分基础目录框架及package.json附到结尾，给同学们看一下，可以先创建基础框架练习，将数据写成mock形式把菜单等效果做出来。本座还没想好如何讲解后端，待我想想。
Vue 的前端架构
qt的博客
02-06 651
本文几乎就是一篇软件设计文档。Vue 中后台项目可能遇到的问题几乎都覆盖了，并且提供了详尽合理的解决方法 1.分解需求 技术栈 考虑到后续招人和现有人员的技术栈，选择 Vue 作为框架。 公司主要业务是 GIS 和 BIM，通常开发一些中大型的系统，所以 vue-router 和 vuex 都是必不可少的。 放弃了 Element UI 选择了 Ant Design Vue（最近 Element 好像复活了，麻蛋）。 工具库选择 lodash。 建立脚手架 搭建 NPM 私服。 使用 Node 环境开
Vue 前端开发
weixin_41299062的博客
03-14 3889
Vue前端开发基础
web前端框架（Vue.js）
qq_52158340的博客
12-27 503
一.Vue.js简介 1. Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。<信息来源：vue 官网> 2.作者：尤雨溪 3.作用 Vue.js 框架的作用主要注重动态的构建用户界面，前端工程化和模块化
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值