看美女操逼,www.P中文字幕,亚洲1 区色

vue-cli搭建項(xiàng)目

確保安裝了node與npm
再目標(biāo)文件夾下打開(kāi)終端
執(zhí)行cnpm i vue-cli -g全局安裝

以上安裝完成后下次搭建不需再寫(xiě)

運(yùn)行vue init webpack vue_mall(項(xiàng)目名稱(chēng))
進(jìn)入項(xiàng)目文件夾下執(zhí)行cnpm install安裝package.json的依賴(lài)文件
運(yùn)行項(xiàng)目執(zhí)行npm run dev

關(guān)于每個(gè)組件內(nèi)屬性的順序

多人開(kāi)發(fā)時(shí)盡量保持每個(gè)組件 export default {} 內(nèi)的方法順序一致，方便查找對(duì)應(yīng)的方法。

推薦： data（方法）、props（數(shù)組）、鉤子（方法）、watch（對(duì)象）、computed（對(duì)象）、components（對(duì)象）

組件

在組件里的template里寫(xiě)上html（注意要有個(gè)根元素，一般為div）
在組件里的style里寫(xiě)上css樣式（如果不是作用于全局的樣式，一般在style后面跟上scoped，但是要是加了反而改變了原有的樣式，就不要加）

注冊(cè)

全局注冊(cè)
Vue.component('my-component', { //在main.js中
// 選項(xiàng)
})
局部注冊(cè)
components: {
// <my-component> 將只在父組件模板中可用
'my-component': Child //es6語(yǔ)法：相同時(shí)可只寫(xiě)一個(gè)
}

vue-router

導(dǎo)入vue-router（main.js）
import vueRouter from 'vue-router'
html寫(xiě)代碼
1. 寫(xiě)觸發(fā)鏈接的標(biāo)簽（按需，沒(méi)有可不寫(xiě)）
  <router-link to="/newslist">新聞列表</router-link>
路由的占位符
<router-view></router-view>
javascript中寫(xiě)代碼
1. 定義組件【不要注冊(cè)，下面設(shè)置路由規(guī)則的時(shí)候，會(huì)自動(dòng)把我們的組件注冊(cè)】
  在component里新建一個(gè)組件xxx.vue
