脚本宝典收集整理的这篇文章主要介绍了vue2.0+bootstrap实战(一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
俗话说,纸上学来终觉浅,绝知此事要躬行,最近两天学习了下Vue2.0,想做个项目练下手,顺便写个文章方便复习回顾~
再在配置中添加:
此时项目中就可以使用jQuery和Bootstrap了
<template>
</template>
<script>
export default {
name: "${NAME}"
}
</script>
<style scoped>
</style>
data() {
return {
books: [
{id: 1, name: '红楼梦', author: '曹雪芹', price: 32},
{id: 2, name: '水浒传', author: '施耐庵', price: 30},
{id: 3, name: '三国演义', author: '罗贯中', price: 24},
{id: 4, name: '西游记', author: '吴承恩', price: 20}
]
}
}
2.在template标签中引用bootstrap和数据定义表格
<div id="table">
<table class="table table-striped table-bordered">
<thead>
<tr>
<td>序号</td>
<td>书名</td>
<td>作者</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr v-for="book in books">
<td>{{ book.id }}</td>
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
</div>
3.在main.js中引入组件,并将组件填充到Vue实例中
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//导入jquery和bootstrap
import 'jquery/dist/jquery.min'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import myTable from './components/MyTable'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App,myTable },
template: '<myTable/>'
})
4.稍微调整样式后,浏览器显示结果如图:
以上是脚本宝典为你收集整理的vue2.0+bootstrap实战(一)全部内容,希望文章能够帮你解决vue2.0+bootstrap实战(一)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。