vue.js实战-基础篇

vue.js实战-基础篇

之前曾看过vue.js的官方文档， 看了一些理论知识， 前段时间，自己拿以前的项目来做实践，毕竟纸上得来终觉浅嘛， 不过，由于由于时间关系，做的实例不多，刚学习vue的同学可以看看。后续自己还会深入的去学习，陆续补上。欢迎大神们来指正以及给予辅导。

项目目录

注意知识点：

1. vue 做移动端 ， meta 直接写在index.html 的head 里

   Index.html

   <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
   

2. v-for 的使用

   #####VUE1.0：

   li v-for="(index,item) in items" v-on:click="onclick($index)"></li>
   

   #####VUE2.0 $index 已弃用：

   <p v-for="(item,index) in tabs" v-on:click="tabsShow(index)">{{item.tabname}}</p>
   

   （参数一为key值 ， 参数二为索引值）

3．组件命名时，不要用html元素如 head footer nav …..等命名。

4. 每个页面公用的头部和尾部直接写在app.vue 中：
   

   注意：其他的组件页面最外层的容器不要设置高度。

一 less 安装使用

安装less依赖

npm install less less-loader –save

修改 webpack.base.conf.js 文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

{
    test: /\.less$/,
    loader: 'style-loader!css-loader!less-loader'
  },

引入：

<style lang="sass">
 @import "/style/base.scss";(此处分号不可省)
</style>

二 swiper 使用

在static 中引入 swiper [
Swiper.min.css
Swiper.min.js
]

在 .eslintrc.js 中 配置swiper :

'globals': {
  'Swiper': true
}

组件：

<template>
       <div class="swiper-container">
          <div class="swiper-wrapper">

            <div class="swiper-slide" v-for="item in listImg">
              <img class="imgload" :src='item.url' alt="首页banner图片01">
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->

    </div>
</template>
<script>
import '../../../static/swiper/swiper.min.css'
import '../../../static/swiper/swiper.min.js'
export default {
  props: ['listImg'],
  name: 'swiper',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    var swiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      loop: true,
      speed: 600,
      autoplay: 1000,
      onTouchEnd: function () {
        swiper.startAutoplay()
      }
    })
  }
}
</script>

<style scoped lang="less">
.swiper-container {
    width: 100%;
    height:208px;
    background-color:red;
    .swiper-wrapper {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .swiper-pagination-bullet {
        width:20px;
        height:20px;
        background-color:blue;
        display: inline-block;
        background: #7c5e53;
    }
}

</style>

三 vue-router + router-link 实现页面跳转

构建项目时安装vue-router（会自动在项目中创建router文件，推荐使用） ， 或者 在项目中通过 cnpm install vue-touter –save 来安装。

1. 使用第一种方法自动安装时 router下的 xx.js 配置：

   import Vue from 'vue'
   import Router from 'vue-router'
   // 引入路由对应的组件
   import Index from '@/components/index'
   import Detail from '@/components/detail'
   // 全局使用路由
   Vue.use(Router)
   // 实例化路由并且暴露
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'Index',
         component: Index
       },
       {
         path: '/detail',
         name: 'Detail',
         component: Detail
       }
     ]
   })  
   

2. 在main.js 中将路由 挂载在 入口上，供全局使用
   

3 组件中使用router-link to=”xxxx” 实现跳转（等同于a href=”xxx”）

四 tab选项卡

html:

<div  class="tabs" >
  <p v-for="(item,index) in tabs" v-on:click="tabsShow(index)" :class="{active:item.iscur}">{{item.tabname}}</p>
</div>
<div class="tabItems">   
 // 挂载当前显示的默认项
  <component :is='currentView' keep-alive></component>
</div>

Js :

export default {
      name: 'Index',
      data () {
        return {
          tabs: [
            {tabname: '男生', iscur: true, nowShow: 'list'},
            {tabname: '女生', iscur: false, nowShow: 'detail'}
          ],
          currentView: 'list'
        }
      },
      components: {
        'banner': Banner,
        'detail': Detail,
        'list': List
      },
      methods: {
        tabsShow: function (indexs) {
          var x = this
          this.tabs.map(function (v, i) {
            if (i === indexs) {
              v.iscur = true
              x.currentView = v.nowShow
            } else {
              v.iscur = false
            }
          })
       }
     }
}

五 相同组件绑定不同数据

例如：同一个swiper组件 ，在不同的父级组件下展示不同的图片源

主页 三组数据：

在子组件上绑定数据，供子组件直接使用， 需要用什么数据就绑定什么数据（实际具体数据通过请求接口，此处为示例）

在子组件中通过prop 继承父级Data

在公共组件swiper 中 使用逻辑运算符即可：

六 使用vuex 来存储数据 供全局使用

1 安装 npm install vuex –save
2 在 src 下 建一个store.js 文件
3 引入 vue vuex

4 在需要使用数据的 .vue 中 data取出

七 使用公用的js 内的方法

例如在index.vue 中使用common.js中的init方法 ：

1 写入的方法 用 export暴露出来否则会报错（需要注意）

2 在需要的文件中引入 { 方法 } 并且在method 中注入

八 img 图片绑定路径问题

1 本地图片直接使用相对路径。
2 动态图片 v-bind：src=””
3 固定的图片属于静态文件。放置于static . 直接./static/…png 就可获取

今天的分享就到此了， 下次再继续深入。

版权声明： 本博客内容由本人自己所著。转载请注明出处！