前端开发者| 高级前端开发视频 |
| 前端开发教学视频判断 |
| 前端开发如何播放视频 |
那我们来看一下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
| 前端设计开发入门视频 |
| 传智播客前端开发就业班视频 |
| 前端开发项目实战的视频 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册