Vue の共通コンポーネントは何ですか?-Vue.js-php.cn

vue の一般的に使用されるコンポーネントは次のとおりです: 1. vue-route; 2. axios; 3. vuex; 4. Element UI; 5. swiper; 6. vue-echarts; 7. vue-video-player; 8. vue-photo-preview など。

Vue の共通コンポーネントは何ですか?

この記事の動作環境: Windows7 システム、vue2.5.17 バージョン、DELL G3 コンピューター。

vue の共通コンポーネントは何ですか?

vue - マスターする必要がある一般的なコンポーネント (更新中)

この記事を読む際の注意事項

この記事のすべてのコンポーネントの例は、以下に基づいていますvuecli2 で。これらのコンポーネントのほとんどは vue.use() メソッドを使用します。
ここでは、vue.use() が使用される理由について説明します。なぜなら、プラグインがメソッドの場合、
vue プロトタイプでそれを使用するメソッドを定義するだけで済みます:

import axios from 'axios'
Vue.prototype.axios = axios

ログイン後にコピー

ただし、プラグインがオブジェクトの場合は、次のことを渡す必要があります。 vue.use () を使用してオブジェクトを導入します:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

ログイン後にコピー

ok、それでは、vue ファミリーバケットのコアコンポーネントから始めましょう。

コアコンポーネント

ルーティング: vue-route

Long Ge には、vue を学習した後、ルートステップに到達したときに諦めた友人がたくさんいます。ルートを説明するのは非常に難しいため、ルートの存在は、私たちがやっているのが SPA の単一ページアプリケーションであり、大量の静的 HTML ページではないことを証明します。

それでは、ルートとは何でしょうか?サーバーは置いておきましょう。言い換えれば、応答性とは何かを知っているということです。レスポンシブレイアウトで、メディアを通じて相手の携帯電話の機種や画面解像度を問い合わせ、表示スタイルを切り替えます。

route URLの「メディアクエリ」であることが分かります。 URL に異なるパスを入力すると、異なる vue ページに応答できます。

まず、vuecli で main.js ファイルを開きます。ここでルートが導入され、vue に設定されていることがわかります。

//第一步引入route，form后面是你的route文件地址
import router from './router'

//加载route
new Vue({
  el: '#app',
  render: h => h(App), //h=createElement 即渲染app中所有节点
  router, //route是在这一步装载到vue中的
  store,
  components: {
    App
  },
  template: '<App/>',
})

ログイン後にコピー

手がかりに従って、このルートの Index.js 構成ファイルを見つけます。すべてが URL にアクセスするように構成されていることがわかります。

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [{
        path: '/',
        name: 'index',
        component: index
    }]
})

ログイン後にコピー

面倒な場合は、このルート内のさらにいくつかのパスセクションを直接コピーして、独自のパスに変更することもできます。

ここで、ルートにはサブルートとルート分割の機能も含まれることに注意してください。ここではあまり詳しく説明しません。vue-route に関する Long Ge の詳細なチュートリアルに注目してください。単なる紹介です。

非同期データリクエスト: axios

jquery のこのメソッドを覚えていますか?

$.ajax()

ログイン後にコピー

これは実際には、JavaScript のネイティブ Ajax メソッドをカプセル化したものです。

axios も同じですが、vue でも動作します。導入方法はrouteとは異なり、単なるメソッドの集合なのでvueのプロトタイプ上に直接定義することができます。
まず、npm でインストールします:

npm install axios -s-d

ログイン後にコピー

次に main.js を開きます:

import axios from 'axios'
Vue.prototype.axios = axios

ログイン後にコピー

呼び出すときはメソッドやマウントなどのライフサイクルに記述できます。

let that = this;
this.axios({
  method: 'get',//请求方式
  url: 'URL',//请求地址
  params: {
    id: this.$route.query.id//发送的参数
  }
}).then(function(response) {
  //请求成功后获得的内容进行哪些操作
  that.title = response.data.result[0].title
})

ログイン後にコピー

さらに、パッケージ化するときに axios を使用してオンライン環境とオフライン環境を区別することもできます。

//配置axios区别线上和测试环境
if (location.hostname === 'localhost') {
  axios.defaults.baseURL = process.env.API_PATH_TEST;
  //配置本地webSocketIO地址
  Vue.use(new VueSocketIO({
    debug: false,
    connection: 'localhost',
  }))
} else if (location.hostname === 'www.dangyunlong.com') {
  //配置线上webSocketIO地址
  Vue.use(new VueSocketIO({
    debug: false,
    connection: 'www.dangyunlong.com',
  }))
  axios.defaults.baseURL = process.env.API_PATH_PROD
}

ログイン後にコピー

vuex ステータス管理

