Vue項目篇(更新中)MUI

vuex是資料狀态管理,用在購物車的子產品上

ps:

views是路由使用的,components

<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

</script>
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

傳回類型是數組,第二個參數是傳回最大長度

split()是把字元串改為數組,reserve()是反轉數組

join() 方法将數組作為字元串傳回。

外來引入架構安裝

npm install [email protected] --save
接下來main.js,這是完整引入,建議用這個
```
import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(MintUI)
 
```
Mint UI

上述代碼完成了Mint UI的引入，其中， style.css樣式檔案需要單獨引入。引入後，在頁面中使用“mt-”字首來定義标簽名，如<mt-button>、<mt-header>等。

打開MUI官方網站GitHub - dcloudio/mui: 最接近原生APP體驗的高性能架構，找到MUI下載下傳位址下載下傳到本地，或者直接使用源碼包裡的檔案。在本項目中，把MUI相關的css、js等資源放置在src/lib目錄下，
```
import './lib/mui/css/mui.css'

import './lib/mui/css/icons-extra.css'
           
```

技巧: 1. main.js是安裝css和js的地方,因為webpack會打包這個檔案

2.外來引入的必須要用Vue.use()方法作為插件.

3.下載下傳之後的庫和架構,最主要就是要使用他的css或者js樣式

首頁頁面知識點

{ path: '/home', component: Home, meta: { title: '首頁' } },

meta是元資訊在進入這個頁面的時候可以使用

route與router差別

this.$route是"參數式程式設計",是位址上的url的參數,
this.$router是"導航式程式設計",因為裡面有很多導航式api
this.$router.push("")裡面是放hash位址,會修改本頁的hash位址進行跳轉,并增加一條記錄
this.$router.replace("")裡面是放hash位址,會修改本頁的hash位址進行跳轉,會覆寫記錄

```
// 全局前置守衛
      
```
```
router.beforeEach(function (to, form, next) {
  if (to.path === '/home') {
    next()
    document.title = to.meta.title
    console.log(to)
  }
})
           
```
to,form是object類型和$route是一樣的,裡面有url的全部資訊和在路由放meta的初始資訊.docuemn.title是浏覽器的頁面标題

next()是通行證,如果沒有就不給通過,裡面可以添加位址j進行跳轉.例如:next('/login')可以進行身份驗證跳轉

<template>
  <div id="app">
    <div class="container">
      <mt-header fixed :title="$route.meta.title"></mt-header>
      <router-view></router-view>
    </div>
  </div>
</template>

頭部框的:title可以利用v-bind動态更新.不要放在各自的元件中,放在APP.vue之中,可以一直存在,并且根據<router-view>更新

MUI-最接近原生APP體驗的高性能前端架構

這個網站的元素使用複制,在進行元件封裝,再使用到App.vue之中
router-link的底層是a标簽 ,當用a連結實作跳轉可以用router-link實作,<a href="#/home" target="_blank" rel="external nofollow" >等于<router-link to="/home">

router-link點選之後會增加一個.router-link-active的class屬性,我們可以用來做點選之後變色或者高亮的效果

當然有時在引入架構的時候,要注意寫死的屬性,例如:
```
<router-link class="mui-tab-item mui-active" to="#/home">
        
        首頁
      </router-link>
      <router-link class="mui-tab-item" to="#/category">
        
        分類
      </router-link>
 
```
這裡的mui-active是寫死的屬性我們需要注意删除掉,才能和.router-link-active的class屬性配合做好點選高亮的功能.

頁面過渡效果使用transition(過渡标簽)

<transition name="fade">
	<router-view><router-view>
