vue | 易学教程

vue 引入 scss 编译报错：Module build failed: TypeError: this.getResolve is not a function

阅读更多关于 vue 引入 scss 编译报错：Module build failed: TypeError: this.getResolve is not a function

vue 引入 scss 编译报错： ./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“vue”:true,“id”:“data-v-1168d9a7”,“scoped”:true,“hasInlineConfig”:false}!./node_modules/sass-loader/dist/cjs.js?{“sourceMap”:true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/app_main.vue Module build failed: TypeError: this.getResolve is not a function at Object.loader (D:\WORK\VueProject\XiaoWei\node_modules\sass-loader\dist\index.js:52:26) @ ./node_modules/vue-style-loader!./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib

vue中this.$set()方法

阅读更多关于 vue中this.$set()方法

<!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < meta http-equiv = " X-UA-Compatible " content = " ie=edge " > < title > Document </ title > </ head > < body > < div id = " app " > < button @click = " addAge " > 展示年龄 </ button > < ul > < li > {{list.name}},{{list.age}} </ li > </ ul > </ div > < script src = " vue-2.4.0.js " > </ script > < script > var vm = new Vue ( { el : "#app" , data : { list : { name : "xiaoming" } } , methods : { addAge ( ) { // this.list.age=18 this . $ set (

【Vue.js】Vue 学习笔记

阅读更多关于【Vue.js】Vue 学习笔记

初学者不推荐采用 vue-cli 的方式，因为你可能对 npm 包管理工具不太了解，推荐大家使用 <script> 引入或者 cdn 引入的方法，后续教程也将采用 cdn 引入这种方式，那么我们开始创建第一个 Vue 应用。实战：安装mp Vue 与其他框架的对比及特点安装 Vue 的方法 node 的安装 vue-cli 的安装 Vue 开发者工具的安装 Vue 创建实例 Vue 数据的双向绑定及响应式 Vue 实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var app = new Vue({ // 选项 }) Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，我们新建一个.html 后缀的文件，输入以下代码，运行（右击文件 > open with > Preview 或 Mini Browser），你就会看到 {{msg}} 被渲染成 hello <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content

vue过滤器

阅读更多关于 vue过滤器

Vue提供数据过滤功能，使用也非常简单，只需要在 options 下的 filters 下定义好filter函数便可使用，过滤器可以用在两个地方：双花括号插值加粗样式和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：使用示例; < ! -- 在双花括号中 -- > { { message | capitalize } } < ! -- 在 `v-bind` 中 -- > < div v - bind : id = "rawId | formatId" > < / div > filters定义（记住filters 是有 s 的）： filters : { capitalize : function ( value ) { //value便是接受过滤的值 if ( ! value ) return '' value = value . toString ( ) return value . charAt ( 0 ) . toUpperCase ( ) + value . slice ( 1 ) } } 以上是组件内使用过滤器，我们也可全局定义一个过滤器，这样我们便可全局使用：全局过滤器： Vue . filter ( 'capitalize' , function ( value )

Vue插件开发入门

阅读更多关于 Vue插件开发入门

相对组件来说，Vue 的插件开发受到的关注要少一点。但是插件的功能是十分强大的，能够完成许多 Vue 框架本身不具备的功能。大家一般习惯直接调用现成的插件，比如官方推荐的 vue-router、vue-touch 等。下面就看一下 Vue 的插件开发如何入门。首先我们简单回顾一下 Vue.js 官方文档中对于插件开发的描述。 Vue 的插件必须提供一个公开方法 install ，该方法会在你使用该插件，也就是 Vue.use(yourPlugin) 时被调用，相当于是一个插件的注册或者声明。 install 接受 Vue 构造器作为第一个参数，并且有一个可选的选项对象作为第二个参数，比如： yourPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = ... // 2. 添加全局资源 Vue.directive('my-directive', {}) // 3. 添加实例方法 Vue.prototype.$myMethod = ... } 插件在使用时有两种方式：第一种是如上述提到的，可以通过 Vue.use(yourPlugin) 全局方法进行调用。进行 Vue 的大型项目开发时，如果用 vue-cli 生成项目目录结构， Vue.use() 方法一般在 main

vue项目实战经验汇总

阅读更多关于 vue项目实战经验汇总

目录 1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间，父子组件之间的通信方案 1.5 vue中 $event 的用法--获取当前父元素，子元素，兄弟元素 1.6 vue常用工具函数总结 1.7 axios二次封装http请求 2.elementui组件修改经验总结 2.1 element-ui 中步骤条的深度使用 2.2 v-loading框中的提示文字换行 2.3 路由菜单项双击控制台报错 3.Vue项目配置 3.1 Vue-cli3 配置开发、生产和测试环境 3.2开发环境中代理的切换配置 1.vue框架使用注意事项和经验本文主要总结了在开发vue项目中的一些实践经验和踩过的一些坑，后续会接着更新，便于后期复盘，希望也对你有所帮助 1.1 解决Vue动态路由参数变化,页面数据不更新问题描述：遇到动态路由如：/page/:id 从/page/1 切换到 /page/2 发现页面组件没有更新解决方式：给<router-view :key="key">增加一个不同:key值，这样vue就会识别这是不同的了。 <router-view :key="key"></router-view> ... computed:{ key(){ return

vue 使用v-for进行循环

阅读更多关于 vue 使用v-for进行循环

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue中使用v-for</title> </head> <body> <div id="app"> <h3>循环列表</h3> <table> <thead> <tr> <th>序号</th> <th>书名</th> <th>作者</th> </tr> </thead> <tbody> <tr v-for="(book,index) in books" :key="book.title"> <td>{{index+1}}</td> <td>{{book.title}}</td> <td>{{book.author}}</td> </tr> </tbody> </table> </div> <div id="app2"> <h3>循环对象</h3> <div v-for="(value,key) in person"> {{key}}:{{value}} </div> </div>

vue打包谷歌项目可以打开，其他浏览器不行

阅读更多关于 vue打包谷歌项目可以打开，其他浏览器不行

vue打包谷歌项目可以打开，其他浏览器不行一般我们使用谷歌浏览器开发，但是打包dist,上线时出现问题就是谷歌浏览器访问，没问题360浏览器，QQ浏览器等浏览器在打开发送时候报错，这里以QQ浏览器为例子：原因是谷歌浏览器可以解析ES6语法，但是其它浏览器暂时支持ES5语法，这样怎么解决呢通过下载babel-ployfill解决，vue中webpack框架运行代码： npm install babel-ployfill --save 在main.js导入,即可 import 'babel-ployfill' 来源： https://www.cnblogs.com/xujunkai/p/12326777.html

Vue中使用Cropper.js裁剪图片

阅读更多关于 Vue中使用Cropper.js裁剪图片

Cropper.js是一款很好用的图片裁剪工具，可以对图片的尺寸、宽高比进行裁剪，满足诸如裁剪头像上传、商品图片编辑之类的需求。 github： https://github.com/fengyuanchen/cropperjs 网站： https://fengyuanchen.github.io/cropperjs/ 简单使用使用很简单，首先需要一个image或者canvas元素：  <div> <img id="image" src="picture.jpg"> </div> 　　 /* Limit image width to avoid overflow the container */ img { max-width: 100%; /* This rule is very important, please do not ignore this! */ } 　然后使用此元素创建Cropper： // import 'cropperjs/dist/cropper.css'; import Cropper from 'cropperjs'; const image = document.getElementById('image

【Spring Boot + Vue 前后端分离 - 图书管理Demo】——【一】环境准备

阅读更多关于【Spring Boot + Vue 前后端分离 - 图书管理Demo】——【一】环境准备

SpringBoot + Vue + Element UI 简单实现图书的增删改查操作前后端分离就是将一个单体应用拆分成两个独立的应用，前后端通过JSON格式进行数据交换；前端HTML -----> Ajax --------> Restful 后端数据接口文章目录 Demo最终效果：项目结构：一、环境准备二、新建Vue工程三、新建Spring Boot工程 Demo最终效果：项目结构：一、环境准备 jdk 1.8 maven 3.5.4 👉 Maven配置教程 IntelliJ IDEA 2019.1.2 安装vue.js插件 SpringBoot 2.2.2 .RELEASE @vue/cli 4.2.2 (+ node.js) 👉 Vue CLI3开发环境搭建二、新建Vue工程命令行输入 vue ui ( vue3+版本才有) 项目创建完成后添加插件 element UI 用IDEA打开刚才创建的Vue项目，在IDEA的命令行终端输入 npm run serve 启动Vue ( ctrl + c 停止vue ) 即可访问项目首页 http://localhost:8080 三、新建Spring Boot工程创建Spring Boot工程需要的组件： Lombok用于自动生成各种属性的 Setter 和 Getter 方法，省去手动生成。

订阅 vue