2. 創(chuàng)建路由對(duì)象，設(shè)置路由規(guī)則(自動(dòng)幫我們把組件注冊(cè))（router/index.js）
  在router/index.js中創(chuàng)建router，并設(shè)置routes
  const router = new vueRouter({
  routes: [{
  path: '/site',
  component: Layout
  }]
  }
  3.把我們上一步創(chuàng)建的路由對(duì)象，注入到根實(shí)例，這樣我們整個(gè)應(yīng)用就擁有了路由的功能（main.js）
  new Vue({
  el: '#app',
  router,
  render: h => h(App)
  })

$router&$route

相同點(diǎn)：
1. 都是屬于vue-router里面的
2. 必須要在集成vue-router的時(shí)候，使用Vue.use(VueRouter)，才會(huì)在vue原型上面綁定$route、$router這兩個(gè)屬性
不同點(diǎn):
1. $router是在編程式導(dǎo)航的時(shí)候，使用到它，它里面有兩個(gè)方法 $router.push、$router.go
2. $route 用來(lái)獲取路徑中的參數(shù)，$route.params.xxx，還可以通過(guò) $route.query.xxx來(lái)獲取路徑中的參數(shù) ,在監(jiān)控路徑變化的時(shí)候，使用到它

axios(獲取網(wǎng)絡(luò)請(qǐng)求)

導(dǎo)入axios（main.js）

import axios from 'axios'

使用axios(main.js)

Vue.prototype.$axios = axios

axios.defaults.baseURL = 'http://39.108.135.214:8899/'（方便起見(jiàn)可以設(shè)置根路由）

axios.defaults.withCredentials = true （在跨域的時(shí)候，允許訪問(wèn)服務(wù)器時(shí)帶上cookies）
1發(fā)送get請(qǐng)求
3.1.1 在發(fā)起請(qǐng)求組件的methods里添加函數(shù)

getGoodsGroup(){
const url = 'site/goods/getgoodsgroup/123'
this.$axios.get(url).then((response)=>{
this.goodsGroup = response.data.message
})
}

3.1.2 在組件加載前運(yùn)行該請(qǐng)求函數(shù)

created(){
    this.getGoodsGroup()
}

2發(fā)送post請(qǐng)求

與get類(lèi)似，不過(guò)請(qǐng)求參數(shù)的設(shè)置有所區(qū)別
有兩個(gè)格式可選，具體選哪種看后臺(tái)設(shè)置的contentType而定，一般后臺(tái)兩個(gè)格式都可以接收
- this.$axios.post(url,{username:'zhangsan',password:123}).then(response=>{})
- this.$axios.post(url,"username=zhangsan&password=123").then(response=>{})

導(dǎo)入文件

導(dǎo)入樣式
- 全局導(dǎo)入（main.js）
  import './statics/site/css/style.css'
- 局部導(dǎo)入
  @import './statics/site/css/style.css'
導(dǎo)入插件
1. 安裝
  cnpm i xxx -S

導(dǎo)入
import vueRouter from 'vue-router'
全局使用（如果不需要全局使用，則這步可以省略）
2.1 基于vue
Vue.use(vueRouter)
2.2 不基于vue
Vue.prototype.$axios = axios

導(dǎo)入jQuery
1.導(dǎo)入jQuery
1. 安裝
  cnpm i jquery -S
2. 在build/webpack.base.conf.js里加入
  var webpack = require("webpack")
3. 在module.exports的最后加入：
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.ProvidePlugin({
  jQuery: "jquery",
  $: "jquery"
  })
4. 在main.js中引入
  import $ from 'jquery'
5. 最后一定要重新npm run dev
  2.導(dǎo)入jQuery插件
6. 確保安裝了jquery
7. 在script中引入插件js
  import '~/site/js/jqueryplugins/jqimgzoom/js/magnifier.js'
8. 在style中引入插件css
  @import '../../../static/site/js/jqueryplugins/jqimgzoom/css/magnifier.css';
9. 在script的mounted生命周期鉤子中初始化，一般要給其增加延時(shí)，以防數(shù)據(jù)沒(méi)有請(qǐng)求回來(lái)
  setTimeout(() => {
  $(function () {
  $('#magnifier1').imgzoon({
  magnifier: '#magnifier1'
  });
  });
  }, 200)

關(guān)于router-link

router-link會(huì)自動(dòng)的把該元素變成a標(biāo)簽
添加了to屬性后，不需要原來(lái)的href屬性
to屬性動(dòng)態(tài)獲取其他值時(shí)前面要加冒號(hào)（：）
to屬性動(dòng)態(tài)拼接時(shí)外面的雙引號(hào)要寫(xiě)在里面所有字符串的外面，固定不變的值外面加上單引號(hào)以加號(hào)連接外部變量

過(guò)濾器

使用：加在雙花括號(hào)插值表達(dá)式中，以管道符號(hào)'|'指示：
{{message | dateFmt}}
定義：在局部組件的選項(xiàng)中定義局部過(guò)濾器，或者在創(chuàng)建 Vue 實(shí)例之前全局定義過(guò)濾器
內(nèi)部的函數(shù)可接受多個(gè)參數(shù)，第一個(gè)參數(shù)為上面message的值

filters: { //局部過(guò)濾器(xxx.vue)
dateFmt: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

Vue.filter('dateFmt',(value,fmt='YYYY-MM-DD')=>{ //全局過(guò)濾器（main.js）
return moment(value).format(fmt)
})

new Vue({
// ...
})

關(guān)于已定義的數(shù)據(jù)在模板與vue實(shí)例中調(diào)用形式

數(shù)據(jù)在模板中調(diào)用直接寫(xiě)屬性名
數(shù)據(jù)在vue實(shí)例中調(diào)用要在前面寫(xiě)上this，由vue實(shí)例調(diào)用

關(guān)于動(dòng)畫(huà)

在最外面的div內(nèi)定義transition組件，里面放要?jiǎng)赢?huà)的元素
給要?jiǎng)赢?huà)的元素設(shè)置css過(guò)渡樣式：
transition: all .5s
給要?jiǎng)赢?huà)的元素設(shè)置顯示隱藏：
v-show="isShowPic"
由另一個(gè)button設(shè)置觸發(fā)事件，改變isShowPic
給transition組件添加動(dòng)畫(huà)鉤子：
進(jìn)入：@before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
移出：@before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave"
在methods中定義各個(gè)動(dòng)畫(huà)鉤子
beforeEnter: function (el) {
el.style = 'transform:translateX(200px)'
},
enter: function (el, done) {
el.offsetWidth
el.style.transform = 'translateX(0px)'
done()
},
afterEnter: function (el) {
this.isShow = false
},
beforeLeave: function (el) {
el.style = 'transform:translateX(0px)'
},
leave: function (el, done) {
el.offsetWidth
el.style = 'transform:translateX(200px)'
el.addEventListener('transitionend', done)
},
afterLeave: function (el) {
this.isShow = false
}
注意：
- el指的是該動(dòng)畫(huà)元素
- 在before里寫(xiě)動(dòng)畫(huà)的起始狀態(tài)或位置、enter或leave里寫(xiě)動(dòng)畫(huà)的結(jié)束狀態(tài)或位置
- after里寫(xiě)動(dòng)畫(huà)的回調(diào)函數(shù)（如消失隱藏），在enter或leave里調(diào)用
- 關(guān)于done在進(jìn)入時(shí)可直接調(diào)用，不過(guò)在離開(kāi)時(shí)需要在過(guò)渡完成事件里調(diào)用
- 在enter或著leave中要添加el.offsetWidth刷新動(dòng)畫(huà)幀