最初に npm を使用してインストールします。

npm i vuex --save

ログイン後にコピー

vuex を使用する場合は、src ディレクトリに新しいストアフォルダーを作成し、その中にステートツリー js を作成する必要があります。

そして、それを main.js に導入します

//加载vue store
import store from './store'

new Vue({
  el: '#app',
  render: h => h(App),
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

ログイン後にコピー

ここから、vuex がストアに基づいていることが簡単にわかります。さらに、vuex は依然として単一の状態ツリーです。では、ストア状態ツリーを構成するにはどうすればよいでしょうか?

ストアでこのindex.jsを開きます

export default new Vuex.Store({
  state: {
    name: "dangyunlong",
    age: 30,
    index: {} //首页信息
  },
  getters:{
    //getters 相当于是vuex的计算属性,主要作用是对state中的值进行处理
    jia(state,num){
      return state.age + 1;
    },
    jian(state,num){
      return state.age - 1;
    }
  },
  mutations: {
    //vuex用于修改state中数据的方法
    gaiming(state, name) {
      state.name = name
    },
    getIndex(state, indexData) {
      state.index = indexData
    }
  },
  actions:{
      //actions 用于异步执行vuex mutations中的方法 它不会直接修改state而是作用于mutations
      //actions 中的方法可以接收一个context参数,这里的context就指vuex
      increment (context) {
        setTimeout(function(){
          //调用方式跟在.vue中一样
          context.commit('gaiming',"abc")
          //1秒后调用mutations中的gaiming方法,名字已经修改了
          console.log(context.state.name);
        }, 1000)
      }
  },
  modules: {
    // 子状态树
    a: model1
  }
});

ログイン後にコピー

ストアが実際に機能するために主に次の5つのパラメータに依存していることがわかります:

パラメータ名	関数
state	Data
ゲッター	vuex の計算されたプロパティと同等で、主に値の計算と処理に使用されます
mutations	vuex 値の変更に使用されるメソッド
actions	ミューテーションでのメソッドの非同期呼び出しの場合
modules	状態ツリーを配置する準備ができたとき複数のモジュールに分割されており、モジュールはサブ状態ツリーを格納するために使用されます

子状态树的写法也完全一样：

const model1 = {
  state: {
    name: "longge",
    age:31
  },
  getters:{

  },
  mutations: {

  },
  actions:{

  }
};

export default model1;

ログイン後にコピー

混入其中的高手冷门知识

vuex有一个鲜为人知的辅助方法：mapState

computed:mapState({
  ageadd (state) {
    return state.count + this.localCount
  }
}),

ログイン後にコピー

有很多同学不知道这个函数是干啥用的，龙哥用最简单的方法来介绍一下，这里涉及到了computed这个比较常用的vue属性，这个东西就是前面提到的计算属性，它主要是在不改变原始值的情况下对值做一些处理。

如果，你一个一个通过

this.$store.state.xx

ログイン後にコピー

的当时去调用store的值放到这个计算属性里面，你不是老得写这个this.$store吗。于是vuex官方就提供了一个让你可以省略前面这一段的方法。你可以通过这个方式一次获得所有store中的state中的数据，然后传入state直接用就行了。

这里面还有一个混入写法...mapState。各位观众老爷请到龙哥vuex详细教程中找一下，这里就不过多介绍了。

UI库

Element UI

依然使用npm进行安装，当然如果你有cnpm就更好了：

cnpm install element-ui -s-d

ログイン後にコピー

element作为你必须掌握的ui库，它和iview的区别再于用户量更大，研发团队人员更多，发现错误的机率更高，在组件支持项中也超过iview。更屌的是element还支持Sketch和Axure，让产品经理和设计师也能从容参与到开发中来。所以element成为了本文首选。

引入element ui的方式也非常简单，通过npm安装后，打开main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

ログイン後にコピー

调用的时候也非常简单：

<el-menu default-active="1" class="el-menu-vertical-demo">
    <el-submenu index="1">
      <template slot="title">
        <img src="">
        <span></span>
      </template>
      <el-menu-item-group>
        <template slot="title"></template>
        <el-menu-item index="1-1"></el-menu-item>
        <el-menu-item index="1-2"></el-menu-item>
        <el-menu-item index="1-3"></el-menu-item>
      </el-menu-item-group>
    </el-submenu>
</el-menu>

ログイン後にコピー

直接把这种el开头的标签插入到你的.vue文件中即可。

element支持的组件非常多，你可以查看这里，里面的组件代码已经写的非常清楚了，直接复制粘贴到你的.vue中即可。

焦点图 / 轮播图

swiper

你可能会问了，轮播图组件多了去了，为什么就介绍swiper呢？因为龙哥过去在制作非spa页面的时候，对swiper可以说是情有独钟，无论是兼容性还是在移动/非移动端，swiper的表现都可圈可点。官方提供完整的api手册，让扩展修改也非常得心应手。

使用cnpm安装

cnpm install swiper -S -d

ログイン後にコピー

安装完毕以后，我们需要把swiper封装成一个组件。这个是非常简单的，新建一个swiper.vue即可。

<template>
    <p>
        <p class="swiper-container">
            <p class="swiper-wrapper">
                <p class="swiper-slide">Slide 1</p>
                <p class="swiper-slide">Slide 2</p>
                <p class="swiper-slide">Slide 3</p>
            </p>
        </p>
    </p>
</template>

<script>
    import Swiper from "swiper";
    export default{
        name:"swiper",
        mounted(){
            var mySwiper = new Swiper ('.swiper-container', {

            })
        }
    }
</script>
<style>
    @import 'swiper/css/swiper.css';
    .swiper-container {
        width: 600px;
        height: 300px;
    }
</style>

ログイン後にコピー

因为是局部的，我们甚至都不需要再main中去引入它。用的时候直接定义到components上即可。

components: {
  swiper
},

ログイン後にコピー

然后把标签写到你的项目中：

<swiper></swiper>

ログイン後にコピー

图表

vue-echarts

vue-echarts是echarts的一个封装，它和百度echarts的区别在于，它是基于vue的一个对象..操作上更加的简单，如果你仅仅是为了展示图表，建议你使用vue-echarts。但是如果你的项目中含有对echarts的深度定制，例如改变了原始图表的展示方式或者点击事件和较为复杂的逻辑，还是建议你使用百度echarts。

安装方式跟其他vue组件一样：

npm install echarts vue-echarts

ログイン後にコピー

然后打开main.js输入

import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';
Vue.component('chart', ECharts);

ログイン後にコピー

这样vue-echarts就变成了一个全局组件，我们直接在页面中调用即可。

<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>

ログイン後にコピー

另外在data中添加一个配置文件的变量，再mounted生命周期中注入内容即可。

export default {
    name: 'index',
    data() {
        return {
            orgOptions: {},
        }
    },
    mounted: function() {
          //echarts
          this.orgOptions = {
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: 'line',
                  smooth: true
              }]
          }
    },
}

