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(pageindex=1){ 1.0 確定評論數據的urllet url = common.apidomain + '/api/getcomments/'+this.id+'?pageindex='+pageindex; 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:'+ulWidth+'px'}">
--------------------------------------------------------------------------------------------------------------
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 img=document.createElement('img');img.src=item.src;item.h=img.height;item.w=img.width;});this.list=res.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:dataobj="getcount" class="inputnumber"></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追加進入arr arr.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.js'toshopcar(){ // 1.0 觸發事件vm.$emit(COUNTSTR,this.inputNumberCount); // 2.0 將數據保存到localStroage中valueObj.goodsid = this.id;valueObj.count = this.inputNumberCount;setItem(valueObj);}

?

使用index使開關互不干擾

<div class="row" v-for="(item,index) in datalist"><mt-switch class="switch" v-model="value[index]"></mt-switch>getdatalist(){ // 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 ; i<arr.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.vue（cart的子組件）中用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 name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter ><div v-if="isshow" class="ball"></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

總結

以上是生活随笔為你收集整理的vue2+node+mysql demo总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。