❤ vue功能篇
VUE–代码高亮显示
先引入一些必须的环境链接
<script src="../vue.js"></script>
<!-- 引入一些链接支持 -->
<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/default.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
HTML部分只是id便于调用以及v-code定义标签
{{code}}显示数据
<div id="demo">
<code v-code class="html">{{codes}}</code>
</div>
然后是js部分 :
- 先进行指令的注册
- 再进行指令的使用
// 指令注册
Vue.directive('code', {
// 钩子函数指令 父-》
inserted: function (el) {
console.log(hljs);
hljs.highlightBlock(el);
},
})
//指令应用
new Vue({
el:'#demo',
data:{
codes:"<div class='content' style='width:300px;height:300px;'>\n\t<h2>Vue高亮代码显示部分</h2>\n\t<p>hello Vue!</p>\n</div>"
}
});
使用swiper3实现轮播图
- 安装好的卸载
npm uninstall swiper
- 安装swiper3
npm install swiper@3
- 启动
- 代码模块
首先是
<template>
<div>
<div class="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
1111111111
</div>
<div class="swiper-slide">slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</div>
</div>
<template>
- 其次部分
<script>
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'
import Swiper from 'swiper'
export default {
mounted() {
new Swiper ('.swiper-container', {
loop: true,
// 分页器
pagination: '.swiper-pagination',
paginationClickable :true,
//自动切换
autoplay: 2000
})
}
};
</script>
搞定收工~