ログイン後にコピー

其中具体图表设置请查看这里。
你可以下载其中的例子然后打开http://localhost:8080/demo查看。

视频播放

vue-video-player

vue-video-player是一个视频播放解决方案，功能非常全。

使用cnpm命令安装，可以加快安装速度。

cnpm install vue-video-player -S -d

ログイン後にコピー

然后老规矩打开main.js填入以下内容：

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

ログイン後にコピー

然后在我们要使用的页面上：

<video-player  class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>

ログイン後にコピー

最后增加一个配置变量：

playerOptions : {
    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
    autoplay: false, //如果true,浏览器准备好时开始回放。
    muted: false, // 默认情况下将会消除任何音频。
    loop: false, // 导致视频一结束就重新开始。
    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    language: 'zh-CN',
    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    sources: [{
      type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
      src: "" //url地址
    }],
    poster: "../../static/images/test.jpg", //你的封面地址
    // width: document.documentElement.clientWidth, //播放器宽度
    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controlBar: {
      timepider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      fullscreenToggle: true  //全屏按钮
    }
}

ログイン後にコピー

每次要切换视频的时候，修改src即可。

相册

vue-photo-preview

有的时候，我们会遇到一个需求，就是把小图放大或者多个图片方大后轮播的情况，这个时候用element ui中自带的组件已经没办法满足我们的使用了。这里推荐一个相册插件：vue-photo-preview。

安装：

cnpm install vue-photo-preview -S -d

ログイン後にコピー

添加main.js中

//加载图片查看工具
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
var options={
  fullscreenEl:false //关闭全屏按钮
}
Vue.use(preview,options)

ログイン後にコピー

使用方法非常简单，只要再img中添加两个属性即可。

//在img标签添加preview属性 preview值相同即表示为同一组
<img src="xxx.jpg" preview="0" preview-text="描述文字">
//分组
<img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字">

ログイン後にコピー

安全性

传输加密：sha256、md5、base64

前端进行she256，md5和base64非常的简单，只需要下载一套算法即可：

cnpm install js-md5 -S -d
cnpm install js-sha256 -S -d
cnpm install js-base64 -S -d

ログイン後にコピー

然后把下载好的算法全部定义到vue到prototype上：

//3种加密方式
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;

import sha256 from 'js-sha256';
Vue.prototype.$sha256 = sha256;

import base64 from 'js-base64';
Vue.prototype.$base64 = base64;

