最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大家； 主要技术栈是vue.js ;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考； 此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再webpack.base.conf.js配置插件：plugins: [new webpack.ProvidePlugin({$: jquery,jQuery: jqu...
自定义指令：以v开头，如：v-mybind。 代码示例： <input v-mybind /> directives:{mybind:{bind:function (el) {el.value = "this is mybind-bind"}}} 这时页面初始化时，input中会显示this is mybind-bind。 通过directives注册自定义指令mybind，每一个自定义指令中又提供若干钩子，如示例中的bind，bind的作用是定义一个在绑定时执行一次的初始化动作，观察bind函数，它将指令绑定的DOM作为一个参数，在函数体中，直接操作DOM节...
实现一个日期组件，如图：components.js代码如下： Vue.component(sc-calendar,{template:<div class="scCalendar"> +<div class="calendar_header"> +<div class="prev" @click="prevMonth"> < </div> +<span class="text_year">{{currentYear}}年</span> +<span class="text_month">{{currentMonth}}月</span> +<div class="next" @click="nextMonth"> > </div> +</div> +<div class="calendar_content"> +<ul class="week"> +<l...
通过style改变样式 <div :style="{ min-height: size + px }"></div> <div :style="[{ min-height: size + px },{color:red}]"></div> <div :style="{ opacity: value ? 0.5 : 1 }"></div> 通过className改变样式 ?<div class="static"v-bind:class="{ active: isActive, text-danger: hasError }"> </div><script> data: {isActive: true,hasError: false } </script><style> .active{... } .text-danger{... } </style>PS：下面...
下面通过代码给大家介绍vue 属性拦截实现双向绑定，具体代码如下所示： let obj = {} let get = Object.defineProperty(obj, get, {set: function(val) {document.getElementById(input).value = valdocument.getElementById(text).innerHTML = val} }) document.getElementById(input).addEventListener(keyup, function(e) {obj.get = e.target.value }) obj.get = helloPS：下面看下vue中属性绑定和双向绑定的实例代码 一、属性...
安装vue依赖 使用npm npm install echarts --save使用yarn yarn add echarts使用国内的淘宝镜像： //安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org//从淘宝镜像下载 cnpm install echarts -S引入ECharts 安装好的ECharts会放在node_modules目录下。 全部引入 1.直接在项目代码引入 可以直接在项目代码中 require('echarts') 得到 ECharts。声明一个echarts变量，直接使用变量即可。 Home.vue //需...
Vue —$set 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性 data () {return {student: {name: ,sex: }} } mounted () { // ——钩子函数，实例挂载之后this.student.age = 24 }原因是：受 ES5 ...
1. 安装 npm i vue-ueditor --save-dev 2.从nodemodels 取出ueditor1_4_3_3 这整个目录，放入vue 的 static 目录 3.配置 ueditor.config.js 的 21行代码 更改路径 var URL = '/static/ueditor1_4_3_3/' || getUEBasePath(); (1) serverUrl: URL + php/controller.php, 这里是你配置的上传内容的 url ；不需要可以删除；（2） 部分人使用时出现以下报错：Uncaught TypeError: caller, callee, and arguments properties...
特征 ?轻量，高效，按需绑定事件 ?支持按需导入ECharts.js图表??和组件 ?支持组件调整大小事件自动更新视图 一、安装 npm install --save echarts vue-echarts-v3 二、用法 用 vue-cli 搭建的项目，打开 build 文件夹中的 webpack.base.conf.js 文件 1、webpack 1.x 修改成如下{test: /\.js$/,loader: babel,include: [path.join(prjRoot, src),path.join(prjRoot, node_modules/vue-echarts-v3/src)],exclude: /node_modules(?![\...
项目示例地址： https://github.com/ccyinghua/webpack-multipage 项目运行: 下载项目之后 # 下载依赖 npm install # 运行 npm run dev http://localhost:3000/login.html http://localhost:3000/index.html一、开发环境 node v6.11.0 二、安装vue-cli脚手架 npm install vue-cli@2.8.2 -g 三、初始化项目 vue init webpack webpack-multipage // 创建项目 cd webpack-multipage // 进入webpack-multipage目录 npm install // 下载...
todoList 结合之前 Vuejs 基础与语法 ?使用 v-model 双向绑定 input 输入内容与数据 data ?使用 @click 和 methods 关联事件 ?使用 v-for 进行数据循环展示 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>TodoList</title><script src="./vue.js"></script> </head> <body><div id="root"><div><input v-model="inputValue"/><button @click="handleSubmit">提交</button></div><ul><li v-for="(item,inde...
vue中的插槽有三种：单个插槽、具名插槽、作用域插槽，这个在官网上能看到 （https://cn.vuejs.org/v2/guide/components.html#单个插槽） 作用域插槽简单来说就是父组件只管显示样式，数据由子组件来提供。比如上面的代码，el-table-column内的template是传递给其内部solt的显示内容，但是scope的值是由el-table-column内部solt绑定的数据返回的。这个数据具体是什么由el-table-column中指定，类似： <slot name="**" :data="data"...
下载地址： https://github.com/imxiaoer/FloatToolBar 因为是个常见的功能，所以写个组件。效果图如下：组件具体代码如下： tool.vue <template><ul class="float-tool"><li class="hasChild"><span class="tool-icon icon0"></span><span>联系电话</span><div class="txtbox"><span>请拨 102-0012-9242</span></div></li><li><span class="tool-icon icon1"></span><span>QQ 客服</span></li><li class="hasChild"><span class="...
这篇文章给大家介绍vueJs实现DOM加载完成之后自动下拉到底部，文中给大家记录了整个问题的过程，对实现思路感兴趣的朋友大家阅读下本文。 /.....................................更新..................................../ 这个问题是很早之前遇到的，后来想来，其实是个很简单的问题。在dom记载完成就自动下拉到底部，只需要使用Vue.nextTick(() => {})函数即可，因为vue是虚拟dom，不会实时更新dom，nectTick()就是注册在下一次...
Vue 莹石摄像头直播视频代码。 HTML代码： <div class="mainClass" v-show="rtmp_url!="><video id="myPlayer" controls playsinline webkit-playsinline autoplay><source type="application/x-mpegURL" :src="http_url"/><source :src="rtmp_url"/></video> </div>直播地址是调用接口获取的。 <script> export default {data(){return{player:"",rtmp_url:"",http_url:"",message:加载中...,}},mounted(){ this.GetLiveUrl();...