什么是服务器端渲染(SSR)？Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。 缓存 虽然 Vue 的服务器端渲...
这次给大家带来vue的指定组件缓存使用方法，vue指定组件缓存使用的注意事项有哪些，下面就是实战案例，一起来看一下。keep-alive 简介keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。用法也很简单：<keep-alive><component><!-- 该组件将被缓存！ --></component> </keep-alive>propsinclude - 字符串或正则表达，只有匹配的组件会被缓存exclude - 字符串或正则表达式，任何匹配的组件都不会被缓...
使用Vue的小伙伴都会知道，vue的计算属性。这个是这个样子解释的，当某些依赖值发生变化的时候，其自身的值也会发生变化，与之先关的DOM也会发生变化，通常呢，这个计算属性里面都会有两个方法：get和set可以使用。 这里我只分析一下，如何关闭计算属性的缓存，获取最新数据，如下实例： HTML代码 <div id="mess"><div>{{exapm}}</div></div>JS代码：var vue2 = new Vue({el:"#mess",data:{sendmess:" i dhsjknkjvnkrenvr"},comput...
一，安装 npm install axios二，在http.js中引入 import axios from axios;三，定义http request 拦截器，添加数据请求公用信息 1 axios.interceptors.request.use( 2 config => { 3 // const token = getCookie(名称);注意使用的时候需要引入cookie方法，推荐js-cookie 4 //config.data = JSON.stringify(config.data); 5 let token = localStorage.token; 6 //let token = xxx; 7 ...
什么是组件： 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 写在前面： 今天要实现的功能是在 完善个人信息页面（vue）中添加手机验证码组件，当用户点击 手机选项时，弹出获取验证码组件，完成验证手机的功能：这里考虑到功能的复用，我把当前弹出手机验证码的操作...
前言这篇文章的代码片段位于 vue 的单文件组件中，即以 .vue 结尾的文件中，本文说明的只是一种实现方法，既不是唯一的方法也不是最好的方法，如果大家有更好的方法可以留言，大家进行讨论。第一步首先，一定要先定义变量：// app.vue <script>data () { return {// 定义 getDatagetData:{},// 定义自定义指令的绑定值ifUpdate:true} }第二步然后要使用 ajax 的话，要在 index.html 里引入 jquery，这样就可以全局使用了：// index...
这次给大家带来Vue怎么进行ajax请求公共方法，Vue进行ajax请求公共方法的注意事项有哪些，下面就是实战案例，一起来看一下。为了减少代码的冗余，小编给大家推荐一篇介绍了决定抽离出请求ajax的公共方法的文章，供大家参考。我使用了ES6语法，编写了这个方法。/*** @param type 请求类型，分为POST/GET* @param url 请求url* @param contentType* @param headers* @param data* @returns {Promise<any>}*/ajaxData: function (type...
1、使用input透明覆盖法将input的z-index设置为1以上的数字并覆盖到需点击的内容上，将input的样式opacity设置为0（即为透明度为0），这样通过绑定在input上的change事件触发 ----推荐 <p class="uploadImg"><input type="file" @change="picUpload($event)" accept="image/*" /> </p> .uploadImg {width: 100%;height: 1.46rem;position: relative;input {width: 1.46rem;height: 100%;z-index: 1;opacity: 0;position: absol...
在使用 vue 的开发中，我们有时会引用外部组件，包括 UI 组件（ElementUI、iview）。 当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。 但是在父组件中添加 scoped 之后，父组件的样式将不会渗透到子组件中，所以在父组件中书写子组件的样式是无效果的。 一、去掉 scoped 在父组件的 <style> 中去掉 scoped 后，父组件中可以书写子组件的样式，但是你会担心这样会污染全局样式。 【因为我们知道正确使用全局...
github demo: github地址 闲聊背景 本文主要以 vue-cli3 搭建的项目为例，来聊一下如何在项目中更优雅的使用 svg 。 众所周知， vue-cli3 已经推出很长一段时间了，大家可以感受一下 vue-cli3 带来的零配置体验。But，也相应带来了一些弊端，就是如归需要修改默认的 loader 时，会比较麻烦。 们接下来主要使用的就是上文中提到的 svg 的 use ，先上一张 vue-cli3 搭建的项目的目录，可以看到根目录下只保留了 public/ 以及 src/ ，...
本文为大家分享了vue使用echarts图表的方法，供大家参考，具体内容如下该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S或者使用国内的淘宝镜像： 安装npm install -g cnpm --registry=https://registry.npm.taobao.org使用cnpm install echarts -S创建图表 全局引入 main.js// 引入echarts import echarts from echartsVue.prototype.$echarts = echarts Hello.vue<div id="myChart" :style="{width: 300p...
在前后端分离开发模式下，前端项目通常在项目构建初期需要使用假数据以及相应的http请求来进行辅助开发，例如在后端接口还没开发好下，我们可以模拟http请求以及数据来进行前端的axios封装,接口设计，对http状态码处理等。前端模拟数据的方法有许多种，假如你熟悉node.js以及express框架，你可以快速地构建一个后端服务器来进行辅助开发，我本人也比较喜欢这种方式，这种方法在我日后的文章将会有介绍。如果你不熟悉node也没关系，...
这次给大家带来VUE中更改计算属性后select选中值不变的处理方法，处理VUE中更改计算属性后select选中值不变的注意事项有哪些，下面就是实战案例，一起来看一下。先上代码：//... <body><p id="qwe"><select v-model="selected"><option v-for="item in da" :value="item.value">{{item.value}}</option></select><span>{{selected}}</span></p><script>var dt = [{value: 111,label: aaa}, {value: 222,label: bbb}, {value: 333,l...
本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 推荐方式首先在 main.js 中引入 axios// 引入 axios import axios from axios这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的，报错内容大致是axios is undefined。我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2将axios写入Vue的原型链作为Vue的属性// 设置...
一、简介 Vue.js 是什么 Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js是一个MVVM模式...