最近在开发自己的富文本编辑器插件，在开发中遇到了很多问题其中我觉得比较好的问题就是在你定义的插件中实现双向绑定。就好像input中v-model的功能类似。 v-model语法： 在vue中我们实现表单的双向绑定时代码一般时这样写的： <input type="text" v-model="value" style="line-height: 30px;"> data () {return {value: 222} }可以通过这样的方式实现value的值和输入框中的值双向绑定了。 事实上v-model只是一个语法糖，他的真正实...
Vue-cli@3.0 是一个全新的 Vue 项目脚手架。不同于 1.x/2.x 基于模板的脚手架，Vue-cli@3.0 采用了一套基于插件的架构，它将部分核心功能收敛至 CLI 内部，同时对开发者暴露可拓展的 API 以供开发者对 CLI 的功能进行灵活的拓展和配置。接下来我们就通过 Vue-cli@3.0 的源码来看下这套插件架构是如何设计的。 整个插件系统当中包含2个重要的组成部分： @vue/cli，提供 cli 命令服务，例如vue create创建一个新的项目；@vue/cli-ser...
vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗 popup.vue<template><div class="popup-wrapper" v-show="visible" @click="hide"><div class="popup-text">{{text}}</div></div> </template> 组件html结构, 外层divposition:fixed定位, 内层div显示弹窗内容 export default {name: popup,props: {text: { //文字内容type: String,default: },time: { //显示的时长type: Number,default: 3e3},},data(){return {visi...
1、新建wechatAuth.js文件 const queryString = require(query-string) //应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息） const SCOPES = [snsapi_base, snsapi_userinfo]class VueWechatAuthPlugin {install(Vue, options) {let wechatAuth = thisthis.setAp...
可任意合并表头，实现单元格编辑。 页面效果如图：页面使用如下： <template><div><v-table :datat = "tableData" :thlabel="thlabel":isEdit="true"></v-table></div> </template><script>export default{data(){return{tableData:[{a:1,b:2,c:3,d:8},{a:4,b:5,c:6,d:9}],thlabel:[[{label:测试1,prop:a,rowspan:2},{label:测试2},{label:测试3,colspan:2}],[{prop:c,label:表头2},{prop:b,label:表头3},{prop:d,label:表头4}]]}}...
基于vue.js这里写了一个小列子；涉及到 vue.js动态添加css样式 ，tab切换 ，touch，表单提交，验证，toast，数据双向绑定等。 先上效果图再一一讲解：一、首先用到的是动态修改css点击X将隐藏温馨提示： 1.先给整个div绑定 v-bind <div class="rz-notice" v-bind:style="{ display: isno}"><p>名片用来鉴别是相关人员，温馨提示：<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p></div>注释：图片地址...
Vue.js 是什么 Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工...
插件打包与发布插件功能开发完成后，若需要发布到公共组件库中（例如：npmjs），需要对插件进行打包并发布，简单说明一下这个过程，以插件名 dialog 为例 1、创建 dialog 目录，并进入 2、运行命令行，初始化项目，生成 package.json npm init -y3、使用 webpack-simple 模板构建项目基本结构（前提为已自行安装好 vue-cli）vue init webpack-simple根据导航提示，设置好项目后，基本结构生成完成 4、删除无用内容 删除 index.ht...
介绍一下，已经有很多的vue分页的组件了，大家都是大同小易，那么我就结合自身的使用，写出了一片文章首先在新建一个分页模块在模块中引入相应的代码，（内有详细的注释） template中<div class="page-bar"><ul><li class="first"><span>共{{dataNum}}条记录 第 {{cur}} / {{all}} 页</span></li><li v-if="cur>1"><a v-on:click="cur--,pageClick()"><</a>//点击上一页</li><li v-if="cur==1"><a class="banclick"><</a>//点击第一...
有时候我们需要在vue中使用轮播组件，如果是在vue组件中引入第三方组件的话，最好通过npm安装，从而进行统一安装包管理。 申明：本文所使用的是vue.2x版本。 通过npm安装插件： npm install swiper --save-dev在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里 Slider.vue源码： <template><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="../fixtures/sliders/...
1.在小程序微信开放平台：设置 --- 第三方服务里，申请腾讯视频插件2.申请成功后就可以在项目中使用了 具体使用步骤如下：1.在项目目录src下的main.js中加入下面代码，这里代码会被编译到app.json中config: {// 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去pages: [^pages/index/main],window: {backgroundTextStyle: light,navigationBarBackgroundColor: #00B26A,n...
目前大多数PC浏览器支持在线预览pdf文件，但大多数手机浏览器还未支持，尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了备受推荐的pdf.js插件来实现。 pdf.js可以从github上clone下来，然后本地gulp生成可用的pdf.js和pdf.worker.js（参考readme即可）。 不过更简单的方法是使用cnpm来安装： cnpm isntall --save pdfjs-dist，然后可以在项目中使用了...
基于vue的懒加载插件 目的：图片或者其他资源进入可视区域后加载安装使用直接下载dist目录下的vue-view-lazy.min.js使用使用npm安装直接使用<div id="app"><span v-view-lazy @model="handleModel"></span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="./dist/vue-view-lazy.min.js"></script> <script>Vue.use(vViewLazy.default,{});new Vue({el:#app,data:{msg:数据},me...
照例先贴上 axios 的 gitHub 地址 不管用什么方式获取数据，对于一个项目来说，代码一定要利于维护其次是一定要写的优美，因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource，vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因，废话不多说： 基本的封装要求： 统一 url 配置统一 api 请求request (请求)拦截器，例如：带上token等，设置请求头response (响应)拦截器，例如：统一错误处理，页面重定向...
本文介绍了基于Vue2x的图片预览插件的示例代码，分享给大家，具体如下： 先来看下DemoLiveDemo关于开发Vue插件的几种方式 （具体请移步官网）Vue官网MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑...}// 2. 添加全局资源Vue.directive(my-directive, {bind (el, binding, vnode, oldVnode) {// 逻辑...}...})// 3. 注入组件Vue.mixin({created: function () {/...