關(guān)于ref

在dom元素中定義ref屬性，則可在vue示例中通過(guò)this.refs獲取所有有ref屬性的dom元素
ref獲取不到其父組件所定義ref的dom元素，可用id獲取

關(guān)于監(jiān)聽(tīng)路由跳轉(zhuǎn)

在watch屬性里添加監(jiān)聽(tīng)對(duì)象$route：對(duì)應(yīng)一個(gè)函數(shù)，當(dāng)路由的值發(fā)生變化時(shí)，重新渲染頁(yè)面

 watch: {
      // 監(jiān)控路由變化
      $route: function (val) {
        // 刷新商品詳情和評(píng)論數(shù)據(jù)
        this.getGoodsinfoData()
        this.getCommentData()
      }
    },

關(guān)于vuex

導(dǎo)入vuex，并聲明全局使用（main.js）

import Vuex from 'vuex'
Vue.use(Vuex)
創(chuàng)建store對(duì)象（main.js）

const store = new Vuex.Store({
state: {
count:1
},
getters:{
//獲取state數(shù)據(jù)
getCount(state){
return state.count
}
}, //對(duì)倉(cāng)庫(kù)的增刪改
mutations: {
addGoods(state,goodsObj){
state.count = addLocal(goodsObj)
}
}
})
注入根實(shí)例（main.js）
new Vue({
el: '#app',
router,
store, //<--見(jiàn)此處
components: { App },
template: '<App/>'
})
一般vuex會(huì)結(jié)合localStorage使用
4.1 新建一個(gè)common文件夾，一般與main.js同級(jí)，在里面創(chuàng)建一個(gè)localTool.js，專(zhuān)門(mén)用來(lái)寫(xiě)對(duì)本地存儲(chǔ)的增刪改查操作，并暴露出去
4.2 查找
const getLocal = () => {
return JSON.parse(localStorage.getItem('goods') || '{}')
}
1. 3 增加
  export const addLocal = (goodsObj) => {
  const localGoods = getLocal()
  if (localGoods[goodsObj.id]) {
  localGoods[goodsObj.id] += goodsObj.count
  } else {
  localGoods[goodsObj.id] = goodsObj.count
  }
  localStorage.setItem('goods', JSON.stringify(localGoods))
  return getTotal() //調(diào)用其他函數(shù)返回一個(gè)值
  }