ログイン後にコピー

使用方法：

console.log("md5加密方式："+this.$md5('holle'));
console.log("sha256加密方式："+this.$sha256('holle'));
console.log("base加密方式："+this.$sha256('holle'));

ログイン後にコピー

交互数据模拟

mockjs

大部分时候，我们可能需要根据设计图做一个静态页面，因为我们不知道好多地方填上数据以后是什么样子的。这个时候我们肯定不能等着后端开发人员的接口开发完了再去填数据，这样效率太低了。

这里推荐使用mockjs。mock是一个可以拦截http请求生成一个微数据短的插件，让我们不用等着后端人员就可以自己先填入一部分数据。

使用cnpm命令安装，可以加快安装速度。

cnpm install mockjs --save-dev

ログイン後にコピー

使用上是非常方便的，因为mock会自动拦截http请求。
首先，我们再src中创建一个mock文件夹，并且再里面创建index.js：

//引入mockjs
const Mock = require('mockjs')

//响应模拟数据
Mock.mock('http://api.com', {
    "user|5-100": [{
        'name': '@cname',   //中文名称
        'age|1-100': 100,   //100以内随机整数
        'birthday': '@date("yyyy-MM-dd")',  //日期
        'city': '@city(true)'   //中国城市
    }]
});

ログイン後にコピー

你可以理解这个mock就是你的数据端，这里面配置的url，就是你获取虚拟数据要使用到的url。

然后打开main.js把这个js给引用上。

require('./mock/index')

ログイン後にコピー

最后我们再组件中请求这个地址即可获得数据：

//mock
this.axios({
    method: 'get',
    url: 'http://api.com'
}).then(function(response) {
    console.log(response);
})

ログイン後にコピー

动态标题

vue-meta-info

spa有一个非常大的问题就是，它实际上没有那么多页面，我们所有的页面逻辑关系都是通过route完成的。

可是，这样就诞生了一个问题，页面的title部分并没有切换掉。我们就需要动态的去处理这个titile了。这里推荐使用vue-meta-info来解决这个问题，说实话，我曾经一度认为这个东西是一个核心组件。因为你的title不切换的话，总感觉好像少点什么一样。

安装：

cnpm i vue-meta-info -S -d

ログイン後にコピー

main.js中

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

ログイン後にコピー

使用方法

metaInfo: {
    title: '生活随记—党云龙个人博客',
    meta: [{
        name: '党云龙个人博客',
        content: '党云龙,web前端开发,vue,vuecli,webpack,canvas,html5,css3'
    }]
}

ログイン後にコピー

优化篇

图片懒加载 vue-lazyload

vue-lazyload的作用就是：当你滚动条还没有滚动到这一片区域的时候，就不加载一片区域中的图片，会用loading中的gif图去代替。

使用npm安装方式：

npm install vue-lazyload   --save

ログイン後にコピー

然后在main.js中加入

//图片懒加载 ----------------------------------------
import VueLazyload from 'vue-lazyload';
//初始化
Vue.use(VueLazyload, {
  preLoad: 1.3,
  //loading: ‘../static/loading.gif',
  loading: require('./assets/loading.gif'),
  attempt: 1
})

ログイン後にコピー

注意，loading的图片在static和assets中路径的写法稍微有点区别。

上传图片压缩 lrz

在图片上传的时候，我们肯定不能直接把一张大图给传上去，这里我们需要限制一下大小。然后，可能更好的方法就是，进行压缩。
这里推荐使用lrz插件。
安装：

cnpm install lrz -S -d

ログイン後にコピー

然后再main中加载lrz:

import lrz from 'lrz'

ログイン後にコピー

使用的时候:

<template>
  <p>
    <p @click.stop="addPic" ref="upload" class="btn">
      <input type="file" accept="image/*" @change="onFileChange" style="display: none" multiple />chooseImg
    </p>
    <p v-if="!isNaN(before)">压缩前:{{before|number}}kb</p>
    <p v-if="!isNaN(after)">压缩后:{{after|number}}kb</p>
  </p>
</template>

ログイン後にコピー

import lrz from "lrz";
export default {
  data() {
    return {
      imgUrl: [],
      before: NaN,
      after: NaN
    };
  },
  methods: {
    onFileChange(e) {
      // 获取文件对象
      var file = e.target.files[0];
      // 压缩前文件大小
      this.before = file.size / 1024;
      this.imgUrl = URL.createObjectURL(file, { quality: 0 });
      lrz(this.imgUrl).then(rst => {
        // 压缩后文件大小
        this.after = rst.fileLen / 1024;
      });
    }
  }
}

ログイン後にコピー

以上がVue の共通コンポーネントは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。