![](https://img-blog.csdnimg.cn/20191129143521336.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
LeungZhenPang
这个作者很懒,什么都没留下…
展开
-
vue 的插件封装方式
我们这里以 封装 Toast 插件为例1. 创建目录结构└── components └── toast ├── Toast.vue └── index.js创建一个 toast 的文件夹,里面包含 Toast.vue 和 index.js<!-- Toast.vue --><template> <div class="toast" v-show='isshow'> <div>{{message}}</div>原创 2020-05-12 22:36:27 · 1929 阅读 · 0 评论 -
vue 的生命周期图解
进入官方文档原创 2020-05-11 13:51:10 · 395 阅读 · 0 评论 -
在 vue 中简单封装 better-scroll 并使用
better-scroll 官网链接 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 JS lib。安装better-sc原创 2020-05-11 12:53:41 · 389 阅读 · 0 评论 -
vue-cli 中使用 postcss-px-to-viewport 插件实现移动端自适应
简介 github介绍 如果你的样式需要做根据视口大小来调整宽度,这个脚本可以将你CSS中的px单位转化为vw,1vw等于1/100视口宽度。 开发时,我们只需关注设计稿的视图宽度对我们的项目进行排版。使用安装使用 npm 安装npm install postcss-px-to-viewport --save-dev在 vue.config.js 中配置参数modul...原创 2020-05-08 14:51:00 · 2985 阅读 · 0 评论 -
在vue 中使用 axios
官网 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。安装使用 npmnpm install axios -S使用 cdn<script src="https://unpkg.com/axios/dist/axios.min.js"></script>封装 ❌ 不建议直接在每个组件中直接引用 axios ...原创 2020-05-07 16:53:15 · 238 阅读 · 0 评论 -
Vue 自定义移动端的 滑动事件
核心代码function vueTouch(el,binding,type){//触屏函数 var _this=this; this.obj=el; this.binding=binding; this.touchType=type; this.vueTouches={x:0,y:0};//触屏坐标 this.vueMoves=true; ...原创 2020-03-31 16:27:32 · 1851 阅读 · 0 评论 -
vue-cli 中 /sockjs-node/info?t= net::ERR_SSL_PROTOCOL_ERROR 解决方案报错
sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。解决找到/node_modules/sockjs-client/dist/sockjs.js找到代码的 1605行把这行代码注释掉try { //self.xhr.send(payload); } catch (e) {...原创 2020-03-12 21:47:43 · 5299 阅读 · 1 评论 -
export、export default 和 import 用法和区别
ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都是ES6的语法语法一/*a1.js*/export default { //...原创 2019-10-29 14:52:22 · 185 阅读 · 0 评论 -
vue中改变vuex中的state出错问题
原因1. 组件中v-model=“XXX”,而XXX是vuex state中的某个变量2. vuex中是单项流,v-model是vue中的双向绑定,但是在computed中只通过get获取参数值,没有set无法改变参数值computed: { ...mapState(['params','data','salesman']), //这里的变量只有get,没有set解决方法:...原创 2020-02-14 16:00:05 · 675 阅读 · 0 评论 -
vue-cli/webpack打包后上线出现路径错误404问题
文章目录问题:原因:解决办法:如果打包报错:问题:将打包好的项目部署到服务器,发现报错说图片找不到。态资源如js访问不到原因:这个是因为webpack打包的时候引入js时使用的是绝对路径导致的,修改webpack打包文件中的配置解决办法:在项目中添加vue.config.js文件,内容如下:module.exports = { baseUrl: process.env.N...原创 2019-12-20 15:14:42 · 1186 阅读 · 0 评论 -
关于后端允许跨域后,axios的post请求仍显示跨域问题
文章目录问题解决问题我们后端 PHP 已经设置了允许跨域:header("Access-Control-Allow-Origin: *");header('Access-Control-Allow-Methods:POST, GET, OPTIONS');但我们用 axios 进行 post 请求时仍会显示跨域axios.post("请求路径",{ name: 'zhangsan...原创 2019-12-12 00:40:22 · 3019 阅读 · 1 评论 -
vue 获取原生dom 对象
通过给标签添加 ref 属性<div id='app'> <div ref='box'>Hello World</div> <form ref='loginForm'> <input name='username'> <input type='password' name='password'> </fo...原创 2019-11-25 23:02:20 · 887 阅读 · 0 评论 -
Vuex的使用
文章目录安装引入vuex使用 vuex安装npm install vuex --save //安装vuex引入vuex新建一个 store文件夹,并在文件夹下新建 store.js 文件引入并使用 vuex//store.jsimport Vue from 'vue' //vuex依赖于vue,所以先引入vueimport Vuex from 'vuex' //引入v...原创 2019-11-18 11:16:02 · 97 阅读 · 0 评论 -
PubSubJS的使用
pubsubjs一个利用JavaScript进行发布/订阅的库语法PubSub.publish('名称', argument) //发布消息PubSub.subscrib('名称', (msg,argument) => {} ) //订阅消息PubSub.unsubscrib('名称') //取消订阅操作安装 pubsub-jsnpm install pub...原创 2019-11-05 18:21:34 · 5273 阅读 · 0 评论 -
vue-cli的创建
创建vue项目操作安装 vue-clinpm install vue-cli -g //全局安装vue-cli创建项目vue init webpack vue_demo //初始化一个vue_demo项目输入命令后,会跳出一下选项:Project name (vue_demo): -----项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母、Pr...原创 2019-10-28 23:59:30 · 120 阅读 · 0 评论 -
webpack中的vue组件引用jquery
前言 main.js中我们引用了 jquery,$符号我们可以正常使用,但 window.$却不能,而且其他vue组件中也引用不到$;为什么呢?因为webpack是最后会把代码用闭包的方式打包,$对象并没有挂载在window下,其他组件中并没有引用jquery所以它自然是拿不到的,那么怎么能做到在main.js中一次引用,每个组件都能拿到呢?方法一:expose-loader 讲jquery暴...原创 2019-10-26 11:43:09 · 167 阅读 · 0 评论 -
vue中methods和computed的区别
先来一段代码:<div id="app"> <p>methods的值:{{f1()}}---computed的值:{{f2}}</p> <p>methods的值:{{f1()}}---computed的值:{{f2}}</p> <p>methods的值:{{f1()}}---computed的值:{{f2}}</...原创 2019-07-17 13:37:42 · 198 阅读 · 0 评论 -
Vue路由创建
第一步:<script src="https://unpkg.com/vue/dist/vue.js"></script> //引入vue.js包<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> //引入vue-router插件,亦可用npm等办法安...原创 2019-10-06 23:37:06 · 202 阅读 · 0 评论 -
vue项目的基本结构
目录解析文件说明build项目构建(webpack)相关代码config配置目录,包括端口号等src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:assets: 放置一些图片,如logo等。components: 目录里面放了一个组件文件,可以不用。App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 co...原创 2019-10-08 16:19:45 · 1065 阅读 · 0 评论 -
vue父子组件基础数据传递图
原创 2019-10-08 17:04:53 · 365 阅读 · 0 评论 -
vue中methods绑定依赖值改变会形成死循环
<div id="app"> <p>{{fn()}}</p> <p>{{fn()}}</p> <p>{{fn()}}</p></div><script type="text/javascript"> var vm = new Vue({ el:'#app', data:...原创 2019-07-17 11:39:15 · 796 阅读 · 0 评论