在創(chuàng)建store對(duì)象前引入localTool.js
import {addLocal} from './common/localTool'
在store對(duì)象中添加mutations對(duì)象的方法，
示例方法是把值存入本地，調(diào)用localTool.js的addLocal方法，并同步state的count
mutations: {
addGoods(state,goodsObj){
state.count = addLocal(goodsObj)
}}
使用
- 使用mutations對(duì)象里的方法
  在調(diào)用mutation其中方法的組件中，使用：
  this.$store.commit('addGoods',goodsObj)
  【第一個(gè)參數(shù)是mutations的方法名，其他可選，是調(diào)用過(guò)程中會(huì)使用的參數(shù)】
- 使用getters獲取state（數(shù)據(jù)）
  在使用vuex狀態(tài)（即數(shù)據(jù)）的組件中，直接使用：
  this.$store.getters.getCount

父子組件傳值

一般情況

在父組件中集成子組件
1.1 創(chuàng)建子組件
新建一個(gè)vue組件，如：inputnumber.vue
1.2 在父組件中導(dǎo)入子組件
import inputnumber from '../subcomponents/inputnumber'
1.3 在父組件的components中注冊(cè)子組件
components: { inputnumber }
1.4 直接在父組件的template（模板）中，像自定義標(biāo)簽的形式使用
<inputnumber></inputnumber>
父組件傳值給子組件【通過(guò)props】
2.1 接收方 (inputnumber.vue) :子組件
子組件要顯式地用 props 選項(xiàng)聲明它預(yù)期的數(shù)據(jù)：
props: ['initCount']
1. 2 發(fā)送方 (shopcart.vue) :父組件
  在使用子組件的地方，即在子組件的標(biāo)簽中，通過(guò) 屬性名稱(chēng)=值的方式傳值,可動(dòng)態(tài)傳值
  <inputnumber :initCount="item.buycount"></inputnumber>
子組件把更改之后的值傳回給父組件【通過(guò)自定義事件】
3.1 接收方 (shopcart.vue) :父組件
3.1.1 父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽(tīng)子組件觸發(fā)的事件
@countChange="getChangedCount"
3.1.2 父組件在methods中定義觸發(fā)自定義事件后的方法
getChangedCount（changedGoods）{} //changedGoods為傳回的值
3.2 發(fā)送方（inputnumber.vue）:子組件
通過(guò)觸發(fā)事件傳值
this.$emit('countChange',{count:this.count}) //值可以是任何類(lèi)型

element-ui計(jì)數(shù)器的父子傳值

集成組件，設(shè)置他的最大和最小值

<template>
<el-input-number size="mini" :min="1" :max="10" v-model="num7"></el-input-number>
</template>
<script>
export default {
data() {
return {
num7: 1
}}};
</script>
把要傳給計(jì)數(shù)器的值放在v-model中，即修改v-model的值
把計(jì)數(shù)器增減后的值傳回來(lái)
- 設(shè)置change事件（標(biāo)簽），其中第一個(gè)參數(shù)是另外傳給計(jì)數(shù)器的值，最后一個(gè)參數(shù)是計(jì)數(shù)器完成操作后返回的結(jié)果
  @change="changeCount(item.id, $event)"
- 設(shè)置change事件（methods）
  changeCount(value, event){
  const goodsObj = {
  goodsid:value,
  count:event
  };
  console.log(goodsObj);
  }

非父子組件傳值

只有在父組件中通過(guò)components: { inputnumber }注冊(cè)的才能稱(chēng)為父子組件，在template通過(guò)router-view占位的不算父子組件

新建一個(gè)common.js文件，定義一個(gè)組件bus作為非父子組件的中轉(zhuǎn)站

import Vue from 'vue'
export const bus = new Vue()
兩個(gè)組件分別引入bus

import {bus} from '@/common/common'

在發(fā)送組件的methods中觸發(fā)事件

bus.$emit(ISLOGIN,true)

在接收組件的created中監(jiān)聽(tīng)事件

created(){
bus.$on(ISLOGIN,(logined)=>{
this.isLogin = logined
})
},

點(diǎn)擊刪除，刪除某項(xiàng)數(shù)據(jù)

