CSDN专家-微编程的博客

技术栈：vue.js+Element UI+node.js+socket.io+mysql。vue.js+node.js+mysql在线聊天室源码。

通过上一节，我们学习了vue脚手架的相关概念以及构建过程，那么开始我们的前后端项目吧Vue-CLI构建前后端分离项目1.项目环境初始化1.安装 axios vue-axios（记得执行命令要进入项目里面执行哦，否则就会报错）E:\ideaProject\vue-cli-test>npm install --save axios vue-axios2.main.js中引入相关库 import axios from 'axios'import VueAxios from..

Vue-CLI 基本使用命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）Vue-CLI是由Vue提供的一个官方CLI又称Vue脚手架，是一个基于Vue.js进行快速开发的工具，能够自动创建项目必须的项目结构、文件模板和运行环境。通过 vue-cli 实现的交互式的项目脚手架。一个运行时依赖 (vue-cli-se

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。语法：router.push(location, onComplete?, onAbort?)注意：在 Vue 实例内部，你可以通过 router访问路由实例。因此你可以调用this.router 访问路由实例。因此你可以调用 this.router访问路由实例。因此你可以调用this.router.push。声明式编程式< router-link :to="…">

嵌套路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。当我们路由到某一个组件后，还经常需要在该组件中继续路由到其子组件，这就需要使用Vue的嵌套路由。比如：当我们路由到登录组件后，又分为手机验证码登录和 账户名密码登录 2个子组件。语法：const 子组件 = { template:"子组件标签"}const 父组件 = { tempalate:` <router-link to="/父组件路径/子组件的路径">链接1</router-link&g

路由解决的问题什么是路由（这里不要死抠字眼，尝试从字面上理解，只是一个名词而已，重点是理解名词代表的技术解决什么问题）？生活中最能体现路由功能的是路由器，路由器的作用：互联网中的计算机，必须要通过路由器根据目标机器ip地址，将数据转发到目标机器。路由的作用：根据请求的地址，将请求转发到匹配的组件上。后端路由传统的网站大多数是多页面的，当我们点击一个超链接时，请求发送到服务端，由服务端根据请求路径匹配到不同的Controller，进行各种操作，最终将html或数据返回给前端。当然，目前绝大多数的网站都

组件的嵌套在Vue的设计中，一切都可以看作组件。整个页面可以看作是一个根组件，内部的各块组件可以看作子组件。组件之间自然的会发生嵌套关系。接下来，我们看一下组件嵌套的示例：<div id="app"> <my-table></my-table></div><template id="table-head"> <thead> <tr> <th>

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以为了提高代码复用，我们会把页面的可复用部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。第1个组件案例有如下需求：在页面上要定义多个记录点击次数的按钮，我们使用之前的所学，可以这么做：<div id="app"> <button @click="increment1">你点了我{.

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板、销毁等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。生命周期图示下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这些函数在生命周期的不同阶段自动触发执行，这给了.

计算属性在插值表达式中可以直接使用js表达式，这是非常方便的。但是如果表达式的内容很复杂，就会影响代码可读性，而且后期维护起来也不方便，例如下面的场景：需要统计多个商品的总价。代码如下：<div id="app"> <h2>总价：{{products.reduce((total,p)=>{return total+p.price*p.count;},0)}}</h2></div><script> const vm =

事件绑定：v-on指令 5.1 基本使用 在Vue中通过 v-on 指令给页面元素绑定事件。 语法：

v-model简介之前数据绑定都是单向绑定，数据影响了视图渲染，但是反过来就不行（视图的变化不会影响模型数据）,而对于表单中的控件而言，我们需要数据的绑定是双向的，即：模型数据的变化会影响视图，同时视图发生变化也会同步到模型数据。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。既然是双向绑定，一定是在视图中可以修改数据的组件，这样就限定了视图的元素类型。目前v-model的可使用元素有：inputradiocheck...

插值表达式 数据绑定最常见的形式就是使用 {{值}} （双大括号）的文本插值： <div id="app"> <h1>{{msg}}</h1> </div> <script> const vm = new Vue({ el:"#app", data:{msg:"hello vue" } }) </script>说明：{{}}中通常是变量，但也可以是表达式（比如 a+b）、有返回值的函数调用。

1 Vue简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的JavaScript框架。封装了原生的DOM操 作，无需进行任何手动的DOM编码即可完成页面数据的渲染。 MVVM模式 前端页面开发需要解决的核心问题是：数据（模型）和页面（视图）的绑定问题。如何将数据展示到页 面中，以及当页面的数据发生变化时，如何同步变化到数据？ 传统的DOM操作： 手动编码将Model中的数据绑定到View上； //dom对象.属性=数据 当View的发生变化时，也