开发Vue项目的时候遇到的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44288250/article/details/90380652

在写Vue中遇到的问题

组件问题

 <div id="app" v-bind:style="{fontSize: size + 'px'}">
    <my-component message="hello" v-on:bigger="test" v-bind:style="{fontSize: size + 'px'}"></my-component>
    <button v-on:click="$emit('bigger')">点击</button>
    {{ size }}
</div>
<script>
    Vue.component("my-component", {
        props: ["message"],
        template: "<button v-on:click=\"$emit('bigger')\"> {{ message }} </button>"
    });
    new Vue({
        el: "#app",
        data: {
            size: 15
        },
        methods: {
            test: function () {
                console.log(this.size++)
            }
        }
    });
</script>
  • 描述:组件外的<button>没有效果,组件里面的有效果
  • 思路:父级组件可以在使用子组件的地方直接使用 v-on 来监听子组件触发的事件,相当于子组件向父组件传递数据,第一个<button>在组件外,不是父级组件<my-component>的子组件,所以自然不会监听它的事件。

插件问题-vue devtools

  • 使用vue扩展程序 vue devtools 时,安装成功,但是无法使用,提示:
Vue.js is detected on this page. Devtools inspection is not available 
because it's in production mode or explicitly disabled by the author.
  • 原因:导入的 vue 的 cdn 是 vue.min.js 的文件,插件无法读取 min.js 文件
  • 解决:将 vue.min.js 改成 vue.js 即可

插件问题-自定义插件

  • 按如下代码自定义一个 fetch 插件:
export async function $fetch(url){
    const response = await fetch(`${baseUrl}${url}`);
    if (response.ok){
        return await response.json();
    } else {
        throw new Error('error');
    }
}

像下面这样使用:

created(){
    const vue = this;
    vue.loading = true;
    try {
        (async function getData() {
            vue.questions = await vue.$fetch('questions');
            vue.loading = false;
        })()
    }catch (e) {
        vue.error = e;
        vue.loading = false;
    }
}

代码太难看了,可以修改成这样:

async created(){
   this.loading = true;
    try {
        this.questions = await this.$fetch('questions');
    }catch (e) {
        this.error = e;
    }
    this.loading = false;
}

bug

标签写错

  • 把 <form>错写成<from>,报:
Unknown custom element: <from> - did you register the component correctly? 
For recursive components, make sure to provide the "name" option.

过滤器

  • 按照下面代码使用过滤器会报:
    [Vue warn]: Property or method “check” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="id-demo">
    <ul v-for="num in nums">
        <li>{{ num ? (num | check}}</li>
    </ul>
</div>
<script>
    Vue.filter('check', function (num) {
        if (num > 0)
            return num;
        else
            return -1;
    });
    new Vue({
        el: '#id-demo',
        data: {
            nums: [5, 6, -8, -2],
        }
    })
</script>

而修改成这样就没问题:

<li>{{ num | check}}</li>

知识点

input事件

  • 在组件中可以使用 @input 来监听 <input> 标签输入内容的变化情况
  • v-model 会默认监听 input 事件,所以可以这样在组件中使用 v-model
<div id="demo">
    <test v-model="username"></test>
</div>
<script>
    Vue.component('test', {
        template: `
            <div>
                <input type="text" @input="change">
            </div>
        `,
        methods: {
            change(event){
                this.$emit('input', event.currentTarget.value);
            }
        }
    });
    new Vue({
        el: '#demo',
        data(){
            return{
                username: 'test'
            }
        }
    })
</script>

服务器

服务器无法 install

安装服务器依赖的时候报
npm错误
一开始以为是python版本号问题(有时候必须python2),结果修改之后并没有用,后来在 npm包查询 查到 node10 以上的版本得用 bcrypt3 以上才行,所以最后解决方案是,在 install 其它依赖前,先

npm i bcrypt@3.0.6

然后再对服务器其它依赖进行安装

展开阅读全文

没有更多推荐了,返回首页