數(shù)據(jù)在后臺(tái)
發(fā)起刪除數(shù)據(jù)請(qǐng)求，獲得數(shù)據(jù)后，重新渲染頁(yè)面
數(shù)據(jù)在本地（利用vue的數(shù)據(jù)驅(qū)動(dòng)，修改data中的值，頁(yè)面也會(huì)相應(yīng)的變化）
2.1 利用vuex刪除本地?cái)?shù)據(jù)
2.2 在之前獲得的渲染頁(yè)面的數(shù)組中，直接刪除對(duì)應(yīng)索引的數(shù)據(jù)

登陸驗(yàn)證

需要登陸驗(yàn)證的組件，在設(shè)置該路由規(guī)則時(shí)，添加元數(shù)據(jù)(router)
meta:{needLogin:true}
利用導(dǎo)航守衛(wèi)，給需要登陸驗(yàn)證的組件（即meta有needLogin），發(fā)送請(qǐng)求給后臺(tái)，判斷是否登陸(router)
- 注意：router.beforeEach里一定要有next()，否則路由根本不會(huì)跳轉(zhuǎn)
router.beforeEach((to,from,next)=>{
if(to.meta.needLogin){
const url = 'site/account/islogin'
axios.get(url).then(res=>{
if(res.data.code === 'nologin'){
router.push({ name:'login'}) // 去登陸頁(yè)
}else{
next() // 正常路由跳轉(zhuǎn)
}
})
}else{
next()
}})
在router.beforeEach中將要跳轉(zhuǎn)的路徑保存到本地(router)

if(to.path!='/site/login'){
localStorage.setItem('lastVisited',to.path)
}
在登陸頁(yè)中登陸成功后，跳轉(zhuǎn)到本地保存的路徑(login.vue)
this.$router.push({path:localStorage.getItem('lastVisited')})
發(fā)送請(qǐng)求時(shí)默認(rèn)帶上cookie（main.js）
axios.defaults.withCredentials = true

返回上一頁(yè)

直接返回上一頁(yè)

this.$router.go(-1)
經(jīng)過(guò)登陸驗(yàn)證后，返回他本該去的頁(yè)面
2.1 在路由守衛(wèi)中本地保存要去的頁(yè)面的路徑，注意要排除掉/login
if (to.path != '/site/login') {
localStorage.setItem('lastVisited', to.path);
}
2.2 登陸成功時(shí)，設(shè)置跳到本地保存的路徑中
this.$router.push({path:localStorage.getItem('lastVisited')})

Vue組件的生命周期

基本概念

Vue:
    beforeCreate（組件創(chuàng)建之前） ---> created（組件已經(jīng)創(chuàng)建出來(lái)了）
    ---> beforeMount（組件的dom元素被渲染出來(lái)之前） ---> mounted（dom元素已經(jīng)渲染出來(lái)了） ---> 【模型數(shù)據(jù)發(fā)生了更改】beforeUpdate（視圖重新渲染之前） ---> updated(視圖已經(jīng)重新渲染完畢) ---> beforeDestory(組件銷(xiāo)毀之前) ---> destoryed（組件銷(xiāo)毀了）

注意點(diǎn):

1、Vue的一系列生命周期鉤子，都是Vue框架提供者，我們開(kāi)發(fā)者，只需要
實(shí)現(xiàn)，那么我們Vue框架底層就會(huì)在恰當(dāng)?shù)臅r(shí)機(jī)，自動(dòng)調(diào)用他們

2、每個(gè)組件中都有這些生命周期鉤子

應(yīng)用場(chǎng)景:

1、created

發(fā)送網(wǎng)絡(luò)請(qǐng)求，獲取數(shù)據(jù)

2、mounted

等視圖渲染完成，然后拿著dom進(jìn)行操作，有時(shí)候可能拿不到dom元素，或者有些效果出不來(lái)，可以嘗試加200ms的延時(shí)
如：使用jQuery插件

3、beforeUpdate & update

數(shù)據(jù)模型發(fā)生了更改，會(huì)調(diào)用，它會(huì)重新渲染組件

4、beforeDestory & destory

