医疗网站是否全部需要前置备案,响应式网站好吗,合肥关键词排名,做网站浏览器必须用xp系统吗1.App.vue中#xff1a; 2.在main.js中的new vueRouter里设置mode:history或者hash #xff1b;设置{path:/,redirect:home}默认进入的路径#xff1b;设置linkActiveClass改变路由激活时的class名#xff1b;也定义全局基本样式和全局过滤器等#xff0c;例如#xff1a…1.App.vue中 2.在main.js中的new vueRouter里设置mode:history或者hash 设置{path:/,redirect:home}默认进入的路径设置linkActiveClass改变路由激活时的class名也定义全局基本样式和全局过滤器等例如 import moment from moment;
Vue.filter(datefmt,function(input,fmtstring){
// 使用momentjs这个日期格式化类库实现日的格式化功能return moment(input).format(fmtstring);
}); 在oschina git代码 git init
git add.
git commit -m 项目版本1
git remote add origin https://git.oschina.net/.../...
git push -u origin master 更改原类库的css时遇到伪类图标时可以修改成自定义图片 .mui-icon-phone:before{content: ;background-image: url(../../statics/imgs/3.png);display: inline-block;//将行间变成块级元素width: 50px;height: 50px;background-repeat: round;} v-bind{to:/news/newsinfo/item.id} 特殊写法 通过this.$route.params.id获取main.js中设置的路由id值 用post方法提交评论数据 postData(){if (this.content.trim().length 0) {Toast(评论不能为空);return;}this.$http.post(/api/comment/ this.id, {content: this.content,}).then(res { //, {params: {cId: this.id}}可以传值给后台node服务器在content后console.log(res);Toast(成功提交);this.list [{user_name: 匿名用户, add_time: new Date(), content: this.content }].concat(this.list); this.content ; }) }, get评论数据 getcommentlist(pageindex1){1.0 确定评论数据的urllet url common.apidomain /api/getcomments/this.id?pageindexpageindex;2.0 发出ajax请求获取数据即可this.$http.get(url).then(function(res){if(res.data.status ! 0 ){Toast(res.data.message);return;}3.0 将message数组中的数据赋值给this.listthis.list this.list.concat(res.data.message);});} 实现更多页的加载 getmore(){1.0 实现this.pageindex值的增加1this.pageindex;console.log(this.pageindex); 2.0 获取当前this.pageindex值对应的分页数据this.getcommentlist(this.pageindex);} 设置overflow-x:auto;出现x轴滚动条 通过v-bind绑定样式 ul v-bind{style:width:ulWidthpx}--------------------------------------------------------------------------------------------------------------let w 62;let count res.data.message.length 1;this.ulWidth w * count ; 使用插件时比如vue-preview记得确认在webpack.config.js的loader中增加扩展名如.svg,vue-preview不能放在a/a中 在photoinfo的getimgs方法里通过forEach遍历服务器数据来按照vue-preview的要求更改图片宽高 getSuolue(){this.$http.get(/api/suoluetu).then(res{ res.data.forEach(item{let imgdocument.createElement(img);img.srcitem.src;item.himg.height;item.wimg.width;});this.listres.data;})} 在子组件inputNumber.vue中定义加和减的方法通过this.$emit传值给父组件 methods:{substrict(){this.count--;确保最小值为1if(this.count 1){this.count 1;}this.sendmessage();},add(){this.count;this.sendmessage();},sendmessage(){this.$emit(dataobj,this.count);}} 在父组件goodsinfo.vue中 inputnumber v-on:dataobjgetcount classinputnumber/inputnumber----------------------------------------------------------------------------------getcount(count){this.inputNumberCount count;},
// getcount中的第一个参数就是子组件inputNumber中传递过来的count值 通过localStorage完成在goodsinfo.vue中点击 加入购物车 将数据同步至app.vue中的购物车页面 1. 只有2个vm对象是同一个对象时才能实现父子间传值于是可以创建一个公共的vm.js文件(将购买数量添加至app.vue下方的购物车徽章。 //vm.js
import Vue from Vue;export const COUNTSTR inputNumberCount;
export var vm new Vue(); //goodsinfo.vue import {vm,COUNTSTR} from ../../kits/vm.js; toshopcar(){
// 1.0 触发事件vm.$emit(COUNTSTR,this.inputNumberCount);} //app.vue
import {vm,COUNTSTR} from ./kits/vm.js;// 利用 vm.$on() 来注册 COUNTSTR这个常量代表的事件vm.$on(COUNTSTR,function(count){
// 1.0 将count值追加到购物车中var badgeobj document.querySelector(#badge);badgeobj.innerText parseInt(badgeobj.innerText) count;}); 2.封装localSg.js // 1.0 定义常量key,将来操作的localStorage中的数据都以这个key来作为标识
export const KEY goodsdata;
export let valueObj {goodsid:0,count:0};// 2.0 实现数据的增加
// value;格式 {goodsid:87,count:10}
export function setItem(value){//1.0 获取json格式let jsonString localStorage.getItem(KEY);jsonString jsonString || [];let arr JSON.parse(jsonString);// 2.0 将value追加进入arrarr.push(value);// 3.0 将arr 转换成json字符串保存起来localStorage.setItem(KEY,JSON.stringify(arr));
}// 3.0 获取数据
export function getItem(){let jsonString localStorage.getItem(KEY);
// 将json格式字符串转换成 js对象// jsonString是一个标准的json格式jsonString jsonString || [];return JSON.parse(jsonString);
} 在goodsinfo中使用 import {setItem,valueObj} from ../../kits/localSg.jstoshopcar(){
// 1.0 触发事件vm.$emit(COUNTSTR,this.inputNumberCount);
// 2.0 将数据保存到localStroage中valueObj.goodsid this.id;valueObj.count this.inputNumberCount;setItem(valueObj);} 使用index使开关互不干扰 div classrow v-for(item,index) in datalistmt-switch classswitch v-modelvalue[index]/mt-switchgetdatalist(){
// 1.0 从localstorage中获取到所有的商品id值
// obj的格式{
// 87:4,
// 88:1
// }let obj getgoodsObject();
// 2.0 将id值按照 api的参数格式提交给apilet idstring ;for(let key in obj){idstring key ,;}idstring idstring.substring(0,idstring.length-1);//提交服务器的数据格式为/id1,id2,id3... 整合数据格式从[{goodsid:87,count:2},{goodsid:88,count:3}]变成{87:2,88:3} export function getgoodsObject(){
// 获取 数组
/*
* arr的格式
* [{goodsid:87,count:1},{goodsid:87,count:3},{goodsid:88,count:1}]
* */let arr getItem();
// 将arr数组中的goodid相同的多个对象合并成同一个对象let resObj {};for(let i 0 ; iarr.length; i){if(!resObj[arr[i].goodsid]){// 如果没有当前商品的数据则添加一个数据resObj[arr[i].goodsid] arr[i].count;}else{// 已经有当前商品的数据了则将cont追加let count resObj[arr[i].goodsid];resObj[arr[i].goodsid] count arr[i].count;}}return resObj;
} 实现购物车里的购买数量组件cartInputNumber.vue: 拿到服务器的数据后先进行处理cart.vue this.$http.get(url).then(function(res){//状态值的判断if(res.data.status ! 0 ){Toast(res.data.message);return;}
// 将locaStorage中的所有的商品对应的count的值赋值给message中每个对象的cou(服务器接口的数据res.data.message.forEach((item){item.cou obj[item.id];// obj是从localStorage中获取的数据let obj getgoodsObject();// 为了解决一个bug所以必须在此处初始化values数组全部为falsethis.value.push(false);});this.datalist res.body.message;}); cartInputNumber.vuecart的子组件中用props接受initCount和goodsid methods:{substrict(){this.count--;
// 确保最小值为1if(this.count 1){this.count 1;return;}this.sendmessage(substrict);},add(){this.count;this.sendmessage(add);},sendmessage(type){this.resObj.type type;this.resObj.goodsid this.goodsid;this.$emit(cardataobj,this.resObj);}} 在localSg中添加方法 //obj的格式{goodsid:87,type:add}
export function updateData(obj){let arr getItem();let count 1;if(obj.type add){//加arr.push({goodsid:obj.goodsid,count:count});}else{//减for(let i 0 ;i arr.length ; i){//如果这个对象中的count值等于1则删除这个对象否则将这个对象的count减1以后保存回去if(arr[i].goodsid obj.goodsid){if(arr[i].count 1){arr[i].count arr[i].count -1;break;}else{//删除此对象arr.splice(i,1);break;}}}}// 将最新的arr保存回localStorage中localStorage.setItem(KEY,JSON.stringify(arr));} 在cart中使用 getiInputNumber(resObj){console.log(resObj);
// 1.0 更新localStorage中的数据updateData(resObj);// 2.0 更新 this.datalist中的当前数量for(let i 0;i this.datalist.length ; i){if(this.datalist[i].id resObj.goodsid){if(resObj.type add){this.datalist[i].cou this.datalist[i].cou 1;}else{this.datalist[i].cou this.datalist[i].cou - 1;}break;}}}, 实现小球飞入购物车功能 transition nameshow before-enterbeforeEnter enterenter after-enterafterEnter div v-ifisshow classball/div/transition
---------------------------------------------------------------------------------------------------------动画3个方法beforeEnter(el){
// 设定小球的初始位置el.style.transform translate(0px,0px);},enter(el,done){
// 保证小球出现动画el.offsetWidth;// 设置小球的结束位置el.style.transform translate(75px,366px);// 结束动画done();},afterEnter(el){
// 重置小球的初始状态this.isshow !this.isshow;}------------------------------------------------------------------------------------.ball{background-color: red;height: 20px;width: 20px;border-radius: 50%;position: absolute;left:150px;top:10px;transition: all 0.4s ease;z-index: 100;} 转载于:https://www.cnblogs.com/jiuyejiu/p/8361741.html
