Vue.js फ़ाइल में कोड कैसे टिप्पणी करें?

Question

मुझे भविष्य के संदर्भों के लिए एक vue.js फ़ाइल के अंदर एक टिप्पणी डालने की आवश्यकता है, लेकिन मुझे नहीं लगता कि आप डॉक्स में यह कैसे करते हैं।

मैं कोशिश की है //, /**/, {{-- --}}, और {# #}, लेकिन उनमें से कोई काम करने लगते हैं।

मैं लारवेल के ब्लेड का उपयोग कर रहा हूं। तो यह है sample_file.vue:

<template>
    <div class="media">

        <like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button>  {{--I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true--}}

        <div class="media-left">
            <a href="#">
                <img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image from Gravatar'">
            </a>
        </div>
        <div class="media-body">
            <strong>{{ post.user.name }}</strong>
            <p>{{post.body}}</p>
            <p>{{post.likeCount}} {{ pluralize('like', post.likeCount) }}</p>
        </div>
    </div>
</template> 

क्या किसी को पता है कि एक टिप्पणी कैसे डालें और / या कोड के टुकड़े कैसे टिप्पणी करें?

Comments

यदि आप मल्टी-लाइन टिप्पणी के लिए देख रहे हैं, तो मानक HTML टिप्पणी काम करेगी <!-- -->:। लेकिन ऐसा लगता है कि आप इनलाइन टिप्पणी के लिए देख रहे हैं?

— एडम

आह, मैं कोशिश करना भूल गया। यह वास्तव में HTMLकोड है! Thnx

— Pathros

डिफ़ॉल्ट रूप से HTML टिप्पणियों को vue vuejs.org/v2/api/#comments

— Mike3355

Vue का templating सिंटैक्स, Handlebars के समान है । यह ध्यान देने योग्य है कि हैंडलबार्स अनुमति देता है {{! comments like this }}और {{!-- comments {{like this}} that can contain double-braces --}}। ये आउटपुट में प्रदान नहीं होते हैं, <!-- html comments -->जिसके विपरीत करते हैं। मैंने दोनों की कोशिश की {{! ... }}और {{!-- ... --}}Vue के साथ, और दुर्भाग्य से वे समर्थित नहीं हैं। क्या आप उन उपयोगकर्ताओं के लिए अपने प्रश्न में उन्हें जोड़ने पर विचार करेंगे जो उस पर ठोकर खाते हैं?

— छारवे

Answer 1

आप <template>अपनी स्थिति में टैग में मानक HTML टिप्पणियों का उपयोग करना चाहते हैं । वे आउटपुट से छीन लिया जाएगा जो अच्छा है।

<!-- Comment -->

Comments

Afaict, वे Vue 3 t

— dtk

हाँ, यह Vue 3 में मेरे खाके तोड़ रहा है

— एडम स्टारर

Answer 2

जैसा कि Bill Criswell ने कहा कि हम HTML कमेंट सिंटैक्स का उपयोग कर सकते हैं।

<!-- Comment -->

लेकिन, यह टेम्प्लेट टैग के बाहर भी काम करेगा। टिप्पणी करें

<!-- Testing comments, this will work too. -->

<template>
    <!-- This will work too -->

    <div>
        <!-- Html Comments -->
        Hello There!
    </div>
</template>

<style><style>

<!-- Commenting here -->

<script>
    // Commenting only 1 line

    /**
      * Commenting multiple lines
      * Commenting multiple lines
      */
</script>

Comments

इससे Vue 2.5.13 के साथ "अप्रत्याशित टोकन (1: 1)" निकलता है।

— एलन सिल्जाक

मैं समर्थित रूट टैग के बाहर टिप्पणी करता था और टिप्पणियों की सामग्री के आधार पर मुद्दों का कारण बनता पाया। मैं रूट टैग्स के बाहर समर्थित टिप्पणियों की कामना करता हूं क्योंकि यह READMEs और ऐसे बनाने के लिए सबसे समझदार जगह है, लेकिन ओह अच्छी तरह से।

— आहा

समर्थित रूट टैब के बाहर टिप्पणियों का उपयोग करने के बजाय, वहां मान्य टैग का उपयोग करें। <comment>Commenting here</comment। आपको इन्हें अपने वेबपैक कॉन्फिगर में जोड़ना होगा। vue-loader.vuejs.org/guide/custom-blocks.html#example