beforeDestory 記錄未提交的數(shù)據(jù)
created 將本地的數(shù)據(jù)，自動(dòng)填充上
beforeDestory:記錄上次滾動(dòng)到那個(gè)地方了
created：自動(dòng)滾動(dòng)到你上次看得那個(gè)位置

使用vue-cli打包

使用npm run build
修改config/index.js里module.exports的assetsPublicPath改為:
assetsPublicPath: './'
修改build/utils.js里generateLoaders的publicPath改為:
publicPath: '../../'
如果引入了jQuery，則在webpack.prod.conf.js里也要聲明全局使用,在module.exports的最后加入：

new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
若想刪掉自動(dòng)生成的map文件:
修改config/index.js里module.exports的productionSourceMap改為productionSourceMap: false,

vue-cli優(yōu)化

刪掉.map

.map文件只是幫助我們調(diào)試用的，正式上線時(shí)可以去掉這個(gè)文件
修改config/index.js里module.exports的productionSourceMap改為productionSourceMap: false

element-ui和iview按需導(dǎo)入

element-ui

安裝 babel-plugin-component：

cnpm install babel-plugin-component -D

將 .babelrc 修改為：

{
"presets": [
["env", { "modules": false }]
],
"plugins": [["component", {
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]]
}
在 main.js 中引入部分組件
- 如只引入 Button ， Select 和 Message
  import { Button, Select， Message} from 'element-ui'
  Vue.use(Button) //順便會(huì)導(dǎo)入Button的css，不需另外導(dǎo)入
  Vue.use(Select)
  Vue.prototype.$message = Message //有部分組件不能直接通過(guò)use聲明全局使用

iview

安裝 babel-plugin-import：

cnpm install babel-plugin-import -D

在 .babelrc 中配置：

{
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]]
}
按需引入組件

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);
導(dǎo)入樣式

import 'iview/dist/styles/iview.css';

路由懶加載

建議：在剛開(kāi)始時(shí)直接用這種方式引入路由文件

安裝babel-plugin-syntax-dynamic-import

cnpm i babel-plugin-syntax-dynamic-import -D

在 .babelrc 中配置：

{
"plugins": ["syntax-dynamic-import"]
}
修改路由中引入文件的方式，把

//（原來(lái)）import Layout from '@/components/Layout'
const Layout = () => import('@/components/Layout')

CDN引入

將jquery、moment等大資源的文件通過(guò)cdn的方式引入
常見(jiàn)cdn：bootcdn
實(shí)現(xiàn)：
1. 引入資源
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
2. 公開(kāi)供全局使用，修改bulid文件夾下的webpack.base.conf.js文件
  - 這里小寫(xiě)的vue和vue-router是我們引入資源時(shí)對(duì)應(yīng)的名字，冒號(hào)后面大寫(xiě)的名字是庫(kù)的主人所暴露出來(lái)的全局方法名，當(dāng)然這兩個(gè)名字可以一樣
    module.exports = {
    entry: {
    app: './src/main.js'
    },
    externals:{
    'BMap': 'BMap',
    'vue': 'Vue',
    'vue-router': 'VueRouter'
    }
3. 將項(xiàng)目中引用對(duì)應(yīng)資源的地方將原先的引入方式去掉
  // import Vue from 'vue'
  // import VueRouter from 'vue-router'

BUG

關(guān)于渲染值undefined

請(qǐng)求是異步費(fèi)時(shí)操作，在渲染時(shí)數(shù)據(jù)還沒(méi)有返回回來(lái)，此時(shí)就會(huì)報(bào)undefined錯(cuò)誤
雖然之后數(shù)據(jù)返回后會(huì)再次渲染，但剛開(kāi)始報(bào)的錯(cuò)不會(huì)消失

v-for不需擔(dān)心undefined的問(wèn)題
直接拿數(shù)據(jù)渲染時(shí)可以在其父盒子添加v-if=“渲染數(shù)組/對(duì)象”，則在沒(méi)有返回?cái)?shù)據(jù)時(shí)不會(huì)渲染頁(yè)面

關(guān)于vue設(shè)置屬性時(shí)，number類(lèi)型的值設(shè)置無(wú)效

