[译]怎样在Vue.js中使用jquery插件
时间： 00:05:15
&&&& 阅读：1326
&&&& 评论：
&&&& 收藏：0
使用Vue真的太棒了，但是也有可能使你头疼，当你试图使它与jquery插件混用的时候。
问题的原因是jquery与Vue是完全不同的东西，Vue是通过组件与数据绑定来进行渲染的，jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力。
我试图寻找一些东西来帮助自己解决这个问题，但是我发现一些组件所做的工作不是很让我满意，所以让我告诉你怎样使Vue与jquery插件混用。
这么做的目的是什么？
大多数情况下你能使用jquery和一些简单的Vue来满足你的需求，Modals, sliders等等和一些Vue组件结合起来是很快的。
所以我们的目标是用强大的jQuery插件与Vue快速结合。
用Vue的自定义指令来构建jquery
当元素生成时初始化插件
当元素撤销时销毁插件
发送事件来通知组件
从组件接收事件并将它们传递给插件
我选择Fengyuan Chen&s的cropper因为它是一个很棒的jQuery插件，如果时间限制在60分钟之内的话你肯定不可能重写这个插件在不使用Vue的情况下。
我将从最开始来演示，如果你已经完成请跳过这个部分。
# install vue-cli
$ npm install -g vue-cli
# create a new project using the "webpack" boilerplate
$ vue init webpack vue-cropper
? Project name "vue-cropper"
? Project description "A Vue.js project"
? Author "Christian Gambardella &&"
? Use ESLint to lint your code? "Yes"
? Pick an ESLint preset "Standard"
? Setup unit tests with Karma + Mocha? "No"
? Setup e2e tests with Nightwatch? "No"
$ cd vue-cropper
$ npm install
祝贺你已经有了一个Vue的项目。
安装 jQuery 和 cropper.js
# install jQuery & cropper
$ npm install jquery cropper --save
为jquery和Vue自定义指令配置webpack
为webpack配置添加jquery和Vue自定义指令的映射。
通常webpack已经引入了完整的jquery版本，但还是建议再一次引入一下。
您可以看到Vue的webpack模板已经添加到组件的文件夹中。我通常会添加很多其他文件夹像自定义指令，mixin等等。在这个例子中，我们只添加了自定义指令。
这将帮助我们引入依赖关系而无需知道其确切的路径。这也是有益的在你重构你的应用的时候。你也并不需要管理相对路径。
把下面高亮部分添加到build/webpack.base.conf文件中。
resolve: {
extensions: [‘‘, ‘.js‘, ‘.vue‘],
fallback: [path.join(__dirname, ‘../node_modules‘)],
‘src‘: path.resolve(__dirname, ‘../src‘),
‘assets‘: path.resolve(__dirname, ‘../src/assets‘),
‘components‘: path.resolve(__dirname, ‘../src/components‘),
‘jquery‘: path.resolve(__dirname, ‘../node_modules/jquery/src/jquery‘),
‘directives‘: path.resolve(__dirname, ‘../src/directives‘)
不要忘了在末尾添加逗号。
准备应用组件
我要开始使用组件，因为我相信这是更容易理解的，漂亮和简单的组件。如果你已经知道如何在组件中使用它们那么就可以立即写这个指令来实现它们。
替换src/App.vue文件的template部分
&template&
&div id="app"&
v-cropper="cropOptions"
src="/WcvkCxl.png"
alt="jQuery Meme"&
&/template&
替换src/App.vue文件的script部分
import Cropper from ‘./directives/Cropper‘
export default {
directives: {
cropOptions: {
viewMode: 0,
zoomable: false
一些需要重点注意的地方
我们引入jQuery也不需要处理组件的初始化。
把Cropper的设置选项当做原始绑定数据。
Cropper将在初始化时渲染，再销毁时使其消失。
组件的名字可以在template用作标签使用，MyCropper转变为my-cropper。
对它进行初始化时，我们必须添加v-my-cropper元素在组件的模板里。
创建Cropper组件
这是本教程的核心。我们要创建一个Cropper指令来处理低层代码的DOM操作。在这种情况下我们要初始化Cropper。
　　自定义指令是用来提供一种机制来映射数据并任意操作DOM的行为。
创建src/directives/Cropper.js
import jQuery from ‘jquery‘
import ‘cropper‘
export default {
deep: true,
bind () {},
update (options) {
// Destroy in case it has been initialized already.
jQuery(this.el).cropper(‘destroy‘)
// Initializing directly after destroying
// didn‘t work. Wrapping it in a setTimeout
// seems to do the trick.
setTimeout(() =& {
jQuery(this.el).cropper(options)
unbind () {
jQuery(this.el).cropper(‘destroy‘)
每一个Vue自定义组件的最核心部分是其提供可以用来绑定，更新，解绑相应方法。
bind：当元素在文档中生成时只触发一次。
update：当bind方法触发后和绑定数据改变时触发，在这种情况下cropOptions只是一个对象。Vue.js自定义指令需要知道如果它的相关属性也是一个对象。这就是为什么我们需要添加deep: true在这种情况下。
unbind：当DOM元素被移除时触发，在这个方法里可以销毁组件并且移除监听的事件。
在Vue 2中会有些许变化。
vm实例被作为函数参数传递，不会被设置为this。
指令的update方法只能在数据改变后触发而不会在bind方法之后触发。
第一次运行
这是我们所能做的最小限度，让我们运行起来看看如何。
这是很快做出来的，所以我们并没有添加cropper的样式，让我们添加并再一次运行。
先添加高亮部分在src/main.js文件中
import ‘../node_modules/cropper/dist/cropper.css‘
import Vue from ‘vue‘
import App from ‘./App‘
/* eslint-disable no-new */
el: ‘body‘,
components: { App }
$ npm run dev
当所有事情都做好后，你应该看到一个图片和一个cropbox并且可以使其移动。
注：后半部分翻译待续
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！o(︶︿︶)o { name : 'Kummy' ,
job : 'Feser' }
& & 1. 架构选型
& & 2. 架构目录介绍
& & 3. 架构说明
& & 4. 招聘消息
目前如果要说比较流行的前端架构哪家强，屈指可数：reactjs、angularjs、emberjs、avalonjs、vuejs。
我个人接触使用过：avalonjs、angularjs、vuejs。因为工作以及前端团队能力的问题，所以在不同的公司，在开发工作中选用了不同的前端架构。
以下仅仅是代表我个人选用架构的一些看法和理由，如下：
& & 我觉得angularjs的学习上手周期比较长，可能遇到问题，都无法立刻解决，而且编码的质量明显的很差，如果团队没有制定规范，那写出来的代码就没法看。对于一个选用angularjs的团队来说，我认为编码规范是很重要的，否则对编码能力是没有提升的。
& & &avalonjs文档资料没有那么全，我感觉一些开源支持的力量不够多。不过，如果有项目需求，需要去做IE浏览器的支持话，我建议选择avalonjs
& & &vuejs 文档比较齐全，vue吸取了angularjs 的一些优点，规避了一些缺点，至少编码规范上有了一个质的飞跃，学习上手的周期比较短。vue起初只是一个轻量级的类库，用来做类似于react的事情，同时vue也是可以拿来做前端架构设计的，比如：vueify + vue-router （spa框架）。
& & &vue学习地址：
以上说了那么多没用的，下面就来点干活了！
我的前端组件化架构设计，目录如下：
项目架构用到的知识点，还是挺多的，知识清单如下：
［1］: & gulp + webpack 构建打包工具， 使用了一系列的loader，比如：vue-loader, &sass-loader, babel-loader&, 以及 postcss，postcss-custom-properties，等等
&[2] &: & postcss-custom-properties&: 用来做样式全局化, 只需要通过变量去维护，通过编译变量既可以换肤。
&[3] &: & vue-loader （vue文件组件化）:用来去编译处理 *.vue 的文件，一个vue 文件就是一个单独的组件，vue组件开发具有高独立且易维护。组件的划分可大可小，一个页面也可以看作成由多个vue 组件构成的，一个页面也可以是一个vue组件, vue 文件结构如下：
&[4] &：&babel-loader &：实现对vue文件中 es6 语法的编译解析
&[5] &： vue-router ：用来做路由分发，而且文档非常的齐全（学习地址:）。
&[6] &： vue （插件式方式）：vue本身提供了一个install 方式用来注入，我们可以注入一些全局的(属性、方法、以及通用的ui组件)。
下面说说文件夹的含义：
& common 文件夹: 是用来存一些通用的东西，比如样式，以及全局的js等等
& components 文件夹：用来放独立的组件，我打算后期做细分，ui 组件，以及page 组件等等，这里面就是团队的心血，以后就能做成独立的组件库了。
& filters 文件夹：用来放通用的过滤器操作。
& plugins 文件夹：用来放 Vue.use 注入到Vue全局的插件库，比如：请求加载、弹框、分页、ui组件 等等。plugins 只是把 componets 组件暴露给 Vue全局。
& views 文件夹: 用来存放页面模块
& app.vue 文件：第一次启动的主程序模块
& app.js 文件：启动前的加载，注入，实例化
& router.config.js 文件：路由模块
目前该架构在前后台的SPA架构都适用，可能还是有很多不完善，不过我还很年轻，vue也还狠年轻，望各位道友多给我们年轻人一些机会。
最后发布一条招聘消息：
& & 如果你有一颗想用代码来改变世界的信念，那么你来就对了。
& & 招聘地址：
阅读(...) 评论()今天看啥 热点：
Vue框架中正确引入JS库的方法介绍，vuejs本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍：
全局变量法
最不靠谱的方式就是将导入的库挂在全部变量window 对象下：
// entry.js:
window._ = require('lodash');
// MyComponent.vue:
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
这种方式的缺点有很多，我们只说其中一个关键的点：不支持服务端渲染。当应用跑在服务端时，window对象不存在，当然试图去访问window下的属性会抛出错误。
处处引入法
另外一个不太优雅的方式就是在需要的每个文件中都引入对应的库：
// MyComponent.vue：
import _ from 'lodash';
export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
虽然这方法是可行的，但是太不简洁。你必须在每个文件中都记得引入， 而且如果不需要了，又得重新删除。另外，如果打包策略不够明智的话，可能会打包出多份重复的代码。
正确引入方式
最简单靠谱的方式是用库变成Vue的原型对象的属性。下面，我来演示如何将Moment 库引入：
import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });
Object.definePrototype 语法参见 MDN
由于所有的组件都会继承Vue原型对象上的方法，因此这些方法在任何组件文件中都能通过this.$moment 访问到：
// MyNewComponent.vue
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
使用 Object.defineProperty 定义对象属性，如果不在属性描述器中额外说明，则该属性就是默认只读的，保护引入的库不被重新赋值。
如果你在项目的很多地方都用了某个库，或者你希望全局可用，你可以构建自己的Vue 插件。
插件能化繁为简，能让你像下面这样很简单地引入自己想要的库：
import MyLibraryPlugin from 'my-library-plugin';
Vue.use(MyLibraryPlugin);
就像Vue Route，Vuex等插件一样，我们的库仅仅需要两行，就能在任何地方使用了。
如何写插件
首先，创建一个文件。本例中，我将引入一个Axios库的插件。我们就把这个文件命名为axios.js 吧。
最关键的地方在于，我们需要暴露一个将Vue构造器作为第一个参数的install 方法。
// axios.js:
export default {
install: function(Vue) {
// Do stuff
然后我们可以用之前的方式将库添加到Vue的原型对象上：
// axios.js
import axios from 'axios';
export default {
install: function(Vue) {
Object.defineProperty(Vue.prototype, '$http', { value: axios });
接着我们只需要Vue实例的use方法就能将这个库引入整个项目了。我们像下面代码一样简单引入：
// entry.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin);
created() {
console.log(this.$http ? 'Axios works!' : 'Uh oh..');
插件参数设置
插件的install方法还可以接受其他的可选参数。有些开发者可能不喜欢Axios实例对象的方法名$http，因为Vue resource插件的方法名也是这个。然后，让我们利用第二个参数来修改它。
// axios.js
import axios from 'axios';
export default {
install: function(Vue, name = '$http') {
Object.defineProperty(Vue.prototype, name, { value: axios });
// entry.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin, '$axios');
created() {
console.log(this.$axios ? 'Axios works!' : 'Uh oh..');
当然上面，我们可以直接在Object.defineProperty的中将name属性写死成$axios。也可以在install方法中引入多个需要的库。
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对帮客之家的支持
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
Javascript最近更新10分钟教你快速开发一个vue插件并发布npm原创
本次演示的是开发一个 vue手机虚拟支付键盘插件 主要讲解的是如何快速开发一个vue插件并发布到npm上
所有代码都可以在我的GitHub
上查看,欢迎start..
demo演示地址
请用手机或者电脑仿真查看
关于vue插件
插件一般都有如下几种形式导入
import vuePayKeyboard from 'vue-pay-keyboard'
通过require 导入
var vuePayKeyboard = require('vuePayKeyboard')
// 通过use挂载
Vue.use(vuePayKeyboard)
// 或者直接导入js文件
&script src="./dist/vue-pay-keyboard.js"&&/script&
无论是那种方式,都可以非常方便的在我们的项目当中使用,那么vue的插件应该如何写并发布到npm上供大家使用呢 其实非常的简单.
vue插件的规范
vue官网有给出明确的文档
,我们需要有一个公开方法 install,里面来包含我们要处理的业务。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
// plug.js
const plug = {
定义一个对象
install (Vue, options) {
// 需要拥有一个 install 方法
// 导出这个对象
export default plug
那么此时我们就可以通过 use的方式来使用
import plug from
Vue.use(plug)
此时plup暴露给我们的 就是 install 函数定义的方法及属性
废话不多说，直接开始我们的插件开发,本次将直接使用vue简化版脚手架.至于为什么不从0开始搭建webpack,原因大致是因为网上太多诸如此类的博客了，就没必要再嚼别人的口香糖了，其次为了照顾那些不懂 webpack 配置的童鞋们以及达到快速开发的目的.
初始化项目
vue init webpack-simple vue-pay-keyboard
一切都基于这个脚手架来改造，只需要稍微改动就可以变成我们的东西,当然其中重要的配置 会相对应的解释
这里我选择了使用sass 因为后面我会用到 大家可以自行选择
OK 一切先用默认的,等会我们再改, 启动项目之后，我们把自带的多余的东西全删掉，然后在src下面新建一个 lib文件 用于存放我们的源码
并新建 index.js
用于作为我们的插件入口
vue-pay-keyboard.vue
存放我们的开发的组件
至此 文件目录如下：
├── src
// 源码目录
├── lib
├── index.js
// 插件入口
├── vue-pay-keyboard.vue
├── App.vue
// 页面入口文件
├── main.js
// 程序入口文件，加载各种公共组件
├── index.html
// 入口html文件
非常简洁，然后开始写我们的index.js
我们需要导入.vue组件，并按照vue插件规范开发并且导出,这里我们用全局组件的方式作为插件,其他类型的插件调用方式也都大同小异
import vuePayKeyboard from './vue-pay-keyboard.vue' // 导入组件
const paykeyboard = {
install (Vue, options) {
ponent(vuePayKeyboard.name, vuePayKeyboard)
// vuePayKeyboard.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx
// 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头
但是大家都默认遵守这个规定
export default paykeyboard // 导出..
ok 可以说基本的开发环境我们已经搭建完成了...你们信吗？
接下来我们写键盘的业务逻辑 会相对复杂，这里根于不同的业务需求，会有不同的解决方案，但是有些东西都是相通的.
如何写好一个组件
我认为通常一个好的插件 首要的是解决用户的问题,其次在有必要的情况下再进行个别案例的解决,通常需要如下：
能够满足大部分用户需求
可订制性 // 能够满足用户针对不同业务环境进行订制
可扩展性 // 能够满足用户对其他方面的拓展
我们先简单的写下样式
我尽量写的像支付宝的样式哈。。。
同时对外开放几个属性和方法
Description
highlightColor
点击时高亮的颜色
密码的位数
是否显示支付键盘
请输入支付密码
Function Name
Description
密码输入完毕
好了 我们的静态页面大致完成了, 输完6位号码自动验证 进行下一步动作
这里移动端的1px用了我之前写的一个十分简单的class，至于其他逻辑可看源码,由于时间紧迫,代码方面我们往后再说，至此 我们基本完成开发 开始效果调试
在app.vue中写一个简单的按钮用于唤起支付键盘
并且在main.js中导入vuePayKeyboard 插件
我们先暂时这么写 因为还未发布到npm
import vuePayKeyboard from './lib/index.js'
Vue.use(vuePayKeyboard)
在app.vue中注册事件并使用插件
&button @click="payShow()"&点击支付&/button&
// 直接使用
&vue-pay-keyboard :isPay='isPay' @pasEnd='pasEnd' @close='isPay=false'&&/vue-pay-keyboard&
可以看到演示效果如下：
呼 ~ 至此 我们所有开发都完成了 前面都是大家熟悉的 现在进入打包以及发布 也都是几分钟的事情.
修改 weppack.config.js 部分配置
module.exports = {
// entry: './src/main.js',
// 项目入口 我们通过npm run dev 就是从这里进去的 我们通过run build 打包编译也是
// 因为我们要打包的插件在lib里面 所以稍稍改一下
entry: './src/lib/index.js', // 注释掉原有的
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js' // 打包后输出的文件名
filename: 'vue-pay-keyboard.js' // 我们可不想打包后叫build.js 多low啊 起一个与项目相对应的
library: 'PayKeyboard', // library指定的就是你使用require时的模块名，这里便是require("PayKeyboard")
libraryTarget: 'umd', //libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
ok 通过 npm run build 打包一次
此时可以看到生成了一个dist文件里面并且有两个文件 一个vue-pay-keyboard.js与一个map文件
我们已经打包完成 先在index.html试一试是否可以通过直接导入script标签的方式使用
此时我们需要先把index.html里面默认导入build.js文件改成我们打包之后的文件名称 并且需要导入vue
此时并没有我们想象的那么顺利 报错了..
报错的原因是我们并没注入vue-pay-keyboard 因为直接用标签的方式
我们并不可能使用use
修改index.js文件
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(paykeyboard);
再次打包 可以看到已经成功了
最后发布npm
最重要的是我们需要先修改package.json文件
private:false, // 默认是true 私人的 需要改为false 不然发不上去 你可以试试..
"license": "MIT", // 许可证
"main": "dist/vue-pay-keyboard.js", // 这个超级重要 决定了你 import xxx from “vue-pay-keyboard” 它默认就会去找 dist下的vue-pay-keyboard 文件
"repository": {
"type": "git",
"url": "/yucccc/vue-pay-keyboard"
}, // 配置这个地址存放你项目在github上的位置 也尤为重要
OK 一切搞定 发布npm吧 哦 记得写一下readme
注册好npm后 添加用户
npm adduser
Username: your name
Password: your password
Email: yourmail[@gmail](/user/gmail).com
因为我这边已经添加过了 没办法演示 接着
npm whoami // 看一看你是谁..
npm login // 登陆
npm publish // 发布
报了一个错,说了这么久 我自己却忘了把私人改为 false.
OK 我们发布成功.试一试能不能下载并且引用先.(有时候可能会存在延时或者缓存)
然后再尝试通过 npm 下载来看看否使用吧 ~~
我们通过安装依赖
npm install vue-pay-keyboard -S
正常导入之后可能会发现找不到vue-pay-keyboard 这个模块.
原因是我们的忽略文件默认忽略了 dist 文件
修改 .gitignore
去掉忽略dist
这里注意 每次上到npm上需要更改版本号，不然也会错误
vue插件的大致思路其实都是这样.
你也赶快来开发属于你的第一个vue插件吧.
JavaScript
随时随地看视频解决vue中使用swiper插件——李帅醒博客 - 李帅醒的博客 - CSDN博客
解决vue中使用swiper插件——李帅醒博客
Vue学习笔记
解决vue中使用swiper插件，在引入swiper插件后，发现无法正常运行
这次我们模拟从后台取下数据，然后数据绑定在swiper标签中。
&template&
&div class=&homePage&&
&abc&&/abc&
&div id=&banner&&
&div class=&swiper-container&&
&div class=&swiper-wrapper&&
&div class=&swiper-slide& v-for=&items in swiper& &&a href=&&&&img :src=&items.activity.img&&&/a&&/div&
&div class=&swiper-pagination&&&/div&
&/template&
import Swiper from &../../static/js/swiper-3.4.0.min.js&;
import header from 'components/header.vue';
export default {
components : {
abc : header
mounted(){
this.$http.get(&http://www./aixianfeng/apihome.php&).then(function(res){
this.swiper=res.data.data.
var mySwiper = new Swiper('.swiper-container', {
autoplay: 2000,//可选选项，自动滑动
pagination : '.swiper-pagination',
paginationClickable :true,
observer: true
&style type=&text/css&&
@import &../../static/css/home.css&;
@import &../../static/css/swiper-3.4.0.min.css&;
&/style&&重点就在mounted()的使用，需要把这些方法都放在&mounted()里使用，&mounted()是&vue生命周期钩子
，你也可以理解为当挂载实例到 DOM完了后，才会触发的而方法。
Vue-resource实现ajax请求和跨域请求--李帅醒博客&（vue http://blog.csdn.net/wcslb/article/details/）
（我吃酸萝卜
新浪微博/wcslb & & & & &---李帅醒著）
我的热门文章