Vue&Bootstrap结合学习笔记（一）
时间：2023-03-30 18:28:01
CSS
这篇文章是解决学习Vue和Bootstrap过程中遇到的问题的一些思路。主要描述工程构建、组件打包、获取、编辑、更新的分步实现。有些解决方案没有找到正确的官方API，请多多指教。项目介绍旨在通过项目的形式同时学习Vue和Bootstrap，实现在线配置页面的功能。通过Bootstrap封装的组件样式提供界面所需的组件，通过Vue实现组件状态变化和页面渲染。项目地址https://github.com/shixia226/bootstrap-vue-designer项目设计组件模块区提供所有可拖拽到编辑区的组件，功能与本学习目的无强相关，其主要拖放功能需要时间，所以暂时搁置。页面编辑区提供页面中所有已添加组件的编辑预览，并提供组件增删改查功能。增删改查功能可以结合模板区的拖拽功能，也可以暂时搁置组件配置区，提供具体的组件内部状态查看和更改功能项目构建基础项目构建，创建索引.html、index.js和配置webpackVue演示/body>module.exports={entry:'./index.js',output:{filename:'index.js'},module:{rules:[{test:/^[^.]+\.scss$/,使用:['style-loader','css-loader','sass-loader']},{测试:/(\.js|\.vue)$/,排除:/(node_modules|bower_components)(?!.*webpack-dev-server)/,loader:'babel-loader',query:{"presets":["env"]}}]}};Bootstrap样式导入"anonymous">Vuerc框架介绍https://cds.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">运行//nodewebpack-dev-server--port=9926//Browserhttp://localhost:9926/第一个组件BadageBootstrap官网例子：9组件解析badge-light样式可以换成badge-primary等，可以设置为属性变量来选择哪种颜色；badge-pill风格的表现与非pill风格不同，可以设置属性变量来控制风格；9文字内容作为最终显示内容，可以设置为属性变量；组件名称为widget-badge，Vue组件封装了Vue.component('widget-badge',{template:`<跨度：类=“['徽章'，主题？'badge-'+theme:'',pill?'badge-pill':'']">{{text}}`,props:['theme','pill','text']});组件显示html
jsnewVue({el:'.app'})组件配置完以上步骤后，刷新浏览器应该就可以了看组件效果，但是这个组件的所有属性都硬编码在标签里，动态属性不能在编辑页面动态设置。vue中的props属性是不允许动态改变的。一般只能改变data中的属性值，所以需要改变props将data中的所有可变属性复制到data中，名称不能相同。所以规定data中的所有属性都要以字母'v'开头；为每个变量属性添加一个编辑项，对应属性名name="vpropA"，值为当前属性值：value="vpropsA"，所有编辑项都在属性编辑器中定义。没有对应的获取editor属性值的API，但是通过分析vue对象，发现vue实例vm.$options.editor获取定义的值，所以让我们现在使用它。组件封装变化如下：">{{vtext}}`,props:['theme','pill','text'],editor:`
`,data(){return{vtheme:this.theme||'secondary',vpill:this.pill,vtext:this.text||'Badge'}}});属性配置面板点击不同的组件根据点击元素显示对应的（不同的）配置面板获取其所属的vue组件vue本来就是通过stateupdate的方式改变dom的，所以dom相关的API很少，而我们要分析vue实例中的数据，发现$children好像是直属下属组件的集合，$children的每一项还有一个$el属性对应实际的DOM元素函数getVueCmp(vm,elem){让pelems=[],$root=vm.$el;while(elem!==$root){pelems.push(elem);elem=elem.parentNode;}returngetVueCmpByPelem(vm,pelems);}functiongetVueCmpByPelem(vm,pelems){让$children=vm.$children;if($children){for(leti=0,len=$children.length;i
根据之前的数据获取组件实时数据命名规则，直接遍历$data中所有以字母'v'开头的属性functiongetVueCmpData(vcmp){if(!vcmp)return{};让$data=vcmp.$data,data={};让名字=Object.getOwnPropertyNames($data);for(leti=0,len=names.length;i