vue中屬性的值為number類(lèi)型不能直接寫(xiě)label:1，要寫(xiě):label:“1”

關(guān)于css樣式與原來(lái)不一致

設(shè)置css樣式的style加了scoped導(dǎo)致，刪掉就可還原

在路由中設(shè)置了site/login，但是當(dāng)a標(biāo)簽的href設(shè)置為‘/site/login’時(shí)不會(huì)跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面

vue中的無(wú)刷新跳轉(zhuǎn)是通過(guò)設(shè)置url的哈希值（即#）實(shí)現(xiàn)的，默認(rèn)的會(huì)在url的末尾添加#，即若href設(shè)置為‘#/site/login’，則可以正常跳轉(zhuǎn)
不過(guò)vue還是建議我們用router-link來(lái)實(shí)現(xiàn)跳轉(zhuǎn)，使用時(shí)不用擔(dān)心#的問(wèn)題
<router-link to="/site/login"></router-link>

網(wǎng)站本來(lái)能正常顯示，設(shè)置了路由守衛(wèi)后連首頁(yè)都打不開(kāi)了

在設(shè)置路由守衛(wèi)時(shí)沒(méi)有調(diào)用next()

由當(dāng)前頁(yè)面通過(guò)路由跳轉(zhuǎn)顯示不同數(shù)據(jù)時(shí)，jquery插件在mounted鉤子中初始化后只能顯示第一次時(shí)的數(shù)據(jù)

jQuery是事件驅(qū)動(dòng)，vue是數(shù)據(jù)驅(qū)動(dòng)
同頁(yè)面的路由跳轉(zhuǎn)并沒(méi)有銷(xiāo)毀并重新打開(kāi)新的組件，在mounted中初始化的插件，在路由跳轉(zhuǎn)后并不執(zhí)行初始化函數(shù)，所以不能顯示
可以把初始化函數(shù)放到加載頁(yè)面數(shù)據(jù)的請(qǐng)求回來(lái)后，這樣每次重新渲染頁(yè)面時(shí)就會(huì)重新加載初始化函數(shù)
一般把jQuery放入axios中

其他

關(guān)于foreach和for in

foreach一般用來(lái)遍歷數(shù)組：

myArry.forEach((value,index,arr)=>{
console.log(value);
});
for in一般用來(lái)遍歷對(duì)象：

for(var value in myArry){
console.log(value)
}

關(guān)于localStorage

localStorage存的起始都是字符串，所以不能對(duì)其中的某個(gè)鍵值對(duì)進(jìn)行增刪改查操作

數(shù)組化某個(gè)localStorage
var contrastdata = JSON.parse(localStorage.getItem('contrastdata'))
對(duì)數(shù)組進(jìn)行增刪改操作
contrastdata[a] = b
delete contrastdata[a]
contrastdata[a] = c
將操作后的數(shù)組存入該localStorage
localStorage.setItem(JSON.stringify(contrastdata))

把數(shù)組中對(duì)象的某個(gè)鍵對(duì)應(yīng)的值取出來(lái)

如：[{id:1,age:2},{id:2,age:4},{id:3,age:5}]

創(chuàng)建一個(gè)新數(shù)組
const tempArr = []
遍歷這個(gè)數(shù)組，把對(duì)象中某個(gè)鍵對(duì)應(yīng)的值放入該數(shù)組中
this.shopcartgoods.forEach(item=>{
tempArr.push(item.id)
})
轉(zhuǎn)成字符串
tempArr.join(',')

數(shù)組與字符串互轉(zhuǎn)

數(shù)組轉(zhuǎn)字符串
var a, b,c;
a = new Array(a,b,c,d,e);
b = a.join('-'); //a-b-c-d-e 使用-拼接數(shù)組元素
c = a.join(''); //abcde
字符串轉(zhuǎn)數(shù)組
var str = 'ab+c+de';
var a = str.split('+'); // [ab, c, de]
var b = str.split(''); //[a, b, +, c, +, d, e]

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue個(gè)人筆記

vue個(gè)人筆記

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue個(gè)人筆記

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av