Vue项目篇(更新中)

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() 方法将数组作为字符串返回。

外来引入框架安装

1. npm install mint-ui@2.2 --save

2. 接下来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>等。

1. 打开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样式

首页页面知识点

1. { path: '/home', component: Home, meta: { title: '首页' } },

   meta是元信息在进入这个页面的时候可以使用

2. route与router区别

3. this.$route是"参数式编程",是地址上的url的参数,
   this.$router是"导航式编程",因为里面有很多导航式api
   this.$router.push("")里面是放hash地址,会修改本页的hash地址进行跳转,并增加一条记录
   this.$router.replace("")里面是放hash地址,会修改本页的hash地址进行跳转,会覆盖记录

4. // 全局前置守卫
   

   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')可以进行身份验证跳转

5. <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>更新

6. MUI-最接近原生APP体验的高性能前端框架

   这个网站的元素使用复制,在进行组件封装,再使用到App.vue之中

7. router-link的底层是a标签 ,当用a链接实现跳转可以用router-link实现,<a href="#/home">等于<router-link to="/home">

   router-link点击之后会增加一个.router-link-active的class属性,我们可以用来做点击之后变色或者高亮的效果

   当然有时在引入框架的时候,要注意写死的属性,例如:

   <router-link class="mui-tab-item mui-active" to="#/home">
           <span class="mui-icon mui-icon-home"></span>
           <span class="mui-tab-label">首页</span>
         </router-link>
         <router-link class="mui-tab-item" to="#/category">
           <span class="mui-icon mui-icon-email"></span>
           <span class="mui-tab-label">分类</span>
         </router-link>

   这里的mui-active是写死的属性我们需要注意删除掉,才能和.router-link-active的class属性配合做好点击高亮的功能.

8. 页面过渡效果使用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:{}配合使用可以一直监视某项的变化而产生变化

1. 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 lang="scss" 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,另一个不可以.

登录注册功能

1. <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元素里面的,进行验证账号密码