vue使用过程遇到的BUG

1、在页面中根据数组长度判断是否隐藏数据

　　angular中获取到的数据对象如masterInfo{arr:[1,11,111,11111]},可直接在ng-if后边使用masterInfo.arr.length,后台不会报错；

　　vue中获取到的数据对象如masterInfo{arr:[1,11,111,11111]},不可直接在v-if中使用masterInfo.arr.length,后台会报错，需要在data中输出masterInfo.arr.

2、vue后台报‘Do not use built-in or reserved HTML elements as component id: head’

　　是因为组件，不能和html标签重复

　　由于在模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况：

　　　　一是完全不合法的标签名，例如 </>；

　　　　二是与 HTML 元素重名会产生不确定的行为，例如使用 input 做组件名不会解析到自定义组件，使用 button 在 Chrome 上正常但在 IE 上不正常；

　　　　三是与 Vue 保留的 slot、partial、component 重名，因为会优先以本身的意义解析，从而产生非预期的结果。

3、Vue中引用axios ,为了在每个组件中都能使用，可将案axios绑定在Vue的原型上,如：Vue.prototype.$http = axios，其中$http是一个变量名，是在组件中使用的名字。

4、Vue.use()绑定全局组件，在我们使用Vue.use()时，自动调用的是install，而install导出的必须是的组件，axios不能使用vue.use绑定是因为axios中没有install;　

自定义一个全局Loading组件，并使用：
总结目录：
    |-components
    　　|-example
    　　　　|-index.js 导出组件，并且install
    　　　　|-example.vue 定义example组件，这里面基本的style ,script中之前讲的methods,data方法都可以使用

    index.js中的代码：
    import exampleTemplate from './example.vue'
    　　const Example={
    　　　　install:function(Vue){ //核心部分，在我们使用Vue.use()时，自动调用的是install，而install导出的必须是的组件
    　　　　Vue.component('example',exampleTemplate);
    　　}
    };
    export default Example;

    main.js中要使用：
    　　import example from './components/example'
    　　Vue.use(example); //调用的是install里面的组件

5.在vue的组件中，methods中的方法采用ES5的写法，会改变this的指向，建议使用es6的语法。

6、在vue中使用a标签的href='#home',这种方式跳转，页面路由改变但是页面没有改变。

7、v-bind:style动态绑定样式的时候里边不能出现分号，里边添加的是一个对象

vue使用过程遇到的BUG

猜你喜欢