— डेविड आर।

Answer 3

मैंने अभी इसका परीक्षण किया है:

<template>
    {{ /* this is a comment */ }}
    <h1>Hello world</h1>
</template>

Comments

कूल, यह html आउटपुट में प्रकट नहीं होता है। लेकिन इस वाक्य रचना के साथ केवल एक-पंक्ति-टिप्पणियों का समर्थन किया जाता है।

— d9k

दुर्भाग्य से, मुझे यह काम करने के लिए नहीं मिल सकता है:Error parsing JavaScript expression: Unexpected token (1:24)

— dtk

Answer 4

मैंने देखा कि जब आप किसी टैग के अंदर होते हैं तो आप टिप्पणी नहीं कर सकते:

<!-- make sure it is outside a tag -->

<autocomplete
<!-- you can't place the comment out in here -->
>
</autocomplete>

Answer 5

यदि यह आपकी परियोजनाओं के लिए उपयोगी है, तो आप बिना किसी श्रंगार के टेम्पलेट के ऊपर सादा पाठ रख सकते हैं। जब आप अपने घटक को प्रस्तुत करते हैं तो इसे पूरी तरह से अनदेखा कर दिया जाता है।

This is some documentation about this component
   - some
   - info
<template></template>
<script></script>
<style></style>

Answer 6

Vue Styleguidist में सर्वोत्तम अभ्यास शामिल हैं और आपके घटकों को कैसे टिप्पणी करें, इसके उदाहरण दिखाता है। https://vue-styleguidist.github.io/docs/Documenting.html#code-comments

लेकिन सामान्य रूप में...

में टेम्पलेट या HTML अनुभाग उपयोग एचटीएमएल टिप्पणियां

<!-- Comment -->

में स्क्रिप्ट खंड जावास्क्रिप्ट टिप्पणियों का उपयोग

// Comment
/* Comment */

में शैली अनुभाग उपयोग सीएसएस टिप्पणियां

/* comment */

Answer 7

निम्नलिखित टिप प्रति टिप्पणी (जैसा कि दस्तावेजीकरण में) कोड के बारे में इतना नहीं है, बल्कि आपको विकास के दौरान अस्थायी रूप से कोड के विखंडन को छोड़ने की अनुमति देने के बारे में है।

जब टिप्पणियों को खोलने और बंद करने वाले टैग की आवश्यकता होती है, तो जिस तरह से पार्सर उनसे मेल खाता है वह असुविधाजनक हो सकता है। उदाहरण के लिए निम्नलिखित

<!-- I want to comment this <!-- this --> and that --> 

उत्पादन होगा and that -->। इसी तरह /* this will be commented /* and so will this */ but not this */।

मेरा समाधान यह v-if="false"निर्दिष्ट करने के लिए उपयोग करना है कि मैं कौन से ब्लॉक (अस्थायी रूप से) को छोड़ना चाहता हूं।

<template>
<div>
    Hello
    <div v-if="false">
        Vue will not process whatever's in here.
    </div>
    World!
</div>
</template>

ध्यान दें कि इसका उपयोग आपके कोड को दस्तावेज़ करने के लिए उचित टिप्पणियों के प्रतिस्थापन में नहीं किया जाना चाहिए। यह उन ब्लॉकों पर अधिक नियंत्रण रखने का एक सुविधाजनक तरीका है जिन्हें आप विकास के दौरान छोड़ना चाहते हैं।

Answer 8

मैं Vue.js में noob हूं, लेकिन //काम करना चाहिए क्योंकि कोड वैसे भी जावास्क्रिप्ट है। डॉक्स में देखकर मुझे यह उदाहरण मिलता है । यदि आप जावास्क्रिप्ट की पहली 2 पंक्तियाँ देखते हैं तो आप टिप्पणियों को देखेंगे //।

जावास्क्रिप्ट लिंक्ड फ़ाइल में उदाहरण:

// Full spec-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~120 effective lines of JavaScript.

...

Comments

हालाँकि, यह templateटैग के अंदर काम नहीं करता , लेकिन scriptटैग के अंदर

— Pavindu