vue2
笑望灬星辰
这个作者很懒,什么都没留下…
展开
-
vue、react、angular小小比较
vue、react、angular小小比较Vue.js ⼀个⽤于创建 web 交互界⾯的库,是⼀个精简的 MVVM 。它通过双向数据绑 定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了Directives 和 Filtersreact React 仅仅是 VIEW 层是 facebook 公司。推出的⼀个⽤于构建 UI 的⼀个库,能够实现服务器端的渲染。⽤了 virtual dom ,所以性能很好AngularJS 是⼀个⽐较完善的前端 MVVM 框架,原创 2021-04-21 22:34:16 · 251 阅读 · 0 评论 -
vue 爬坑 sass-loader 报错
npm install sass-loadernpm install node-sass原创 2021-02-25 13:43:29 · 140 阅读 · 0 评论 -
vue -- v-for 循环对象中的key
直接上代码<template> <div style="padding:80px"> <!-- 用 in 循环渲染数组 --> <!-- <div v-for="(item, i) in list" :key="i">{{`${item.name} -- ${item.sex} -- ${item.age} `}}</div> --> <!-- 用 of 循环渲染对象 -->原创 2020-11-29 17:18:10 · 2352 阅读 · 0 评论 -
vue -- $emit change
子组件数据发生变化时 通过change反射给父组件该场景在多数第三方ui库都有看到当然实现方式有多种方式 本文采取主流的 change 事件反射element-ui 一个input组件中直接上代码父组件<template> <div> <children @change="getChange"></children> </div></template><script>import原创 2020-11-29 20:32:48 · 4456 阅读 · 0 评论 -
vue -- $emit input 与 v-model(父组件文本框与子组件文本框内容同步更新)
业务场景 父组件文本框与子组件文本框内容同步更新直接上代码父組件<template> <div style="padding:30px"> <div>我是父组件</div> <a-input v-model="parent" style="width:30%" placeholder="我是父组件"></a-input> <children v-model="parent" :parent="pa原创 2020-11-29 16:34:16 · 1630 阅读 · 0 评论 -
vue -- 子组件向父组件传递数据之 $emit
$emit 的使用父组件<template><div> <h1>我是组件1</h1> <!-- 给fu 赋值 因为 test2 fu 是一个方法属性 所以要加 @ 而不是 : --> <test2 @fu="fu"></test2></div></template><script>import test2 from "./test2"export defau原创 2020-11-29 00:24:39 · 1061 阅读 · 0 评论 -
vue项目 webpack-dev-server 报错
vue 项目报错webpack-dev-server 不是内部或外部命令,也不是可运行的程序或批处理文件报错出现原因:拷贝vue项目时git拉取vue项目时解决方案:进入项目目录 将node_modules文件夹 删掉cnpm install然后再次运行项目如果未成功 继续将node_modules文件夹 删掉 直至成功有时候cnpm install 可以 有时候npm install 可以 所以 不行就多试几次就ok了...原创 2020-08-31 00:34:37 · 815 阅读 · 0 评论 -
vue 插件 之 生成二维码 qrcodejs2
qrcodejs2 生成二维码插件还有另外一个 vue-qr插件 也可以生成二维码因篇幅原因,本博文只对 qrcodejs2插件 及其 源码 进行解读cnpm install --save qrcodejs2使用<template> <div> <div class="qrcode" ref="qrCodeUrl"></div> </div></template><script>imp原创 2020-06-29 00:08:31 · 1420 阅读 · 0 评论 -
vue 引入 element-ui 报 es2015 的错
vue 项目引入 element-ui 报 es2015 的错一般该错误是在项目搭建时报的解决办法cnpm install babel-preset-es2015 --save-dev原创 2020-06-28 13:47:03 · 902 阅读 · 0 评论 -
Cannot find module @babel/helper-module-imports
vue 项目中引入 element-ui 时报错我的报错场景,当复制项目到另一台电脑启动时报错报错信息Cannot find module '@babel/helper-module-imports'解决办法cnpm install --save-dev @babel/helper-module-imports原创 2020-06-28 13:44:49 · 4914 阅读 · 0 评论 -
ReferenceError: Unknown plugin component
vue 项目中引入 element-ui 时报错我的报错场景,当复制项目到另一台电脑启动时报错ReferenceError: Unknown plugin "component"解决办法cnpm install babel-plugin-component -D原创 2020-06-28 13:40:53 · 1621 阅读 · 0 评论 -
vue 环境搭建 无坑点
vue 环境搭建先安装 node.jsnode 官网下载好之后 安装 一直 next 安装完毕 检查版本 并 查看环境变量输入path查看系统环境变量之后 发现已经设置好了环境变量 不用再去手动设置了以前用 win7 需要手动设置 现在用的是 win10 也有可能是node版本的原因若要配置环境变量请戳这里nodeJS安装和环境变量的配置 作者 敲代码的卡卡罗特...原创 2020-06-21 10:12:57 · 504 阅读 · 0 评论 -
html 引入 vue.js
html 引入 vue.js1 vue官网 下载 vue.js目录结构编码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/vue.js">&原创 2020-06-13 23:01:21 · 11031 阅读 · 1 评论 -
vue 指令 之 v-show
vue 指令 之 v-show<template> <div class="box"> <input type="text" v-model="test"> <div v-show="test==1">test = 1</div> <!-- 也可以执行某个方法 或者 利用计算属性 --> <div v-show="handertest(test)">原创 2020-06-13 22:24:38 · 860 阅读 · 0 评论 -
vue 指令 之 v-if、v-else-if、v-else
vue 指令 之 v-if、v-else-if、v-else<template> <div class="box"> <input type="text" v-model="test"> <!-- 第一个 v-else-if 必须要在v-if节点之后 第二个 v-else-if 紧跟其后 节点必须同级 angular 只要同级原创 2020-06-13 22:03:07 · 949 阅读 · 0 评论 -
vue 指令 之 v-pre
vue 指令 之 v-pre<template> <div class="box"> <!-- 跳过这个元素和它的子元素的编译过程。 可以用来显示原始 Mustache 标签。 跳过大量没有指令的节点会加快编译。 --> <div v-pre> {{msg1}} <span>{{msg2}}</span>原创 2020-06-13 00:47:39 · 855 阅读 · 0 评论 -
vue 报 Cannot find module array-includes
vue 项目报这个错误的原因拷贝另一个项目直接打开从git上拉下来的项目解决办法先把项目目录里的 node_modules 删掉然后重新安装npm install // cnpm install安装完毕重新再运行项目就可以了原创 2020-06-12 12:52:27 · 602 阅读 · 0 评论 -
vue watch 之 变量和对象
<template> <div class="box"> <div @click="changeName()">changeName</div> <div @click="watchName()">watchName</div> </div></template><script>export default { components: {原创 2020-06-12 13:55:04 · 1682 阅读 · 0 评论 -
vue 计算属性传参数
vue 计算属性传参数<template> <div class="box"> <div>{{test}}</div> <!-- 报错 --> <!-- <div :class="test1(1)">{{test}}</div> --> <!-- 那么计算属性 computed怎么传参数呢?原创 2020-06-12 00:08:49 · 5023 阅读 · 0 评论 -
vue项目按需引入element-ui
vue项目按需引入element-ui1 新建项目vue init webpack elementDemo2 创建成功 运行项目cd elementDemonpm run dev3 切换到vs code 编辑器 安装 element-uicnpm install element-ui -S4.0 打开 element-ui 官网4.1 先安装 babel-plugin-componentnpm install babel-plugin-component -D4.2原创 2020-06-02 00:07:40 · 1051 阅读 · 0 评论 -
vue项目中按需引入vant组件
[b][size=24px]vue项目使用vant组件库[/size][/b]vant组件库官网 [color=#0000FF][url=https://youzan.github.io/vant/#/zh-CN/quickstart][/url][/color]通过 npm 安装npm i vant -S 或者 cnpm ivant -S安装插件npm i babel-plugin-import -D然后在.babelrc 中添加配置 样式按需加载{ "plugins":原创 2020-05-31 00:32:46 · 3546 阅读 · 0 评论 -
vue移动端项目真机测试
vue移动端项目真机测试测试阶段为内网环境将项目启动的 原host localhost 改成 本机内网ip获取内网ipwin + R 输入 cmd 在 然后再输入 ipconfig 回车这样就可以在手机上测试项目啦但是接口要记得叫后端处理好跨域哦...原创 2020-06-11 13:56:06 · 736 阅读 · 0 评论