</transition>
<style>
 .fade-enter {
  opacity: 0;
  transform: translateX(100%)
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.fade-enter-active, .fade-leave-active {
  transition:all .5s ease;
}
</style>

9. 函數執行的時期: created(){}隻會在建立之前執行某個代碼,我們結合watch:{}監視url的變化,進行代碼修改

<router-link to="home" slot="left" v-show="Backshow">
   <mt-button icon="back">傳回</mt-button>
</router-link>
<script>
export default {
data () {
    return {
      Backshow: true
    }
  },
created () {
    this.Backshow = this.$route.path !== '/home'
  },
watch: {
'$route.path' () {
      if (this.$route.path === '/home') {
        this.Backshow = false
      } else {
        this.Backshow = true
      }
    }
}
}
</script>

使用watch:{}監視url使用"$route.path"進行位址欄的監視,進入相關頁面後,取消部分元件的設定,例如進入除了首頁的頁面外面可以顯示"傳回"連結.

created()和watch:{}配合使用可以一直監視某項的變化而産生變化

Eslint
1. 用檔案設定調試處理eslint的錯誤
  
  找到報錯的原因,之後在eslintrc.js,添加規則
```
('keyword-spacing':1)
('keyword-spacing':0)
0就是false
1就是true
           
```
  (例如:keyword-spacing錯誤,這個錯誤是報灰色小字的錯誤,),之後重新運作npm run serve
MUI
- 打開MUI官方網站GitHub - dcloudio/mui: 最接近原生APP體驗的高性能架構，找到MUI下載下傳位址下載下傳到本地，或者直接使用源碼包裡的檔案。在本項目中，把MUI相關的css、js等資源放置在src/lib目錄下，
```
import './lib/mui/css/mui.css'

import './lib/mui/css/icons-extra.css'
           
```
- 使用擴張icon必須要使用擴張的icon.css

我的頁面布局

頁面布局

<div class="menber">
    <!-- 頭部 -->
    <div class="header-con">
      <router-link to="/user/login" class="mui-navigate-right">
        <div class="user-info">
          <div class="avatar-con">
            <div class="avatar">
              <img src="../assets/images/avatar_default.png" alt="" class="image-info">
            </div>
          </div>
          <div class="person-con">
            <span>登入/注冊</span>
          </div>
        </div>
      </router-link>
    </div>
    <!-- 頭部end -->
  </div>
<style  scoped>
.menber{
margin-bottom: 15px;
.header-con{
  padding: 10px;
  background-color: #fff;
  .user-info{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 120px;
    background:linear-gradient(90deg,#28a2ff,#ffd787);
    box-shadow: 0 0.1rem 0.25rem #f8e3c6;
  .avatar-con{
    position: absolute;
    left: 45px;
    top:25%;
    transform: translate(-50%);
    .avatar{
      width: 60px;
      height: 60px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,15);
      border: 1px solid hsla(0,0%,100%,.4);
      border-radius: 50% 50%;
      .image-info{
        width: 100%;
        height: 100%;
      }
    }
  }
  .person-con {
    position: absolute;
    left: 90px;
    top:50%;
    transform: translateY(-50%);
    color:#fff;
}
  }
}
}
</style>

嵌套路由注意事項,

在VueRouter裡面注冊的使用方法:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    { path: '/home', component: Home, meta: { title: '首頁' } },
    { path: '/category', component: Category, meta: { title: '分類' } },
    { path: '/shopcar', component: ShopCar, meta: { title: '購物車' } },
    {
      path: '/user',
      component: User,
      meta: { title: '我的' },
      children: [{ path: 'login', component: Login, meta: { title: '登入' } }]
    },
    {
      path: '/user/login',
      component: Login,
      meta: { title: '登入' }
    }
  ]
})
在VueRouter外面注冊的使用方法:


const routes = [

  {
    path: '/user',
    component: User,
    meta: { title: '我的' },
    // children: [{ path: 'login', component: Login, meta: { title: '登入' } }]
  },
  {
    path: '/user/login',
    component: Login,
    meta: { title: '登入' },
  },
]

const router = new VueRouter({
  routes
})

兩者不同在嵌套路由時候一個可以使用children,另一個不可以.

登入注冊功能

<div id="app">
  <input v-model="test">
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      test: '這是一個測試'
    }
  });
</script>

知識點:v-mode可以使用在input元素裡面的,進行驗證賬号密碼

Vue項目篇(更新中)MUI

外來引入架構安裝

首頁頁面知識點

Eslint

MUI

我的頁面布局

頁面布局

嵌套路由注意事項,

登入注冊功能

繼續閱讀

[轉]如何成長為一名全棧工程師全棧工程師

企業最佳Node.js 應用案例分享

underscore模闆功能的使用和學習

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

web開發之前後端渲染

vue學習筆記day12 vue的生命周期

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

vue-cli簡介（中文翻譯）

express 搭建背景建構工程目錄結構

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目