vue.js
tangchangcai.
做一名正直勇敢的青年
展开
-
vue-cli webpack 引入jquery
参考:https://segmentfault.com/a/1190000007020623https://www.baidu.com/s?ie=UTF-8&wd=vue-cli%20%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8jQueryvue-cli webpack 引入jquery今天费了一下午的劲,终于在vue-cli转载 2018-01-11 20:10:01 · 410 阅读 · 0 评论 -
vue.js中的表单radio,select,textarea的v-model属性的用法
只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值。section1--input:type="text" type="text"不要在标签上定义value值(因为vue已经处理了),要用v-model="currentValue" data:{currentValue:"xxx"} <input type=...原创 2018-05-03 18:04:15 · 6565 阅读 · 1 评论 -
vue.js 中如何监听watch:{}对象中的某个属性的变化,做相应的操作
监听某个对象中的某个属性:data:{ ob:{ toggle:true }}<div id="app"> <input type="checkbox" v-model="ob['toggle']" //也可以这么写 v-model="ob.toggle" true-value="yes1" false原创 2018-05-03 21:02:14 · 14573 阅读 · 2 评论 -
时刻要注意引用类型{},[],将它们赋值是赋指针,而不是赋副本。
应用场景,主要是引用类型{} and []:var aa = {arr:[1,2],name:"tcc"};var bb = aa;var cc = aa;bb.arr = [8,9];$("#mya").click(function(){ console.log('cc',cc); console.log('bb',bb); console.log('aa',aa);})...原创 2018-05-05 12:38:25 · 207 阅读 · 0 评论 -
vue原码分析
我还没有认真看,先收藏http://www.jqhtml.com/9032.htmlhttps://github.com/DDFE/DDFE-blog/issues/8转载 2018-05-07 22:15:37 · 185 阅读 · 0 评论 -
10.在父子组件通信中,要注意若$on触发n次,会造成$emit触发$on的次数是n倍
In case:中间件:父组件中的.vue methods:{ listensub:()=>{//注意这个会多次成倍的触发 connector.$on("phone",(msg)=>{ console.log("msg===",msg); ...原创 2018-06-13 15:09:31 · 2815 阅读 · 0 评论 -
Vue.js 开发中常用的组件
1.PC开发element-ui2.移动端-mint-ui -- 饿了吗开发原创 2018-08-01 17:05:52 · 759 阅读 · 0 评论 -
如何在vue-cli 中使用mockjs
请参考:http://www.php.cn/js-tutorial-384087.html转载 2018-08-13 15:53:18 · 645 阅读 · 0 评论 -
vue 做后台管理系统
目录结构:请参考:http://www.cnblogs.com/herozhou/p/7434931.html2万多星的elementui模板,后台管理系统:https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md...原创 2018-08-22 17:40:03 · 10589 阅读 · 0 评论 -
vue2.js中配置项两个template的用法详解
1.先看vue的生命周期,图示:3步 2.重点,这个template不是<template />自带标签。template配置项专门用来替换el的。值可以是"<div></div>",也可以是全局或局部组件。2.1 template是组件的情况下必须先注册(全局或局部)2.2 如果不是组件,则可以是任意字符串。var aa =...原创 2018-09-29 17:58:29 · 6540 阅读 · 0 评论 -
H5的drag使用说明和vue2.0拖拽排序示例
html5 drag api详解 (引用原文https://www.cnblogs.com/wuya16/p/DragApi.html) 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 diffX ,diffY 2.在mousedown中绑定 document的mous...原创 2018-10-31 17:44:14 · 3655 阅读 · 0 评论 -
vue2.0自定义组件的v-model原理详解,model的定义
以下示例是用单页面的形式写的。a.vue // a.vue是父级引用组件b.vue<template><!-- 这儿是组件的父级,也就是组件的实例。实例本来应该定义事件来监听子组件的一切“异动”, 但v-model呢却是给组件内部加个model:{prop:"自定义",event:"自定义"}来监听子组件的变化--> <c...原创 2018-11-01 17:56:13 · 5363 阅读 · 0 评论 -
a标签实现下载文件或称导出文件
简单的下载示例:<a href="url"></a><img src="url" />文件下载原理: java后台只能做到返回二进制流或文件给前端,最终在前端页面创建一个a,然后触发a的点击事件实现点击下载效果。接口:export function exportfile_goods(jsonobj){ // 导出商品文件 ...原创 2018-11-02 12:00:56 · 15496 阅读 · 1 评论 -
vue.js 的引用对象检测
section1:以传参的形式不能直接变更vm.arr数组引用类型。section2: testing code:var myarr = [1,2];$("#btn").click(function(){ fn(myarr);//引用类型的传递})function fn(p){ p = [4,5];//这里myarr不会变成1,2,而是重新开...原创 2018-04-15 22:37:24 · 1098 阅读 · 0 评论 -
vue多页面开发的路由使用
reference:https://www.cnblogs.com/axl234/p/5899952.htmldownload vue-router.js:reference: https://unpkg.com/vue-router/dist/vue-router.js转载 2018-04-02 22:49:11 · 4852 阅读 · 1 评论 -
this.$nextTick ,页面加载完再执行其它操作
原创 2018-01-17 08:31:02 · 2912 阅读 · 0 评论 -
vue 中updated的使用
updated : function(){//什么时候 进updated方法?//只有事先设置好的data变量改变并且要在页面重新渲染{{}}完成之后,才会进到这个方法,光改变data但不渲染页面//是不会进来的 console.log("1==我会先执行"); this.$nextTick(function(){ //在下次 DOM 更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法...原创 2018-02-01 14:34:26 · 101584 阅读 · 0 评论 -
vue中所使用import 和 exports 和 module.export(es6语法)
参考:https://www.cnblogs.com/pengaijin/p/7646524.html转载 2018-01-06 21:29:34 · 17847 阅读 · 0 评论 -
更方便开发测试的vue.js引入方式
1.方式一,会有更友好的提示:www.bootcdn.cn/vue原创 2018-01-10 10:40:57 · 316 阅读 · 0 评论 -
devtools调试工具的安装,用于vue项目
1.去这个地址下载:https://github.com/vuejs/vue-devtools2.将文件解压到一个文件夹,找开cmd并进入这个文件夹,安装项目所需要的npm包 cnpm install3.编译项目文件: cnpm run build4.添加至chrome浏览器游览器输入地址“chrome://extensions/”进入扩展程序页面,点击“加载已解压的扩展程序…...原创 2018-02-02 16:38:48 · 230 阅读 · 0 评论 -
jQuery如何操作用Vue.js template的元素,用vm.$refs.id--id是vue的ref指定的一个引用
目标:我想用jQuery操作vue模板中的元素;示例html: 我是内容示例js:var vm = new Vue({updated: function () {//这样保证vue的html渲染完成,就可以用ref对其操作了 this.$nextTick(function () { // Code that will run only after t原创 2018-01-20 22:05:17 · 3725 阅读 · 0 评论 -
父子孙组件的传值说明和 Vue.component 与 new Vue({components:{} })的区别说明
var myheader_child = { template: "<a >{{ geta }}{{getb}}{{getcount}}</a>", props:["geta","getb","getcount"]}var myheader = { template: "<p ><myheader-原创 2018-03-04 21:10:34 · 4882 阅读 · 0 评论 -
vue.js 中 :is 与 is 的用法和区别,学习全局与局部注册组件
vue中 is用来动态切换组件,详细请看示例:(顺便讲解父向子组件的传递信息)html:<div id="app"> <!-- 1.在这里调用组件。 2.vue初始化实例配置项,挂载到#app,并调用了子组件(自定义组件first_component),通过在子组件内 提前定义props:['pass_c']接收...原创 2018-03-05 23:07:14 · 19265 阅读 · 0 评论 -
v-for在组件中使用的注意点
原码:var myheader = { //attention point:v-for 不能入在p中,即v-for外层一定要有一个元素包裹着 template:"<p><span v-for='myitme in doList'>{{myitme.order}}</span><br></p>", props:["doL.原创 2018-03-06 12:02:26 · 1882 阅读 · 0 评论 -
.vue文件代码自动补全设置(idea编辑器)
第一步,右键idea 的file点settings or ctrl+ alt+ s即可创建了new vue files 的模板模板的初始化代码:<template> <div> {{msg}} </div></template><style> body { background-color: gr...原创 2018-04-01 10:59:41 · 14642 阅读 · 1 评论 -
mock.js前后端分离数据模拟
当后台人员没有写好api时,可以先使用mock.js来模拟数据。1.please:https://github.com/nuysoft/Mock/wiki已经有6900+ star2.在vue中使用mock.jsreference: https://segmentfault.com/a/1190000010592626...原创 2018-04-02 14:55:36 · 712 阅读 · 0 评论 -
vue.js 中fnname($event--js原生事件的event对象)
在调用事件时传$event--(固定写法)来捕获原生DOM对象point: 1.target--指当前触发的对象 2.currentTarget--指当前绑定事件的对象e.g:model:js:原创 2018-04-15 12:55:50 · 958 阅读 · 0 评论 -
vue-simple-uploader超大文件分片秒传和断点续传
实例:<!--属性表单--><el-dialog title="导入zip压缩文件" :visible.sync="importZipFile_dialog" width="900px" v-loading="myloading"> <el-form label-position="right"> &原创 2018-12-23 20:52:09 · 13142 阅读 · 8 评论