Vue中使用highlight.js

高级前端开发视频
前端开发教学视频判断
前端开发如何播放视频

那我们来看一下vue组件中怎么引用highlight.js
highlight

import $ from ‘jquery
import hljs from ‘jspath/highlight.pack.js
import countCpm from ‘components/Vuex/countApp’
import mapStateCpm from ‘components/Vuex/mapStateCpm’
export default {
    name: ‘vuex’,
    data() {
        return {
            headtitle: ‘Vuex Learn Demo’,
        }
    },
    components: {
        countCpm,
        mapStateCpm,
    },
    mounted() {
        hljs.initHighlightingOnLoad()
        $(function() {
            $(‘pre code’).each(function(i, block) {
                hljs.highlightBlock(block)
            })
        })
    },
}

html 代码

<div id=”app”>
    <p>{{ < label> count }}</p>
    <p>
        <button @click=”increment”>+</button>
        <button @click=”decrement”>-</button>
    </p>
</div>

html 代码

const store = new Vuex.Store({
    state: {
        count: 0,
    },
    mutations: {
        increment: (state) => state.count++,
        decrement: (state) => state.count–,
    },
})
const app = new vue({
    el: ‘#app’,
    computed: {
        count() {
            return store.state.count
        },
    },
    methods: {
        increment() {
            store.commit(‘increment’)
        },
        decrement() {
            store.commit(‘decrement’)
        },
    },
})

想看更多代码和效果,可以移步参考:https://github.com/zhoou/vue-cli-multipage-bootstrap

前端设计开发入门视频
传智播客前端开发就业班视频
前端开发项目实战的视频
» 本文来自:前端开发者 » 《Vue中使用highlight.js》
» 本文链接地址:https://www.rokub.com/6955.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!