computed和watch　　1、computed有缓存，data不变择不会重新计算　　2、watch的深度监听(监听引用类型)　　3、watch监听引用类型，拿不到oldVal一、watch的普通监听如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。<el-inputv-model="demo"></el-input>{{value}}exportdefault{data(){　return{　　demo:'',　　value:''　};},watch:{　demo(val){　　this.value=this.demo;　}}}　　上面这个就浅显易懂了，通过watch来直接监测demo，如果demo的值变化，value的值也会跟着一起变化。二、如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成。<el-inputv-model="demo.name"></el-input>{{value}}exportdefault{data(){　...

1、上啦加载下拉刷新的使用this.$refs.loadmore.onTopLoaded();this.$refs.loadmore.onBottomLoaded();上啦刷新下拉加载的动画显示在没有数据的请求前想看见的话setTimeout(()=>{this.$refs.loadmore.onTopLoaded();},1000);jq的思路：　　默认加载第一页，然后下拉的时候在请求数据在加载。在这里：　　函数loadTop()；loadBottom()会被默认家在一次，因此就相当于是默认加载了。只需要在数据上处理的时候分清楚就行。另外上啦加载，第二页的数据插进去的方法是，将新的请求到的数据和原先的数据合并。this.homeList=this.homeList.concat(response.data.list);//新的也就是下一页的数据response.data.list ...

首先要声明使用ajax在router下边的Index.js中importVueResourcefrom'vue-resource';Vue.use(VueResource);ajax和jsonp使用方法：//在Vue实例类使用this.$http.get(url,[options]).then(successCallback,errorCallback);vartest=newVue({el:'#v',data:{jsonUrl:'xxxx',jsonpUrl:'xxxxx',req:{}resData:[]},mthods:{init:function(id){this.$http.get(this.jsonUrl,this.req).then(function(res){console.log(res);this.$set('resData',res);},function(res){console.warn(res);})},cli:function(id){//jsonp请求this.$http.jsonp(this.jsonpUrl).then(function(res){c...

一、在这里介绍一个vue的时间格式化插件:moment　使用方法：1.npminstallmoment--save2. 2定义时间格式化全局过滤器　　在main.js中导入组件　　importmomentfrom'moment'　　Vue.filter('dateformat',function(dataStr,pattern='YYYY-MM-DDHH:mm:ss'){  　　returnmoment(dataStr).format(pattern)　　})　　filter两个参数第一个是函数名 第二个是时间格式化处理的函数 3只需要在需要格式化时间的地方使用插值表达式就OK了 <!--子标题-->   <pclass="subtitle">     <span>发表时间：{{newsinfo.add_time|dateformat('YYYY-MM-DDHH:mm:ss')}}</span>&nb...

父子组件通信其实就是props和$emit的使用　　总结就是：父子组件通信，父组件传递数据给子组件，子组件触发父组件方法并传递父组件数据，通过props和$emit来实现；非父子组件通信，就是通过自定义事件来实现，不过Vueevent自带了这个属性，所以直接通过event.$emit和event.$on来实现一、父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent><child:child-msg="msg"></child>//这里必须要用-代替驼峰</parent>data(){return{msg:[1,2,3]};}子组件通过props来接收数据: 方式1：props:['childMsg']方式2:props:{childMsg:Array//这样可以指定传入的类型，如果类型不对，会警告}方式3：props:{childMsg:{type:Array,default:[0,0,0]//这样可以指定默认的值}}这样呢，就实现了父组件向子组件传递数据.具体子组件方法<...

一、单个插槽父组件app.vue<template><divid="app"><test-slot><span>我是父组件里的文字，但是我要被放到子组件里</span></test-slot></div></template><script>importtestSlotfrom'./components/testSlot'exportdefault{components:{testSlot}}</script>子组件testSlot.vue<h3>test-slot</h3>//父组件里的span会替换掉slot所以这里的123是看不见的//如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot123会显示出来<slot>123</slot>二、多个插槽也叫具名插槽具名插槽就是将某个名字的内容插到子组件对应名字里面去  三、作用域插槽（将子组件的值传到父组件供使用）父组件app.v...

1.安装vue-i18n：npmivue-i18n-S当然你也可以这样：<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>2.项目配置vue-i18n：在src目录下创建i18n文件夹，在i18n文件夹内添加基础配置及各语言文本配置文件；在index.js进行如下设置：importVuefrom'vue';importVueI18nfrom'vue-i18n';Vue.use(VueI18n);//引入各个语言配置文件importzhfrom'./config/zh';importenfrom'./config/en';//创建vue-i18n实例i18nconsti18n=newVueI18n({//设置默认语言locale:localStorage.getItem('locale')||'zh',//语言标识//添加多语言（每一个语言标示对应一...

一、Vue的动态引入组件；　　有的时候不知道引入什么组件，要根据数据的类型来引入不同的组件，这个时候就需要动态组件动态组件　　1、用法:is='component-name'　　2、用途需要根据数据，动态渲染的场景。即组件类型不明确父组件<component:is="nextTiceName"/>":is后边是组件名，是一个变量，本例子中变量为nextTiceName，然后nextTiceName返回了组件名，变量可以函数返回或者根据数据处理返回；数据中importNextTickfrom'@/components/nextTice'exportdefault{components:{NextTick},data(){nextTiceName:'NextTick'}}二、异步组件　　有的时候一个组件特别大，而且不是初始化的时候才需要，特定时候才需要这时候就要异步加载　　1、import函数　　2、按需加载，异步加载大组件父组件<FormDemov-if="formDate"/>  在这里formDate 控制这个组件是否显示，例如特...

1.在百度地图申请密钥: http://lbsyun.baidu.com/  将<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>中的密钥替换成你申请的,在vue项目的index.html引用。2.在build文件下下的webpack.base.conf.js贴入代码externals:{"BMap":"BMap"},3.map.vue代码(demo可以直接使用,demo使用了vue-clipboard2插件,请自行安装)<template><div><el-row><el-col:offset="2":span="8"><el-input:id="suggestId"v-model="address_detail":clearable='clearable'placeholder="请输入店铺地址,获取店铺坐标"></el-input>...

Vue项目部署上线后经常会发现首屏加载的速度特别慢：那么有那写能做的简单优化呢一、路由的懒加载路由懒加载也就是把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。 结合Vue的异步组件和Webpack的代码分割功能，轻松实现路由组件的懒加载。 在router中，我们平时是这样引入组件的：importFoofrom'./Foo.vue'文档中指出，如下定义一个能够被Webpack自动代码分割的异步组件constFoo=()=>import('./Foo.vue')在路由配置中什么都不需要改变，只需要像往常一样使用Foo：constrouter=newVueRouter({routes:[{path:'/foo',component:Foo}]})官网介绍地址：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html二、使用cdn 打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn直接引入到根目录的index.html。&nbs...

因微信分享和自动登录需要，对于URL中存在'#'的地址，处理起来比较坑（需要手动写一些代码来处理）。还有可能会有一些隐藏的问题没被发现。如果VUE能像其他（JSP/PHP）系统的路径一样，就不存在这些问题了。对于VUE的router[mode:history]模式在开发的时候，一般都不出问题。是因为开发时用的服务器为node，Dev环境中自然已配置好了。但对于放到nginx下运行的时候，自然还会有其他注意的地方。总结如下：在nginx里配置了以下配置后，可能首页没有问题，链接也没有问题，但在点击刷新后，页面就无法显示了（404）location/{root/data/nginx/html;indexindex.htmlindex.htm;}为了解决404，需要通过以下两种方式:方式一location/{root/data/nginx/html;indexindex.htmlindex.htm;error_page404/index.html;}方式二location/{root/data/nginx/html;indexindex.htmlindex.htm;if(!-e$reques...

前端开发中，为了更好的用户体验，在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法。html代码：<divid="myPhoto"v-show="personalPhoto"><divclass="viewPhoto"><imgsrc="">""id="portrait"color:#800000;">"width:300px;height:300px"/></div><divclass="listBox"><dl><dt>请上传图片</dt><dd><inputtype="file"id="saveImage"name="myphoto"></dd></dl></div><divclass="save"><inputtype="button"value="保存图片"@click="imageSubmit"></div></div>js代码：//...

vue2.0模拟锚点实现定位平滑滚动 　　效果为点击哪一个标题，平滑滚动到具体的详情。　　如果是传统项目，这个效果就非常简单。但是放到Vue中，就有两大难题：　　1.在没有jQuery的animate()方法的情况下，如何实现平滑滚动？　　2.如何监听页面滚动事件？　　进行多次尝试之后，终于解决了这些问题　　期间主要涉及到了 setTimeout的递归用法，和Vue生命周期中的 mounted　　首先导航处<h3class="current"><ahref="javascript:;"class="button"@click="jump(0)">产品详情</a></h3><h3><ahref="javascript:;"class="button"@click="jump(1)">预定须知</a></h3><h3><ahref="javascript:;"class="button"@click="jump(2)">费用明细</a&...

1.实现效果以get方法向http://192.168.32.12:8080/users发起请求、获取数据并进行处理this.apiGet('/users',{}).then((res)=>{console.log(res)},(err)=>{console.log(err)})2.实现步骤一之配置域名前缀2.1安装axioscnpminstallaxios--save2.2配置webpack.base.conf.js文件引入constwebpack=require('webpack')在项目根目录下的build中可以找到webpack.base.conf.js文件，对文件中的内容进行以下两项操作：　　在module.exports之前插入代码//definethedifferentHOSTbetweendevelopmentandproductionenvironmentvarDEV_HOST=JSON.stringify('http://192.168.32.12：8080')varPUB_HOST=JSON.stringify('http://{部署服务器ip和端口}...

这是一个vue的插件，使用canvas来生成图形验证码。具体参数如下： identify.vue组件（主要用于定义参数和方法）<template><divclass="s-canvas"><canvasid="s-canvas":width="contentWidth":height="contentHeight"></canvas></div></template><script>exportdefault{name:'SIdentify',props:{identifyCode:{type:String,default:'1234'},fontSizeMin:{type:Number,default:16},fontSizeMax:{type:Number,default:40},backgroundColorMin:{type:Number,default:180},backgroundColorMax:{type:Number,default:240},colorMin:{type:N...