vue v html bug,vue常见项目bug整理

常见项目bug整理

项目工程化

vuex的使用

1.在src文件下建 store文件 index.js 存放仓库数据

2.在main.js中 import 导入该文件，并在vue实例中添加store

eg:

import store from ‘./store’

new Vue({

el: ‘#app’,

router,

store,

components: { App },

template: ‘’

})

具体实现参考store

编程路由的使用

。。。。

字体自适应

方式1: 样式中可以使用px，将px转成rem

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,

recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px’;

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener(‘DOMContentLoaded’, recalc, false);

})(document, window);

方式2：

常用逻辑语句

1.控制结构的显示与隐藏

1)通过vuex中的数据控制结构的显示与隐藏

v-if=“this.$store.state.username==’’?!show:show”

在data数据中设置 show的值(true,false)

2)通过路由中的信息控制显示与隐藏

v-show=“route.meta.navShow==undefined∣∣route.meta.navShow==undefined||route.meta.navShow==undefined∣∣route.meta.navShow”

在router文件下 index.js 中的路由规则中添加 meta:{navShow:false}

eg:

{ //我的积分

path:’/integral’,

name: ‘integral’,

component: Integral,

meta:{navShow:false}

}

3)实现toggle切换

hello world