Vue: 2.0 परिवर्तन

मैंने अभी देखा कि कुछ सुविधाएँ केवल स्टैंडअलोन बिल्ड में उपलब्ध होंगी। क्या इसका मतलब यह है कि यह और एनपीएम संस्करण काफी भिन्न हैं?

@rekateka 2.0 स्टैंडअलोन बिल्ड का मतलब है (कंपाइलर + रनटाइम)। NPM पैकेज का डिफ़ॉल्ट निर्यात केवल रनटाइम होगा, क्योंकि यदि NPM से इंस्टॉल किया जाता है, तो आप संभवतः एक बिल्ड टूल के साथ टेम्प्लेट को पूर्व-संकलित करेंगे।

धन्यवाद, @yyx990803। मेरे पास अभी भी संकलक और अन्य सुविधाओं के बारे में कुछ और प्रश्न हैं, लेकिन मैंने उसके लिए मंच का उपयोग किया है।

क्या उन दस्तावेज़ों में कोई चिंताजनक परिवर्तन किए गए हैं जिनकी मुझे किसी भी तरह से समीक्षा करनी चाहिए? महान काम! लगे रहो यार। आप वेब विकास को फिर से परिभाषित कर रहे हैं। आपको धन्यवाद!

क्या मुझे अपने निर्देश का this.arg मिल सकता है?

मुझे लगता है कि vnode.data.directives में arg , लेकिन जब मेरे पास दो या अधिक निर्देश हैं, तो मैं index को नहीं जान सकता।

<!-- show @ 0, img @ 1-->
<img v-show="true" v-img:200*200="imgSrc">

<!-- img @ 0, show @ 1-->
<img v-img:200*200="imgSrc" v-show="true">

क्या मुझे forEach उपयोग करना चाहिए? आपको धन्यवाद!

@banricho अच्छा बिंदु, इसे अनदेखा कर दिया गया है! अद्यतन निर्देश फ़ंक्शन हस्ताक्षर देखें।

सबसे पहले, क्षमा करें, मुझे पूरा यकीन नहीं है कि क्या मैं इस समस्या को यहां पूछ सकता हूं, और मुझे कुछ आवश्यकताएं हैं जो मैं कहना चाहता हूं।
आवश्यकता यह है कि मुझे आशा है कि मैं अपने घटक के उपयोग को इस तरह डिजाइन कर सकता हूं

<carousel>
  <img src="..." alt="..." desc="..." is="argument">
  <img src="..." alt="..." desc="..." is="argument">
</carousel>

मुझे उम्मीद है कि बच्चे किसी तरह के तर्क के रूप में हो सकते हैं, न केवल विशेषताओं में सीमित
अभी के लिए मैं एक घटक बना सकता हूं, जैसे उपयोग

<carousel items="[{}, {}, {}]"></carousel>

लेकिन मुझे लगता है कि यह बहुत अच्छा नहीं है, मुझे आशा है कि यह इसे पसंद कर सकता है जिसे मैंने पहले रिएक्ट कवरफ्लो में बनाया था

@andyyou - वह प्रश्न शायद मंच पर सबसे अच्छा पोस्ट किया गया है, क्योंकि यह कोई मुद्दा नहीं है, न ही कोई स्पष्ट सुझाव है, न ही इस मुद्दे पर कोई वास्तविक मदद है।

http://forum.vuejs.org/

यदि आपको पता चलता है कि आपके फोरम थ्रेड में Vue के साथ आपकी आवश्यकताओं को पूरा नहीं किया जा सकता है, तो आप यहां एक नया मुद्दा खोल सकते हैं।

स्कॉट

@smolinari धन्यवाद

"लेकिन अधिक जटिल मामलों के लिए, Vuex का उपयोग करके एक समर्पित राज्य प्रबंधन परत पेश करने की अनुशंसा की जाती है।" इसका अर्थ यह प्रतीत होता है कि राज्य का उपयोग घटनाओं पर किया जाना चाहिए। मैं उन्हें पूरी तरह से अलग देखता हूं - एक घटना समय में एक क्षण है, जबकि राज्य नहीं बदलता है। आप कह सकते हैं कि आप राज्य को देख सकते हैं, लेकिन यह भी एक विशिष्ट क्षण को व्यक्त नहीं करता है, बल्कि इसके बजाय कभी भी कुछ बदल जाता है। मुझे इस सिफारिश के पीछे के अर्थ में दिलचस्पी है।

@jrenton आम तौर पर, हम घटना प्रणाली को केवल घटक ए के रूप में घटक बी को अपनी स्थिति बदलने के लिए, या ए कुछ और करने के लिए बी को बता सकते हैं।
तो पहले मामले के लिए, हम राज्य प्रबंधन का उपयोग कर सकते हैं (ए और बी के लिए एक साझा राज्य का प्रबंधन) घटना प्रणाली का उपयोग करने के बजाय ए को बी को राज्य बदलने के लिए कहने के लिए।
दूसरे मामले के लिए, मुझे लगता है कि इसे 'इवेंट बस' दृष्टिकोण से बहुत अच्छी तरह से संभाला जा सकता है।

@jrenton एक दूसरे से बात करने वाले घटकों के सूप के बजाय

मैं Vue के साथ टहनी का उपयोग कर रहा हूँ।

अब तक (vue 1.0) मैं इस तरह से अपने घटकों में डेटा पास कर रहा हूं:

<my-component data="{{ DATA }}"><my-component>

(ध्यान दें कि {{ और }} टहनी टैग हैं - vue के लिए मैं कस्टम सीमांकक ${ और } का उपयोग कर रहा हूं)

अगर मैं चीजों को सही ढंग से समझ रहा हूं, तो Vue 2.0 में मुझे इसे इस तरह करना चाहिए:

<my-component :data=" '{{ DATA }}' "></my-component>
अधिकार?

@gholol नहीं, यह बस है

<my-component :data="{{ DATA }}"></my-component>

असल में ऐसा लगता है कि आपका पुराना उपयोग पहली जगह में काम नहीं करना चाहिए।

अच्छा यह ठीक काम किया ...

जैसा मैंने कहा, डेटा ट्विग टेंपलेटिंग इंजन से आ रहे हैं। अब Vue 2.0 में यह काम नहीं करता। मैं इसे पास करने की कोशिश कर रहा हूं जैसे आपने कहा (एकल एस्ट्रोफ़ेस के बिना) लेकिन डेटा संपत्ति अपरिभाषित हो जाती है।

त्रुटि: सिंटैक्स त्रुटि: अनुपलब्ध } संपत्ति सूची के बाद

संपादित करें: यह काम करता है, मैं यह उल्लेख करना भूल गया कि डेटा चर एक स्ट्रिंग है

@jrenton मेरा विचार और प्रेरणा काफी सरल है, ऐसा लगता है कि Vue को प्रतिक्रिया पसंद नहीं है जो हमें template चुन सकते हैं।

मुझे उम्मीद है कि मैं बच्चों के तत्व सिंटैक्स का उपयोग एक पैरामीटर (तर्क) के रूप में कर सकता हूं, माता-पिता को तर्क देता है क्योंकि कुछ टेम्पलेट भाषा जैसे slim यदि आपके पास कुछ अधिक विशेषताएँ हैं या कहते हैं कि एटीआर का नाम काफी लंबा है तो हमें रखना होगा एक पंक्ति में सभी चीजें। 80 वर्णों से अधिक एक पंक्ति का कोड बनाना आसान है।

@ yyx990803 आज रोमांच महसूस करना यह देखना चाहता था कि 1.0 से 2.0a तक माइग्रेट करने में कितना प्रयास करना होगा, दुर्भाग्य से चूंकि अब सरल इंटरपोलेशन का उपयोग करना संभव नहीं है, मैं इस बारे में कैसे जाउंगा और <input type="text" name="account[categories][{{ category.id }}]"> में कुछ सरल कैसे करूं? 2.0?

ES6 इनलाइन टेम्प्लेट बाध्यकारी भावों में काम करते हैं:

<input type="text" :name="`account[categories][${ category.id }]`">

https://jsfiddle.net/Linusborg/cm4v75xh/

यदि 2.0 पर यह काम करने का यही एकमात्र तरीका है, तो मुझे यह कहने में कोई आपत्ति नहीं है कि यह सुंदर सिंटैक्स 1.0 में एक प्रतिगमन है जिसकी हमें आदत हो गई है - हाँ मुझे पता है कि यह सिर्फ ES2015 है।

मुझे लगता है कि प्रदर्शन कारणों से इंटरपोलेशन हटा दिया गया था? मुझे उम्मीद है कि यह बदसूरत वाक्यविन्यास के लायक है।

@oskarkrawczyk मुझे लगता है कि आप अपने डोम में name="account[categories][fruits]" जैसे कुछ के साथ समाप्त करना चाहते हैं, क्योंकि यह आपकी अभिव्यक्ति प्रस्तुत करेगी।

2.0 संस्करण (और उचित 1.0, वास्तव में) :name=" 'account[categories][' + category.id + ']' " ।

@simplesmiler समझ गया। मुझे लगता है कि {{ }} मुझे थोड़ा खराब कर दिया।

@ yyx990803 क्या मैं इस तरह से गतिशील रूप से घटक सम्मिलित कर सकता हूं?

    render () {
        return this.$createElement('div', { staticClass: 'list-container' }, this.list)
    },
    data () {
         return {
               list: []
         }
    },
    method: {
         a () {
               this.list.push(this.$createElement('myComponent', {}))    
         }
    }

मैं एक विशेषता के लिए कुछ मान कैसे बांध सकता हूं जो अभिव्यक्ति पर निर्भर करता है? उदाहरण के लिए:

new Vue({
  el:'body',
  data:{
    flag: true
  }
})

<input type="text" v-bind:placeholder="{test: flag, test2: !flag}" />

मुझे अगले परिणाम की उम्मीद है:

<input type="text" placeholder="test" />
<!-- or -->
<input type="text" placeholder="test2" />

@nervgh यह सवाल पूछने के लिए यह सही जगह नहीं है।
टर्नरी अभिव्यक्ति का प्रयोग करें, v-bind:placeholder="flag ? 'test' : 'test2'" ।

@simplesmiler , आपके उत्तर के लिए धन्यवाद। मैं यह कहने की कोशिश करता हूं कि _Object-Syntax_ इन मामलों में उपयोगी होगा, लेकिन यह मेरी अपेक्षा के अनुरूप काम नहीं करता है।

@nervgh ऑब्जेक्ट सिंटैक्स केवल उन विशेषताओं पर लागू होता है जो स्ट्रिंग्स की सूची लेती हैं। मूल विशेषताओं में से केवल ऐसी विशेषता class , और घटकों के लिए बच्चे की ओर से पता लगाने का कोई तरीका नहीं होगा कि क्या आप स्ट्रिंग्स या उचित वस्तु की सूची भेजना चाहते हैं।

पुन: .once और .sync बहिष्कृत हैं।

क्या यह वास्तव में सामान्य डिज़ाइन पैटर्न को नहीं तोड़ता है?

मैं नहीं सोच सकता कि आप इनके बिना फॉर्म फ़ील्ड को संभालने के लिए सरल घटक कैसे प्राप्त कर पाएंगे।

मेरे पास विभिन्न फॉर्म फ़ील्ड प्रकारों के लिए सरल घटक हैं, उदाहरण के लिए यहां मेरा "टेक्स्टबॉक्स" घटक टेम्पलेट है ::

<label>{{type.caption}}:<input type="text" v-model="data"></label>

... और सूचियों के लिए एक अधिक जटिल घटक जो डेटा संरचना में सरणियों से तत्वों को जोड़ने और हटाने के लिए एक ui प्रदान करता है

फिर मैं इन घटकों का उपयोग करता हूं जैसे कि:

<div v-for="field in type.fields">
    <component :data.sync="data[field.name]" :is="field.ctype" :type="field">

नोट: इन सभी घटकों में दो प्रॉप्स हैं: data और type । data संपादित की जा रही डेटा संरचना में नोड है कि घटक संपादन के लिए UI प्रदान करने के लिए ज़िम्मेदार है, और type (विशाल, स्थिर) डेटा संरचना में नोड है जिसमें प्रकार होते हैं /फ़ील्ड पदानुक्रम।

उस तरह का सामान बिना .sync कैसे काम कर सकता है?

मुझे ऐसा लगता है कि यह इन घटकों के बीच किसी प्रकार की संदेश प्रणाली बनाने के लिए चीजों को गंभीर रूप से जटिल करेगा जहां उप-घटक किसी भी तरह से माता-पिता से संवाद कर सकते हैं कि वे कौन से उप-घटक हैं, और माता-पिता यह पता लगा सकते हैं कि इसके डेटा का कौन सा हिस्सा है संशोधित करने के लिए संरचना।

मुझे वाकई उम्मीद है कि मुझे कुछ याद आ रहा है .... क्योंकि ऐसा लगता है कि आप कह रहे हैं कि आपके डेटा संरचना के कुछ हिस्सों के लिए संपादक बनाने के लिए घटकों का उपयोग करना एक विरोधी पैटर्न है। क्या? अब तक मैंने केवल यही एक चीज के लिए Vue का उपयोग किया है। मुझे लगता है कि आपको लगता है कि इस सुविधा को हटाने से लोगों को क्लीनर कोड लिखने के लिए प्रोत्साहित किया जाएगा। हो सकता है कि इसका कुछ लोगों पर प्रभाव पड़े, लेकिन बहुत से लोग इस सीमा के आसपास काम करने के लिए बहुत अधिक कोड लिखेंगे। राज्य को संशोधित करना ही एकमात्र उपयोगी चीज है जो कंप्यूटर करता है। कृपया इसे आसान बनाना जारी रखें।

2.0 में @JasonWoof v-model कस्टम घटकों पर काम कर सकता है। घटक को बस जरूरत है:

1. value नाम के एक प्रॉप को बेनकाब करें
2. एक input घटना का उत्सर्जन करें जब मूल्य को माता-पिता के साथ समन्वयित करने की आवश्यकता हो, उदाहरण के लिए this.$emit('input', value)

उदाहरण देखें।

@ yyx990803 स्पष्टीकरण और लिंक के लिए धन्यवाद। अब मैं बस पर अटक गया हूँ:

.sync क्यों हटाएं?

मुझे फायदा नहीं दिख रहा है, केवल नुकसान हैं। आपके द्वारा लिंक किया गया उदाहरण दिखाता है कि आप एक ही चीज़ को :selected.sync या v-model साथ प्राप्त कर सकते हैं। मैं केवल वी-मॉडल विधि के नुकसान देखता हूं:

1. इसके लिए उप-घटक पक्ष पर महत्वपूर्ण बॉयलर-प्लेट की आवश्यकता होती है, यह अधिक जटिल है, सीखने के लिए अधिक है, आदि।
2. आप वी-मॉडल के साथ केवल एक मान पास कर सकते हैं, लेकिन आपके पास कई .sync प्रॉप्स हो सकते हैं

मैं नहीं देखता कि वी-मॉडल पर स्विच करने से कुछ भी स्पष्ट/क्लीनर हो जाता है। दोनों ही मामलों में, माता-पिता में एकमात्र संकेत है कि बाल घटक आसानी से मूल स्थिति को संशोधित कर सकता है, टेम्पलेट में प्रोप का सिंटैक्स है। मैं यह भी तर्क दूंगा कि .sync अधिक स्पष्ट है।

दूसरी बात यह है कि जब आप वस्तुओं/सरणी/आदि को प्रोप के रूप में पास करते हैं, तो वे बाल घटक से परिवर्तनीय होते हैं। तो आप प्रोग्रामर को इस मामले में बाल घटकों से राज्य को बदलने में सक्षम होने से नहीं बचा सकते हैं (जो मुझे लगता है कि यह बहुत आम है।) तो मुझे ऐसा लगता है कि आप उस चीज़ को हटाकर एक ठोकर का परिचय दे रहे हैं जो इसे ऐसा बनाता है पासिंग स्ट्रिंग वैल्यू पासिंग ऑब्जेक्ट वैल्यू के समान काम करती है। .sync हमेशा मेरे "डेटा" प्रॉप्स को बच्चे की ओर से लिखने योग्य बनाकर मेरे कोड को सरल और अधिक सुसंगत बनाता है, चाहे डेटा प्रकार कोई भी हो।

मैं Vue.js के लिए नया हूँ (3 दिन पहले) लेकिन अब तक जो मैंने देखा है, Vue.js मुख्य रूप से दो चीजों के कारण मूल्यवान है:

1. टेम्पलेट्स के साथ आसान डोम हेरफेर
2. टेम्पलेट परिवर्तनों को ट्रिगर करने सहित स्वचालित मूल्य/डेटा परिवर्तन प्रसार

कम से कम मैंने अब तक यही खोजा है।

मुझे ऐसा लगता है कि .sync को हटाने से Vue.js को लगातार दूसरा काम करना मुश्किल हो जाता है।

@JasonWoof क्योंकि घटकों के बाहर स्पष्ट बनाम निहित दुष्प्रभाव स्वयं के दायरे में दीर्घकालिक रखरखाव में सभी अंतर बनाते हैं।

... और जबकि कोई यह तर्क दे सकता है कि लोगों को बस सीखना चाहिए कि कब उपयोग नहीं करना है .sync , अब तक का हमारा अनुभव अलग है। लोग इस पर बहुत अधिक भरोसा करते हैं और कोड बनाते हैं जिसे वे बाद में शायद ही डिबग कर सकते हैं।

इसलिए यह शुरुआत से ही लोगों को इसे करने के लिए मजबूर करने के लिए एक डिज़ाइन निर्णय है।

एक उदाहरण:

• हम माता-पिता और बच्चे के बीच एक मान name सिंक करते हैं। सब बढ़िया।
• हम तय करते हैं _'अरे, जब वह मान बदलता है, तो हमें माता-पिता में कुछ करने की ज़रूरत है!'_
• इसलिए, हम एक watch फ़ंक्शन बनाते हैं। अच्छा!
• बाद में हमें पता चलता है कि जब हम नहीं चाहते तो द्रष्टा आग लगने लगता है। लेकिन हम वास्तव में क्यों नहीं बता सकते, क्योंकि हम व्यवहार का पता लगाने के लिए वास्तव में कहीं भी console.log() नहीं डाल सकते हैं।
• बहुत कठिन सोच के बाद, हमें एहसास होता है कि हम वास्तव में केवल यह चाहते हैं कि माता-पिता में मूल्य बदल जाए, न कि बच्चे या "दादा-दादी"।
• अब हम किसी भी तरह watch फ़ंक्शन में इन परिदृश्यों को अलग करने का एक तरीका खोजने का प्रयास करते हैं।
• केवल यह समझने के लिए कि यह एक साधारण चीज़ को बहुत जटिल बना देता है
• और अंत में, कोई हमें सिंक को हटाने के लिए कहता है, इसलिए हम इसे दूर फेंक देते हैं और स्थिति को संभालने के लिए एक-तरफ़ा प्रोप और एक उत्सर्जित घटना का उपयोग करते हैं - कोड सरल और अधिक स्पष्ट हो जाता है, इसलिए यह तर्क करना आसान है कि कैसे और जब डेटा प्रवाहित होता है और इसे डीबग करना आसान हो जाता है। बग जल्दी मिल जाता है और हम आगे बढ़ सकते हैं।

...और यह तब और भी अधिक पागल हो जाता है जब आप एक से अधिक स्तरों को गहराई से सिंक करते हैं।

यह एक (एंटी-) पैटर्न है जिसे हमने मंचों पर और गटर चैट में बार-बार देखा है।

.sync को हटाने से लोगों को शुरू से ही स्पष्ट, स्पष्ट, बनाए रखने योग्य कोड लिखने के लिए मजबूर किया जाता है, क्योंकि उनका कोड .sync लिए बहुत लंबे समय तक, अधिकांश समय के लिए पर्याप्त सरल नहीं रहेगा।

ठीक है। समझाने के लिए धन्यवाद।

यह सुनना अच्छा है कि आप किस समस्या को हल करने का प्रयास कर रहे हैं।

मुझे गंभीरता से संदेह है कि इससे मदद मिलेगी, हालांकि... इसे बनाएं ताकि लोग आपकी पसंद के पैटर को आसानी से न तोड़ सकें और लोग सीमाओं के आसपास काम करने के लिए और भी बुरे काम करेंगे।

यह मुझे बहुत सारे अमूर्तता की याद दिलाता है। अमूर्तन हमें बहुत परेशानी में डालते हैं। वे कोड को पढ़ने में कठिन बनाते हैं, डिबग करना कठिन, आदि .... लेकिन आप अमूर्त बनाने की क्षमता को हटाकर इसे ठीक नहीं कर सकते हैं ... यही वह चीज है जो प्रोग्रामिंग को संभव/उपयोगी बनाती है। इसका समाधान भाषा या ढांचे के स्तर पर नहीं है, बल्कि शिक्षण, सलाह, सीखने में है। हम लोगों को प्रोत्साहित करते हैं कि वे चीजों को अत्यधिक सारगर्भित न बनाएं।

ऐसा लगता है कि आप इस तरह के एक डिजाइन दर्शन के बारे में बात कर रहे हैं। कई मामलों में, कोडिंग करते समय ध्यान में रखना एक महान दर्शन है। लेकिन जब इसे एक सीमा के रूप में लगाया जाता है, और प्रोग्रामर सोचता है कि यह सीमा उसे वह करने से रोकती है जो उसे करने की आवश्यकता है, तो वह इसके आसपास काम करने जा रही है, जिसके परिणामस्वरूप उन सभी समस्याओं का परिणाम होगा जिनसे आप बचने की कोशिश कर रहे थे और बदतर।

लोग माता-पिता की स्थिति को बच्चों से बदलने की कोशिश करना बंद नहीं करने जा रहे हैं। आप लोगों को ऐसा नहीं करने के लिए बाध्य नहीं कर सकते।

आपकी v-model चीज इतनी जटिल है कि मैं मूल वस्तु/सरणी और एक कुंजी पास करके इस समस्या के आसपास काम करूंगा ताकि बच्चा इसे संशोधित कर सके।

मुझे लगता है कि यह आखिरी बिट हिट है जो मैं पार करने की कोशिश कर रहा हूं: मैं (व्यक्तिगत रूप से) एक समस्या के रूप में .sync की कमी देखता हूं, और इसके आसपास काम करेगा या आपके ढांचे का उपयोग नहीं करेगा। मुझे यकीन है कि बहुत से लोगों का दृष्टिकोण समान होगा।

शायद यह बिना कहे चला जाता है, लेकिन यह मुझे थोड़ा गुस्सा दिलाता है जब लोग मुझ पर डिजाइन दर्शन थोपने की कोशिश करते हैं। मैं उन चीजों का निर्माण करना चाहता हूं जो बहुत गलत हो जाते हैं और उन प्रणालियों का उपयोग करने के बजाय फिर से ऐसा नहीं करना सीखते हैं जो जानबूझकर शक्ति को इस डर से रोकते हैं कि मैं इसे बुरी तरह से उपयोग कर सकता हूं।

PS क्षमा करें, मैं अपनी मदद नहीं कर सकता, एक और टिप्पणी, फिर मैं आप लोगों को अकेला छोड़ दूँगा। अधिकांश प्रोग्रामर कोड लिखते हैं कि वे डिबग नहीं कर सकते। यह हर प्रोग्रामर के साथ हर भाषा में हर ढांचे के साथ होता है। इस प्रकार प्रोग्रामर बेहतर प्रोग्रामर बनते हैं: वे गलतियाँ करते हैं, वे कोड बनाते हैं जिसे वे ठीक नहीं कर सकते, वे सीखते हैं कि भविष्य में चीजों को अलग तरीके से कैसे लिखना है। कृपया इसे बनाने के प्रयास में हर किसी के लिए अपने ढांचे को कम न करें ताकि प्रोग्रामर जो खुद को कोने में अमूर्त कर सकें, इससे पहले कि यह इतनी गड़बड़ी हो जाए कि वे इसे डीबग नहीं कर सकें, इससे पहले कि वे अपनी सामग्री को थोड़ा और भ्रमित/जटिल बना सकें।

@JasonWoof इसका " और मुहावरेदार समाधान पर मार्गदर्शन प्रदान करेंगे। आप अपनी व्यक्तिगत राय के आधार पर इससे असहमत होने के लिए स्वतंत्र हैं, लेकिन मुझे आपके तर्क शायद ही आश्वस्त करने वाले लगते हैं।

लोग माता-पिता की स्थिति को बच्चों से बदलने की कोशिश करना बंद नहीं करने जा रहे हैं। आप लोगों को ऐसा नहीं करने के लिए बाध्य नहीं कर सकते।

ज़रूर। और हम उन्हें 'बल' नहीं देंगे, क्योंकि कुछ किनारे के मामले हो सकते हैं जहां यह अभी भी आवश्यक हो सकता है। तो आप अभी भी this.$parent कर सकते हैं, आप $data को एक प्रोप आदि के माध्यम से पास कर सकते हैं, लेकिन बहुत स्पष्ट रूप से ऐसा करना अधिक आश्वस्त नहीं होगा कि $emit एक घटना में अधिकांश समय, इसलिए वे .sync चीनी की तरह आकर्षक नहीं होंगे।

साथ ही, $parent et.al. आधिकारिक गाइड का हिस्सा नहीं हैं, इसलिए जो उपयोगकर्ता उनका उपयोग करते हैं वे सक्रिय रूप से सुझाए गए सर्वोत्तम अभ्यासों के आसपास काम कर रहे हैं - जो वे करने के लिए स्वतंत्र हैं, लेकिन हम उस व्यवहार को प्रोत्साहित नहीं करते हैं।

नतीजतन, ढांचे को .sync जैसी 'जादुई' वाक्यात्मक चीनी प्रदान करके समान व्यवहार को प्रोत्साहित नहीं करना चाहिए, अगर हमें लगता है कि इस तरह की सुविधा का अधिकांश परिदृश्यों में दुरुपयोग किया जाता है और ढांचे को स्थापित करने के लिए सर्वोत्तम प्रथाओं के विपरीत है।

क्या Youda का चीनी संस्करण है? .

Vue-राउटर के लिए संगतता कैसी दिखती है?

@roblav96

संगत होने के लिए कुछ बदलावों की आवश्यकता है, हम राउटर को Vue में बेहतर ढंग से शामिल करने की उम्मीद कर रहे हैं।

@ ब्लेक-न्यूमैन

क्या हम वू-क्ली पर एक साथ बॉयलरप्लेट टेम्पलेट प्राप्त कर सकते हैं? मुझे यह काम करने में से कोई भी नहीं मिल रहा है

@roblav96

वर्तमान में कुछ हैं, इसे संगत बनाने के लिए vue-loader के साथ कुछ परिवर्तन परिवर्तनों की आवश्यकता है। वर्तमान में 2.0 का प्रयोग केवल प्रयोग के लिए किया जाना चाहिए जब तक कि बड़े पैमाने पर अनुप्रयोगों के लिए सभी निर्भरताएं अद्यतन नहीं हो जातीं।

क्या बीटा/रिलीज़ उम्मीदवारों के लिए कोई ईटीए है?

@Evertt अल्फा इस सप्ताह होने वाला है। बीटा प्रलेखन पूरा होने के साथ पालन करेगा, और शायद कोर विस्तार पुस्तकालयों (वू-राउटर ect) से अधिक समर्थन। बीटा सफल साबित होने पर उम्मीदवार को छोड़ दें।

@ ब्लेक-न्यूमैन उस त्वरित, संक्षिप्त और पूर्ण प्रतिक्रिया के लिए धन्यवाद। वही सबसे अच्छे हैं। :-डी

Vue 2.0 में replace: false लिए कोई समाधान?

नमस्ते, क्या JSX पहले से ही प्रयोग करने योग्य है?

@reohjs - नहीं और मैं व्यक्तिगत रूप से इसे Vue के लिए एक वास्तविक कदम के रूप में देखूंगा, अगर यह JSX का समर्थन करता है।

स्कॉट

@reohjs कल रात इवान की धारा में उन्होंने उल्लेख किया कि इसे एक प्लगइन के साथ बनाया जा सकता है, इसलिए मुझे लगता है कि एक बार यह बीटा में जाने के बाद किसी को इसे बनाने में लंबा समय नहीं लगेगा। मुझे खुशी है कि यह मूल में नहीं है लेकिन एक JSX प्लगइन एक महान विचार की तरह लगता है।

मुझे खुशी है कि यह मूल में नहीं है

👍 👍 👍 👍

हाँ एक प्लगइन होना चाहिए। हालाँकि, जैसा कि देखा गया है कि मानक घटकों के लिए टेम्पलेट्स के बहुत सारे लाभ हैं।

JSX संकलन इस प्लगइन के साथ हासिल करना आसान होना चाहिए: https://babeljs.io/docs/plugins/transform-react-jsx/

मुझे लगता है कि _h फ़ंक्शन React.createElement लिए प्रतिस्थापन होगा

2 तरह के फिल्टर को बदलने के तरीके के रूप में कस्टम वी-मॉडल संशोधक बनाने के लिए एक इंटरफ़ेस प्रदान करने के बारे में क्या? ऐसा लगता है कि वे पहले से ही उपयोगकर्ता इनपुट को पार्स करने के लिए उपयोग किए जा रहे हैं (उदाहरण के लिए v-model.trim )। यदि पार्सिंग/फ़ॉर्मेटिंग एक विशिष्ट डेटा प्रॉपर्टी से सरल और स्वतंत्र है, तो एक संशोधक का उपयोग करके पार्सिंग/फ़ॉर्मेटिंग को प्रत्येक व्यक्तिगत डेटा प्रॉपर्टी के लिए गणना की गई संपत्ति सेट करने या प्रत्येक के लिए एक नया घटक बनाने की तुलना में बहुत कम बॉयलरप्लेट के साथ पुन: उपयोग करने की अनुमति होगी। इनपुट प्रकार जहां हम पार्सिंग/स्वरूपण लागू करना चाहते हैं।

नमस्ते, मैं वर्तमान में Vue.js 1.0 gettext का समर्थन करने के लिए एक प्लगइन पर काम कर रहा हूं और मेरे पास एक निर्देश है जो vm.$interpolate का उपयोग कर रहा है।

मैं सोच रहा हूं कि मेरे कोड को 2.0 कैसे माइग्रेट किया जाए:

• vm.$interpolate पदावनत कर दिया जाएगा
• निर्देश अब 2.0 में उदाहरण नहीं होंगे

या क्या निर्देश से बेहतर तरीका है?

import languages from 'src/plugins/translate/languages'
import translateUtils from 'src/plugins/translate/utils'

const translateDirective = {
  terminal: true,
  params: ['translateN', 'translatePlural'],
  paramWatchers: {
    translateN: function () {
      this.translate()
    },
  },
  isPlural: function () {
    return 'translateN' in this.params && 'translatePlural' in this.params
  },
  bind: function () {
    this.boundTranslate = this.translate.bind(this)
    this.msgid = this.el.innerHTML.trim()
    this.translate()
    languages.eventEmitter.on(languages.languageChangedEventName, this.boundTranslate)
  },
  unbind: function () {
    languages.eventEmitter.removeListener(languages.languageChangedEventName, this.boundTranslate)
  },
  translate: function () {
    let n = this.isPlural() ? parseInt(this.params.translateN) : 1
    let translation = translateUtils.getTranslation(this.msgid, n)
    this.el.innerHTML = this.vm.$interpolate(translation)
  },
}

export default translateDirective

जब से मैं Vue में नया हूं, बस कुछ संक्षिप्त शब्दों को फेंक रहा हूं, बस यह कहने के लिए कि मैं सामान्य रूप से API की कमी या _under-the-hood_ हेल्पर्स को देखकर खुश हूं। जावास्क्रिप्ट वास्तव में पहले से ही शक्तिशाली है, और गणना की गई गुणों के साथ-साथ ढांचे की अन्य प्रतिक्रियाशील विशेषताओं के साथ लगभग सब कुछ हासिल किया जा सकता है।

इस _अगली_ रिलीज़ के लिए बधाई! मैं

@kemar मैं

{{ $translate('some.Key.path') }}

क्या सरणी सिंटैक्स के साथ संपत्ति पंजीकृत करने की क्षमता 2.0 से हटा दी गई है? अल्फा पर काम नहीं कर रहा, बस सोच रहा था कि यह जानबूझकर है या नहीं।
अर्थात:

components: [compA, compB, compC]

मुझे पता है कि ES6 में शॉर्टहैंड है जो समान दिखता है, लेकिन कुछ परिदृश्य ऐसे हैं जहां सरणी सिंटैक्स उपयोगी था।

मैं आप का उल्लेख देखने rendering to native interfaces on mobile के साथ weex और मैं सोच रहा था कितना आसान है Vue और बनाने के लिए किया जाएगा Nativescript बात।

Vue के लिए नेटिवस्क्रिप्ट की तर्ज पर कुछ और या तो Weex होगा, जिसका आपने उल्लेख किया है, या Quasar ।

स्कॉट

यदि अब dispatch या broadcast तो एक सामान्य चाइल्ड कंपोनेंट अपने माता-पिता को किसी घटना/परिवर्तन के बारे में कैसे सूचित करेगा? यह एक वैश्विक बस या vuex के पैटर्न के अनुकूल नहीं लगता। उपयोग के मामले में अब हम खोज फ़िल्टर के लिए एक श्रेणी स्लाइडर का उपयोग करते हैं। श्रेणी स्लाइडर घटक सामान्य है और कई अलग-अलग खोज फ़िल्टर का एक बच्चा है। वर्तमान में हम dispatch करते हैं जब एक रेंज स्लाइडर स्लाइडिंग समाप्त कर लेता है, तो पैरेंट परिवर्तन के आधार पर एक खोज को ट्रिगर करना जानता है।

@jrenton इनलाइन श्रोता <child @some-event="parentHandler">

बढ़िया काम दोस्तों।

मेरे विचार में, सभी परिवर्तन कहते हैं कि सबसे अच्छा तरीका है कि आप अपने घटक पेड़ को केवल "एक तरफ प्रवाह" के आधार पर बनाएं, जो कि डीबग करने और बनाए रखने में इतना आसान और आसान है।

इसके बिना, आपका डेटा सत्यता व्युत्क्रमानुपाती होगा कि आप सबसे शीर्ष घटक से कितनी दूर हैं।

बस इतना ही कहना चाहता हूँ:

render (h) {
    return (
    <div>
      {this.things.map(thing => <Thing thing={thing}></Thing>)}
   </div>
 );

मुझे खुश कर देता है

क्या 2.0 की रिलीज से पहले इस लिस्ट में और भी जुड़ जाने की उम्मीद है? बस जिज्ञासु होने के कारण यह मुद्दा अभी भी खुला है।

@zephraph हां, हम लगातार सूची को अपडेट कर रहे हैं क्योंकि हम एपीआई में अपडेट करते हैं। 😃 अब तक कुछ भी बड़ा नहीं है, लेकिन पिछले अल्फ़ाज़ से कभी-कभी टूटने वाले परिवर्तन।

मेरे पास एक मामला है, मैंने अतीत में ईवेंट प्रेषण का उपयोग किया था और जहां मैं vuex के साथ फंस गया हूं: मूल घटक में बाल घटकों की एक सूची होती है और जब बच्चा मूल्य बदल जाता है तो बच्चा एक ईवेंट भेज रहा था, इसलिए माता-पिता कुछ ऐसा करने में सक्षम थे उस परिवर्तन की प्रतिक्रिया।
अब मैंने vuex स्टोर में चाइल्ड वैल्यू की एक सरणी रखने की कोशिश की। बात यह है कि बाल घटक को गेटटर में कैसे पता चलता है, और क्रिया में, उस सरणी के किस तत्व को अद्यतन करने की आवश्यकता होती है। जहाँ तक मैं देखता हूँ, vuex किसी मूल्य के उत्परिवर्तन को गतिशील रूप से प्राप्त करने या ट्रिगर करने के लिए कार्यक्षमता प्रदान नहीं करता है, या क्या मैं इसके बारे में गलत हूँ?
घटना प्रेषण के बिना इस मामले को संभालने का सबसे अच्छा तरीका क्या होगा?

$broadcast को हटा दिए जाने के बाद, जब कोई खास चीज होती है तो आप सीधे बच्चे को कुछ करने के लिए कैसे कहेंगे? यह एक ऐसा परिदृश्य होगा जहां वास्तव में कोई डेटा नहीं बदला है, इसलिए प्रतिक्रियाशील प्रोप फिट नहीं लगते हैं।

मैं एक प्रोप का उपयोग कर सकता हूं और टाइमस्टैम्प या कुछ यादृच्छिक डेटा पास कर सकता हूं और उस प्रोप को बच्चे में देख सकता हूं लेकिन यह अजीब लगता है। एक वैश्विक ईवेंट बस को विशिष्ट आईडी बनाने की आवश्यकता होगी ताकि बच्चा केवल अपने माता-पिता की घटनाओं पर प्रतिक्रिया दे रहा हो, न कि मूल घटक के किसी अन्य उदाहरण पर।

एक बच्चे में $emit है जिसे माता-पिता इनलाइन श्रोता का उपयोग करके सुन सकते हैं, क्या दूसरी तरफ कुछ भी है?

मैं एक प्रोप के माध्यम से एक एमिटर का एक उदाहरण पास कर सकता हूं, फिर बच्चे में emmiter.on , क्या यह भयानक लगता है?

@gwildu कार्रवाइयां तर्क ले सकती हैं, ताकि आप कार्रवाई के साथ आइटम आईडी पास कर सकें। और आइटम कंपोनेंट को स्टोर से संबंधित आइटम लाने के बजाय, पैरेंट में सूची प्राप्त करें, और आइटम डेटा को प्रोप के साथ आइटम कंपोनेंट में पास करें।

// Vuex store
state: {
  items: [],
},
mutations: {
  ITEM_REMOVED: function(state, id) {
    var io = state.items.findIndex(item => item.id === id);
    state.items.splice(io, 1);
  },
},

// within the parent component
vuex: {
  getters: {
    items: state => state.items,
  },
  actions: {
    removeItem(store, id) {
      store.dispatch('ITEM_REMOVED', id);
    },
  },
},

<!-- within the parent template -->
<item v-for="item in item"
  :item-data="item.data"
  @removed="removeItem(item.id)"
>
</item>

<!-- within the child template -->
<button @click="$emit('removed')">Remove</button>

यदि आपके आइटम में स्थानीय रूप से अद्वितीय आईडी नहीं है, तो आप एपीआई से आइटम बनाते या प्राप्त करते समय एक आईडी उत्पन्न कर सकते हैं। ज्यादातर समय cuid उसके लिए काफी अच्छा होता है।

@fergaldoyle माता-पिता को हमेशा अपने बच्चों को जानने के कारण, आप बच्चे के वीएम का संदर्भ प्राप्त करने के लिए बच्चे पर v-ref:some-child डाल सकते हैं, और फिर उस पर $emit , या सीधे एक विधि को कॉल कर सकते हैं this.$refs.someChild.<methodName>(...) ।

हालांकि मैं उस मामले में वास्तुकला पर पुनर्विचार करने की सलाह दूंगा, क्योंकि नीचे बहने वाली घटनाएं घटक को तर्क के लिए वास्तव में कठिन बनाती हैं।

मैं vuejs 2 के साथ खेल रहा था और यदि आप पास होते हैं तो मैंने Snabbdom पर ध्यान दिया

h('div', {style: {color: '#000'}}, [
  h('h1', 'Headline'),
  h('p', 'A paragraph'),
]);

रेंडर फ़ंक्शन के लिए आपको मिलता है

<div style="color:#000;"><h1>Headline</h1><p>A paragraph</p></div>

लेकिन vuejs में आपको मिलता है

<div style="color:#000;"><h1></h1><p></p></div>

क्या टेक्स्ट सामग्री को संशोधित करने का कोई तरीका है ( <h1> अंदर)?

@dubcanada क्यों न सिर्फ उन्हें बच्चों के रूप में पास किया जाए?

ठीक है कि समझ में आएगा। धन्यवाद

नमस्ते। मेरे पास Vue 2.0 में ट्रांज़िशन सिस्टम के बारे में कुछ प्रश्न हैं या इसके बजाय एक प्रस्ताव है क्योंकि मुझे यह Vue 2.0 की योजनाओं में नहीं दिख रहा है। Vue 1.0 में मुझे अक्सर यह पता लगाने की आवश्यकता का सामना करना पड़ा कि मेरे द्वारा स्थापित कुछ संक्रमण/एनीमेशन कब समाप्त होगा। अब मैं इसे सेटटाइमआउट का उपयोग करके करता हूं, लेकिन यह बहुत हैकी और बदसूरत तरीका है, हम सभी सहमत हो सकते हैं। तो मेरा सवाल है, जब हम वी-शो/वी-इफ के साथ संयुक्त संक्रमण का उपयोग करते हैं, तो संभवतः घटना के माध्यम से सीएसएस संक्रमण के अंत का पता लगाने के लिए वीयू 2.0 में कोई रास्ता होगा?

<my-comp v-show="isVisible" @transition-end="onTransitionEnd" transition></my-comp>

मुझे अगली Vue रिलीज़ में ऐसा कुछ देखकर बहुत खुशी होगी :) मुझे सुनने के लिए धन्यवाद

@sqal आप संक्रमण हुक के साथ ऐसा कर सकते हैं: https://jsfiddle.net/simplesmiler/Lrk9sxjf/97/

@dubcanada इसे अगली रिलीज में समर्थित किया जाएगा (तत्व बनाते समय डेटा छोड़ना)

धन्यवाद @fergaldoyle और @simplesmiler उत्सर्जित करने के आपके संकेत के लिए।

मुझे पता नहीं था, माता-पिता बच्चे द्वारा उत्सर्जित घटनाओं को सुनने में सक्षम हैं। निश्चित रूप से उस गैर-बुदबुदाने वाली घटना को सुनने के लिए और अधिक समझ में आता है।

नमस्ते। थोड़ी सी पृष्ठभूमि: हम वेबग्ल के साथ काम कर रहे हैं और मैं 3डी सतह पर कुछ इंटरफेस करना चाहता हूं। इसका मतलब है कि हमें एक इंटरफ़ेस प्रस्तुत करना होगा, उदाहरण के लिए एक कैनवास और फिर कैनवास की सामग्री को एक बनावट में परिवर्तित करना होगा।

मैं एंगुलर, रिएक्ट और वीयू के साथ काम कर रहा हूं और मेरे लिए वू सबसे ज्यादा मायने रखता है! रिएक्ट के बारे में पढ़ते हुए मुझे रिएक्ट-कैनवास प्रोजेक्ट मिला। दिलचस्प बात यह है कि वर्चुअल डोम को वास्तविक डोम नोड्स में बदलने के बजाय, वे इसे कैनवास पर खींचते हैं।

क्योंकि Vue 2.0 भी वर्चुअल डोम का उपयोग कर रहा है, मैं सोच रहा था कि क्या ऐसा कुछ भी किया जा सकता है?

नमस्ते,

.sync को हटाने के बारे में बस कुछ स्पष्टीकरण और एक सामान्य घटक पर प्रोप को संभालने के लिए एक सामान्य वर्कफ़्लो कैसा दिख सकता है।

तो, से जा रहे हैं
<component :value.sync="some.value"></component>
प्रति
<component :value="some.value" @update="updateSomeValue"></component>

प्रोप value को ट्रैक करने का अनुशंसित तरीका क्या है?
सबसे बुनियादी मामले में, ऐसा लगता है

props: ['value'],
computed: {
    _value: {
        get(){
            return this.value;
        },
        set(newVal) {
            this.$emit('update', newVal);
            return newVal;
        }
    }
}

लेकिन, निश्चित रूप से यह मूल घटक पर निर्भर करता है जो उस मूल्य को प्रोप पर लौटाता है, इसलिए जब घटक इसे फिर से प्राप्त करता है, तो यह सबसे हालिया परिवर्तन को दर्शाता है ...

क्या इसका मतलब है कि अब हमें ऐसा कुछ करने की ज़रूरत है:

props: ['value'],
data() {
    return {
        _val: this.value
    }
},
watch: {
    value(newVal) {
        this._val = newVal;
    }
},
computed: {
    _value: {
        get(){
            return this._val;
        },
        set(newVal) {
            this._val = newVal
            this.$emit('update', newVal);
        }
    }
}

ऐसा लगता है कि मूल्य के गुजरने (और बदलने) को संभालने के लिए बहुत सारे बॉयलरप्लेट की तरह लगता है, माता-पिता को सूचित करता है कि मूल्य बदल गया है, और आंतरिक रूप से परिवर्तन को ट्रैक कर रहा है, अगर परिवर्तन माता-पिता द्वारा वापस प्रचारित नहीं किया जाता है।

या मैं यहाँ जादू की प्रतिक्रिया का थोड़ा सा याद कर रहा हूँ?

इसके अलावा, एक मौका है कि अगर संभालने के लिए बहुत सारे प्रॉप्स हैं, तो यह काफी जटिल हो सकता है।
मैं लगभग खुद को एक रैपर-घटक पर काम करते हुए देख सकता था, जहां बच्चे सीधे उत्परिवर्तित करने के लिए this.$parent.value का उपयोग करते हैं, और रैपर-घटक केवल प्रॉप्स/गणना/घड़ियों को संभालते हैं

@Towerful "मूल्य को ट्रैक करने" से this.$emit('value-updated', newValue) बजाय सेटर शैली ( this._value = newValue ) क्यों चाहते हैं?

वन-वे फ्लो की शक्ति यह है कि माता-पिता बच्चे द्वारा अनुरोधित परिवर्तन को लागू नहीं करने का निर्णय ले सकते हैं, या बच्चे को "होल्ड पर" के रूप में चिह्नित कर सकते हैं और बाद में परिवर्तन लागू कर सकते हैं (उदाहरण के लिए सर्वर से वापस जाँच करने के बाद)।

@simplesmiler एक गणना की गई संपत्ति का उपयोग करके आप इसे टेम्पलेट में बाँध सकते हैं, नहीं? तो आप v-model उपयोग कर सकते हैं।
और 1 स्थान पर सेटर और गेटर होने से मूल्य के अपडेट होने पर कार्यक्षमता को देखना और देखना आसान हो जाता है, क्योंकि मूल्य तक पहुंचने और घटक के भीतर मूल्य को बदलने के विभिन्न तरीकों के विपरीत, और पूरे कोड में बिखरा हुआ है।
यदि मॉडल के भीतर स्पष्ट तरीके का उपयोग कर रहे हैं, और सेटर्स का उपयोग नहीं कर रहे हैं, तो ऐसा लगता है कि वास्तविक तरीकों के विपरीत methods ऑब्जेक्ट को updateValue टेम्पलेट के लिए टाइप विधियों के साथ अव्यवस्थित किया जा रहा है।

मुझे लगता है कि यह लागू होता है जहां उपयोगकर्ता किसी घटक में एक विकल्प का चयन करता है, और घटक उस मान पर निर्भर करता है कि क्या चुना गया है।
ऐसा करने में सक्षम होने के लिए आप उस घटक में वापस जाने वाले मूल घटक पर भरोसा कर रहे हैं।
जब तक, जब उपयोगकर्ता कोई विकल्प चुनता है, तो आप घटक प्रदर्शन अपडेट को मैन्युअल रूप से ट्रिगर करते हैं। जो कि Vue की प्रतिक्रियाशीलता से दूर होता दिख रहा है।
तो एक आंतरिक मूल्य ट्रैक होने पर यह 'होना चाहिए', क्या टेम्पलेट उस पर प्रतिक्रिया करता है। आंतरिक परिवर्तनों को ट्रैक करने और बाहरी घटनाओं को बढ़ाने के लिए संपत्ति को लपेटने के लिए सेटर्स/गेटर्स का उपयोग करें, और आंतरिक मूल्य को अद्यतन करने के लिए संपत्ति पर एक घड़ी जब इसे बाहरी रूप से बदला जाता है।

शायद मैं इसे करने के नए तरीके से अपना सिर पाने के लिए संघर्ष कर रहा हूं।

@ टावरफुल - आप

स्कॉट

@ शक्तिशाली :

मेरे लिए ऐसा लगता है कि आप जो वर्णन करते हैं वह अनिवार्य रूप से घटक हैं जो v-model साथ इनपुट की तरह कार्य करते हैं: उपयोगकर्ता यूआई में कुछ मूल्य बदलता है, और आप चाहते हैं कि परिवर्तन तुरंत बाध्य डेटा में दिखाई दे।

इस प्रकार के घटकों के लिए, आप 2.0 में कॉमोनेंट्स पर v-model उपयोग कर सकते हैं:

<my-input v-model="myValue">

// in my-input.vue
<input :value="value" @change="$emit('input', $event.target.value)">

export default {
  props: ['value']  //special prop received from v-model
}

यह इंटरफ़ेस को वास्तविक <input> तत्वों और कस्टम इनपुट घटकों को अनिवार्य रूप से समान बनाता है, और दो-तरफा बाध्यकारी बनाता है।

अधिक जटिल घटकों के लिए जो कई प्रॉप्स प्राप्त करते हैं (और सरल कस्टम इनपुट नहीं हैं, लेकिन अधिक सार हैं), हम .sync का उपयोग करने से हतोत्साहित करते हैं क्योंकि अधिकांश स्थितियों में तर्क करना कठिन हो जाता है।

माता-पिता को यह तय करना चाहिए कि बच्चे से प्राप्त होने वाले मूल्य के साथ क्या करना है, इसका डेटा अंतर्निहित रूप से .sync तरह नहीं बदला जाना चाहिए।

क्या आप एक उदाहरण प्रदान कर सकते हैं जो _not_ solvabel है जो ऊपर दिए गए वी-मॉडल दृष्टिकोण के साथ है और अभी भी .sync का उपयोग करने से लाभान्वित है? यह अमूर्त सिद्धांत की तुलना में चर्चा के लिए बेहतर आधार हो सकता है।

ओह, मुझे यह कैसे याद आया?! यह निश्चित रूप से ओपी में है, और इस बारे में कुछ टिप्पणियों के बारे में भी चर्चा है! अब मैं थोड़ा मूर्ख महसूस करता हूँ।
क्या मूल पोस्ट को थोड़ा और स्पष्ट करने के लिए अपडेट किया जा सकता है कि एक घटक पर v-model का उपयोग किया जा सकता है?
@LinusBorg मेरे सिर के ऊपर से, मैं ऐसे मामले के बारे में नहीं सोच सकता जहां एक घटक पर v-model काम नहीं करेगा। मुझे मूल पोस्ट में वह हिस्सा याद आया।
जटिल वस्तु घटकों के लिए भी, यह केवल नेस्टिंग घटकों की बात होगी। और यह एकल जिम्मेदारी घटकों को फिर से लागू करता है।
यह बहुत अधिक समझ में आता है :)

@ टावरफुल

पुन: v-model का उपयोग करके। बात यह है कि, v-model सिंक्रोनस (एक तरह से) है, जबकि क्रॉस-कंपोनेंट डेटा फ्लो वॉचर क्यू ( डेमो ) के कारण स्वाभाविक रूप से एसिंक्रोनस है। मैंने इसे बहुत से लोगों को भ्रमित करते देखा है। वन-वे फ्लो सिर्फ यह और अधिक स्पष्ट करता है कि प्रॉप्स सिंक्रोनस नहीं हैं और आपको उन पर सिंक्रोनस होने पर भरोसा नहीं करने के लिए मजबूर करता है (यह वही है जो आप अपने तरीके से छल करने की कोशिश कर रहे हैं)।

पुन: बरबाद तरीके। साधारण मामलों के लिए आप हमेशा @value-updated="value = $arguments[0]" । जटिल मामलों के लिए यह एक अच्छी बात है कि एक विधि है, जहां आप इसे लगातार बनाए रखने के लिए राज्य को समायोजित कर सकते हैं (उदाहरण के लिए मैन्युअल रूप से अपडेट ट्रिगर करें)। अगले बिंदु पर सेगवे।

पुनश्च: प्रतिक्रियाशीलता से दूर जा रहा है। मैं इस बयान से सहमत नहीं हूं। साधारण मामलों के लिए आपको value-updated="value = $arguments[0]" द्वारा अपडेट किए गए बच्चे को मूल्य लेने के लिए जादू की आवश्यकता नहीं है।

जटिल मामलों के लिए, .sync प्रोप के साथ आपको watch का उपयोग करना होगा, लेकिन स्पष्ट watch वास्तव में प्रतिक्रियाशीलता का हिस्सा नहीं है। यह एक एस्केप हैच है, जहां आप अपने मैन्युअल अपडेट को ट्रिगर करते हैं जिन्हें गणना के रूप में व्यक्त नहीं किया जा सकता है। और यह अच्छा नहीं है, क्योंकि यह तुल्यकालिक रूप से परिवर्तनों पर प्रतिक्रिया नहीं कर सकता है, जैसे कंप्यूटेड कैन। यही कारण है कि watch भारी उपयोग करते समय, आप अपने डेटा अपडेट को प्रचारित करने के लिए कुछ "टिक" लेते हुए पा सकते हैं। यदि आपने कभी सीधे नेस्टेड nextTick पर ठोकर खाई है, तो आप जानते हैं कि मैं किस बारे में बात कर रहा हूं।

अब, -updated हैंडलर एक बेहतर एस्केप हैच प्रदान करता है, जिससे बच्चे के इरादे को व्यक्त करने के बाद जटिल मॉडल परिवर्तनों को समकालिक रूप से (या एक साथ अतुल्यकालिक रूप से) लागू किया जा सकता है, यह सुनिश्चित करते हुए कि बच्चे को अगले टिक में अद्यतन मान प्राप्त होंगे (या नहीं असंगत स्थिति प्राप्त करें)।

@ yyx990803 क्या हम $emits को सुनने के लिए एक तरीका लागू कर सकते हैं, ठीक उसी तरह जैसे हमने vuejs1 में $dispatch और $broadcast की घटनाओं का आयोजन किया था?

अधिक vuejs-esque लगता है, इस की तर्ज पर कुछ (एक 'चालू' या 'सुनो'):

Vue.component('cart', {
  template: "#cart-template",
  data () {
    return {quantity : 0 }
  },
  watch: {
    'quantity': function (quantity, oldQuantity) {
      console.log('quantity changed from %s to %s', oldQuantity, quantity)

      bus.$emit('cart.quantity-changed', quantity)
    }
  }
});

new Vue({
  el: '.container',
  data : function () {
    return {
      quantity: 0
    };
  },
  on: {
    'cart.quantity-changed': function (newQuantity) {
      console.log('quantity change emitted');

      Vue.set(self, 'quantity', newQuantity);
    }
  },
  computed:{
    gold: function(){
      return this.quantity * 100
    }
  }
})

यह मूल रूप से स्वचालित रूप से वैश्विक बस से जुड़ जाएगा।

इवेंट बस एक पैटर्न नहीं है जिसे हम प्रोत्साहित करना चाहते हैं - यह केवल कुछ किनारे के मामलों में उपयोगी है। आम तौर पर, एक स्टोर पैटर्न, जैसे कि vuex, को प्राथमिकता दी जाती है।

एक एपीआई को लागू करना जो एक बस का उपयोग करना आसान बनाता है और "आधिकारिक तौर पर समर्थित" महसूस करता है, गलत संकेत होगा।

आपके उदाहरण को देखते हुए, यदि आपने मात्रा को दोनों घटकों द्वारा एक्सेस किए गए स्टोर में संग्रहीत किया है, तो कोई भी ईवेंट आवश्यक नहीं होगा। container घटक में गणना की गई संपत्ति स्वचालित रूप से अपडेट हो जाएगी।

vuex जैसे वास्तविक स्टोर समाधान का उपयोग किए बिना सरल उदाहरण कोड:

var store = {
  cart: {
    quantity: 0
  }
}
Vue.component('cart', {
  template: "#cart-template",
  data () {
    return store.cart
  },
});

new Vue({
  el: '.container',
  data : function () {
    return store.cart;
  },
  computed:{
    gold: function(){
      return this.quantity * 100
    }
  }
})

मैं कहूंगा कि vue2 का सामान्य विचार खुद को शूट करना कठिन बनाना है
पैर में।

सूर्य पर, 3 जुलाई, 2016 पूर्वाह्न 11:24 बजे, थोरस्टन लुनबोर्ग नोटिफिकेशन @github.com
लिखा था:

इवेंट बसें एक पैटर्न नहीं है जिसे हम प्रोत्साहित करना चाहते हैं - यह केवल है
उपयोगी कुछ किनारे के मामले। आम तौर पर, एक स्टोर पैटर्न, जैसे कि vuex, को प्राथमिकता दी जाती है।

एक एपीआई लागू करना जो बस का उपयोग करना आसान बनाता है और "आधिकारिक तौर पर" महसूस करता है
समर्थित" गलत संकेत होगा।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/vuejs/vue/issues/2873#issuecomment -230158828, या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe/AACoukCpCgYlDbVej_w_h4NEhQ-imYHBks5qR9QwgaJpZM4IedHC
.

@karysharpe $emit s को बच्चे के उदाहरण पर v-on साथ सुनने का इरादा है। इसका मूल संदर्भ में टैप करने में सक्षम होने का एक अतिरिक्त लाभ भी है जहां उदाहरण का उपयोग किया जाता है:

<list-item v-for="(item, index) in items"
  :title="item.title"
  @remove="items.splice(index, 1)"
>
</list-item>

क्या 2.0 रिलीज की कोई तारीख है? मैं बदलावों को लेकर काफी उत्साहित हूं। बधाई!
मैं Vue 2.0 + Redux का उपयोग करने के बारे में सोच रहा हूँ।

@Sendoushi अंतिम रिलीज़ पर अभी कोई तारीख नहीं है, लेकिन बीटा एक सप्ताह के भीतर हो सकता है। Vuex 2.0 को भी साथ में विकसित किया जा रहा है और इसमें न केवल वर्तमान vuex की तुलना में बहुत सरल API की सुविधा होगी, बल्कि Redux की तुलना में Vue पारिस्थितिकी तंत्र में भी अधिक अच्छी तरह से एकीकृत होगा।

Vuex 2.0 को भी साथ में विकसित किया जा रहा है और इसमें न केवल वर्तमान vuex की तुलना में बहुत सरल API की सुविधा होगी, बल्कि Redux की तुलना में Vue पारिस्थितिकी तंत्र में भी अधिक अच्छी तरह से एकीकृत होगा।

@chrisvfritz यह सुनकर बहुत अच्छा लगा! मैंने हमेशा महसूस किया कि वर्तमान एपीआई थोड़ा अधिक और अनावश्यक रूप से जटिल है। क्षतिपूर्ति करने के लिए इस तरह की चीजें करना समाप्त हो गया:

const mutations = {
  LOGIN (state) { state.loggedIn = true },
  LOGOUT (state) { state.loggedIn = false }
}

export const types = Object.keys(mutations)

// For now we dynamically generate all the actions like this.
// It's rare when anything more complicated is needed, but there
// is an example here:
// http://vuex.vuejs.org/en/actions.html
export const actions = types.reduce((o, el) => {
  var action = S(el.toLowerCase()).camelize().s
  o[action] = ({dispatch}, ...args) => dispatch(el, ...args)
  return o
}, {})

Vue 2 और vuex 2 के रोडमैप के बारे में क्या है। क्या उन्हें एक साथ या एक से पहले जारी करने की योजना है और विभिन्न संस्करणों की संगतताओं के बारे में क्या?

उपरोक्त प्रश्न से संबंधित, vue-router के साथ क्या स्थिति है - क्या इसे जल्द ही Vue 2 का समर्थन मिलने वाला है या राउटर के बिना Vue 2 परीक्षण करने की आवश्यकता होगी?

@gwildu उन्हें कुछ हद तक एक साथ रिलीज़ किया जाएगा और Vuex 2.0 केवल Vue 2.0 का समर्थन करेगा। प्री 2.0 Vuex तब भी समर्थन प्राप्त करेगा जब तक कि Vue 1.x अब समर्थित नहीं है।

Vue 2.0 की रिलीज से पहले @Uninen Vue राउटर को आगे कुछ प्यार मिलेगा।

एनएफओ @chrisvfritz के लिए धन्यवाद :)

@chrisvfritz @Uninen सुधार: Vuex 2.0 भी Vue 1.x के लिए काम करता है।

vue-router का अगला प्रमुख संस्करण केवल Vue 2.x का समर्थन करेगा।

रनटाइम ओनली बिल्ड: चूंकि इसमें कंपाइलर शामिल नहीं है, इसलिए आपको कंपाइल स्टेप में या तो प्री-कंपाइल किए गए टेम्प्लेट की जरूरत है, या मैन्युअल रूप से रेंडर फंक्शन लिखे।

क्या vueify/vue-loader और .vue फ़ाइलों का उपयोग किए बिना टेम्पलेट्स को प्रीकंपाइल करने का कोई तरीका होगा? यदि नहीं, तो क्या घटकों में template: गुणों को render कार्यों में बदलने के लिए एक बैबेल प्लगइन रखना एक अच्छा विचार होगा?

2.0 में अपग्रेड करने के बाद, क्या बहिष्कृत सुविधाओं का अभी भी उपयोग किया जा सकता है। क्या आप पहले 2.0 में अपग्रेड कर सकते हैं, और फिर धीरे-धीरे बहिष्कृत सुविधाओं को बदल सकते हैं?

क्या टर्मिनल घटक बनाना संभव होगा, अब वह तत्व निर्देशक चला गया है?

उल्लेखानुसार:

वी-मॉडल अब प्रारंभिक इनलाइन मान की परवाह नहीं करता है। यह हमेशा Vue इंस्टेंस डेटा को सत्य के स्रोत के रूप में मानेगा।

उस पर विचार करें

<child-component>
  <input type="checkbox" :id="_uid" v-model="childModel" :value="value" />
  <label :for="_uid"><slot></slot></label>
</child-component>

मैं कस्टम घटकों के बीच सरणी के साथ चेकबॉक्स से कैसे निपट सकता हूं?

_अपडेट किया गया 1:_
हल किया। पैरेंट कंपोनेंट में चाइल्ड कंपोनेंट में प्रोप type="checkbox" ट्रांसफर करें।

<parent-component>
  <child-component type="checkbox" v-model="parentModel" value="apple"  />
  <child-component type="checkbox" v-model="parentModel" value="orange" />
  <child-component type="checkbox" v-model="parentModel" value="banana" />
</parent-component>

फिर आप {props: [ 'value' ]} माध्यम से इनलाइन मान प्राप्त कर सकते हैं।
मान बदल गया है यह बताने के लिए मूल घटक को change ईवेंट भेजें।

<child-component>
  <input type="checkbox" :id="_uid" v-model="childModel" :value="value"
    @change="$emit('change', $event)"
  />
  <label :for="_uid"><slot></slot></label>
</child-component>

ऐसा इसलिए है क्योंकि कंपाइलर v-model निर्देश को उसके type अनुसार संकलित करता है। और संकलक होगा उत्पन्न checked प्रोप और बाँध एक change यह करने के लिए घटना।

_अपडेट किया गया 2:_
हालांकि, updated जीवन चक्र हुक v-model कारण ट्रिगर नहीं होता है, सीधे checked विशेषता को बदल देता है (इसका मतलब है कि आपको change ईवेंट नहीं मिल सकता है v-model के मान को संशोधित करके मूल HTML चेकबॉक्स घटक का)।
तो, @yyx990803 , क्या आप v-model परिवर्तनों के बाद change ईवेंट ट्रिगर कर सकते हैं?

@ युनसुन-सीएन एकमात्र तरीका है कि मैं आपकी समस्या को हल करने में सक्षम था, मूल्य, एला वैल के लिए विशिष्ट संपत्ति जोड़ना था, और वास्तविक मूल्य निर्धारित करने के लिए इसका उपयोग करना था, और फिर वी-मॉडल 'इनपुट में परिवर्तन उत्सर्जित करना था ' प्रतिस्पर्धा।

@johnleider मैंने अनुकरण करने के लिए एक कस्टम निर्देश लिखा है कि v-model क्या करता है।
वैसे, आपको सख्त तरीके से मॉडल तैयार करना चाहिए न केवल type प्रोप की जांच करना बल्कि तत्व के टैगनाम की जांच करना। अन्यथा, type प्रोप के साथ एक अन्य कस्टम घटक अपने डिफ़ॉल्ट मॉडल व्यवहार को अधिलेखित कर सकता है।

नमस्ते। क्या हम रिलीज की तारीख जानते हैं?

@thanosalexander हमने अभी तक कोई तारीख तय नहीं की है, नहीं। हमने अभी 2.0.0-bet.2 के साथ ट्रांज़िशन सिस्टम में कुछ बड़े ब्रेकिंग बदलाव पेश किए हैं, जिनका पूरी तरह से परीक्षण किया जाना है। इसलिए मेरी राय में, जब तक हम रिलीज के बारे में नहीं सोच सकते, तब तक इसमें कुछ हफ़्ते लगेंगे।

ठीक है..मैं इसके साथ जाऊंगा ..मुझे नहीं लगता कि अस्तबल की ओर कदम बहुत बड़ा होगा! धन्यवाद

डॉक्स के बारे में क्या? Vue को जल्दी अपनाने का एक कारण दस्तावेज़ीकरण था और यही एकमात्र कारण है जो मुझे अब v2 के साथ वापस पकड़ रहा है। मैंने डॉक्स का अनुसरण करते हुए समस्या देखी, लेकिन जल्द ही समाप्त होने के करीब नहीं दिख रहा है। शायद मैं हुड के नीचे चल रहा इतना अनदेखा कर रहा हूं, सवाल क्यों बढ़ रहा है :)

2.0 में घटक स्विचिंग के बाहर संक्रमण-मोड को लागू करने की कोई योजना है?
https://github.com/vuejs/Discussion/issues/156

@ miljan-aleksic Docs 2.0 के आधिकारिक रूप से जारी होने पर तैयार हो जाएगा। हम अभी भी बीटा में हैं। ;)

तब तक, आप यहां दस्तावेज़ीकरण की प्रगति का अनुसरण कर सकते

@aristidesfl पहले ही कर चुका है। मैं

@ miljan-aleksic @LinusBorg ने जो उल्लेख किया है, उसे स्रोत भी बीटा.2 में परिवर्तनों को दर्शाने के लिए पूरी तरह से अपडेट नहीं किया गया है, महत्वपूर्ण सहकर्मी समीक्षा अभी बाकी है, और कुछ अन्य छोटे एपीआई परिवर्तन हैं

हम इस बात से भी सहमत हैं कि उत्कृष्ट दस्तावेज़ीकरण Vue का एक महत्वपूर्ण हिस्सा है। यहां तक ​​कि रिएक्ट टीम के डैन अब्रामोव भी हमारे डॉक्स को पसंद करते हैं। 😄 इसलिए यह मेरे व्यक्तिगत लक्ष्यों में से एक है कि 2.0 दस्तावेज़ _और भी बेहतर_ हैं। हालांकि इस बीच...

जो कोई भी 2.0 के बारे में जल्दी सीखना चाहता है, उसके लिए मैं फीचर यूनिट परीक्षणों को सबसे अद्यतित संसाधन के रूप में उपलब्ध कराने की अनुशंसा करता हूं।

यह प्रलेखन लेखन में मेरे प्राथमिक संसाधनों में से एक है और यदि आप जैस्मीन से परिचित हैं तो वे आम तौर पर काफी पठनीय हैं।

धन्यवाद @chrisvfritz , बहुत उपयोगी जानकारी। मैं नए दस्तावेज़ों को एक शॉट दूंगा, इसे एक WIP और आवश्यकतानुसार प्रतिक्रिया को ध्यान में रखते हुए। Vue 2.0 के बारे में गंभीर होने का समय आ गया है;)

createElement का उपयोग करके रेंडर फ़ंक्शन में सरणी को संभालने के लिए प्रतीत नहीं होता है (जैसे snabbdom करता है) क्या कॉल किए गए कार्यों में डेटा पास करने का कोई तरीका है?

उदाहरण के लिए snabbdom में मैं उपयोग कर सकता हूँ

{on:{click: [function, dataToPass]}}

और function को पहले तर्क के रूप में dataToPass मिलेगा। लेकिन ऐसा लगता है कि vuejs 2 बीटा 2 Uncaught TypeError: arr[i] is not a function में त्रुटि हुई है। क्या तत्व बनाने से चालू का उपयोग करके डेटा और ईवेंट पास करने का कोई तरीका है?

@dubcanada Vue 2.0 में ईवेंट हैंडलिंग snabbdom से अलग है - आपको फ़ंक्शन को स्वयं करना होगा। सरणी सिंटैक्स बस एक ही ईवेंट में एकाधिक हैंडलर संलग्न करता है।

मैं स्लॉट सामग्री को प्रतिपादित करने के बजाय स्ट्रिंग के रूप में प्राप्त करने का प्रयास कर रहा हूं। मानक नोड्स के साथ एक आसान समाधान है, लेकिन Vnodes के साथ मुझे कोई रास्ता नहीं मिला। क्या इसका कोई उपाय है?

@ miljan-aleksic इसे प्रस्तुत करने का प्रयास करें, तत्व की सामग्री को innerHTML , फिर तत्व को display: none साथ सीएसएस में छुपाएं।

सहायता के लिए धन्यवाद। अगर मैं इसे प्रस्तुत करता हूं, तो अंतिम आउटपुट अलग होगा। मैं एक घटक बना रहा हूं जो अपनी बाल सामग्री को pre टैग से लपेटेगा और HTML को एन्कोड करेगा।

उस स्थिति में, आउटपुट को मूल से भिन्न तत्व में प्रस्तुत करें।

हालांकि मैं यह कहना चाहूंगा कि टेम्प्लेटिंग आपकी सामग्री लिखने का आपका तरीका नहीं होना चाहिए। यह वर्णन करने का तरीका होना चाहिए कि _how_ सामग्री लिखी गई है, न कि सामग्री स्वयं। मैं पाठ को जेएस में एक स्ट्रिंग के रूप में संग्रहीत करने की अनुशंसा करता हूं (या आपकी परियोजना में कहीं और संसाधन के रूप में, _विशेष रूप से_ यदि यह किसी प्रकार का उपयोगकर्ता इनपुट है), फिर इसे बच्चे में एक प्रोप के रूप में पास करना, जो चीजों को एक हजार बार बनाना चाहिए वैसे भी आसान।

आप सही कह रहे हैं

v-on निर्देश का उपयोग करते समय $arguments चर अब उपलब्ध नहीं है। मुझे यहां उस बदलाव का कोई संदर्भ नहीं दिख रहा है। एक बग या लापता संदर्भ है?

@ मिलजन-एलेक्सिक बस arguments ।

एक PHP देव होना चाहिए (मेरे जैसा) ... मुझे पता है कि आप कैसा महसूस करते हैं। ज़ोर - ज़ोर से हंसना!

स्कॉट

@ yyx990803 , @smolinari मैं हूँ ... और अब एक शर्मिंदा हूँ हाहा। मैंने अपने आप को विश्वास दिलाया कि मैंने पहले ही यह कोशिश कर ली है... ऐसा लगता है कि मैं पर्याप्त रूप से ठीक नहीं था। यह काम कर रहा है, धन्यवाद और अपना समय बर्बाद करने के लिए खेद है।

मैं एक और "मुद्दे" के बारे में एक टिकट खोलने वाला था, लेकिन अब यह सुनिश्चित नहीं है कि यह है ... ref करते समय पंजीकृत घटक या तत्व तुरंत उपलब्ध नहीं होता है, इसलिए ऐसा कुछ काम नहीं करेगा।

<button ref="button"...></button>
<foo :connect="$refs.button"></foo>

जिस समय फू को $refs.button प्रदान किया जा रहा है, वह अभी भी अपरिभाषित है। Vue 1 में अपेक्षा के अनुरूप काम कर रहा है। इस बार मुझे क्या याद आ रहा है?

आप याद कर रहे हैं कि आपको डीओएम तत्वों या घटक उदाहरणों को प्रोप के रूप में पास नहीं करना चाहिए ...

यह एक बुरा विचार क्यों है? मान लें कि मेरे पास एक ड्रॉपडाउन घटक है जिसे मैं एक बटन (ट्रिगर) से कनेक्ट करना चाहता हूं। दोनों स्वतंत्र घटक हैं और उन्हें एक प्रश्न के माध्यम से जोड़ने के बजाय मैं सीधे संदर्भ पास कर रहा हूं।

@ miljan-aleksic उन्हें राज्य के माध्यम से जोड़ना और भी बेहतर है:

• उनके सामान्य माता-पिता में खुला/बंद राज्य बनाए रखा जाता है
• माता-पिता राज्य को एक प्रोप के रूप में ड्रॉपडाउन में पास करते हैं
• माता-पिता राज्य को चालू करने के लिए बटन की घटना को सुनता है

इस तरह ड्रॉपडाउन और बटन पूरी तरह से अलग हो जाते हैं, अन्य प्रकार के घटकों को नियंत्रित करने के लिए बटन का पुन: उपयोग किया जा सकता है, और ड्रॉपडाउन को अन्य प्रकार के इनपुट घटकों द्वारा नियंत्रित किया जा सकता है।

पुरानी आदतों से छुटकारा पाना आसान नहीं है। क्या मुझे jQuery या मुख्य रूप से मुझे दोष देना चाहिए? :डी

आपका दृष्टिकोण, इवान, सही है। मैं उस रास्ते पर जाऊंगा, भले ही इसका मतलब है कि ड्रॉपडाउन एकीकरण अधिक कठिन होगा। जैसा कि मूल घटक को विभिन्न घटनाओं को सुनने के बारे में जानना होगा, न केवल खोलने के बारे में बल्कि ड्रॉपडाउन को बंद करने के बारे में जब बाहर क्लिक किया जाता है, लेकिन ड्रॉपडाउन इसे स्वयं नहीं करता है, आदि। कई घटनाएं और कामकाज जो ड्रॉपडाउन हल कर रहे थे।

जैसा कि मूल घटक को विभिन्न घटनाओं को सुनने के बारे में जानना होगा, न केवल खोलने के बारे में बल्कि ड्रॉपडाउन को बंद करने के बारे में जब बाहर क्लिक किया जाता है, लेकिन ड्रॉपडाउन इसे स्वयं नहीं करता है, आदि। कई घटनाएं और कामकाज जो ड्रॉपडाउन हल कर रहे थे।

यह अभी भी कर सकता है? आप बाहरी क्लिक आदि को पंजीकृत करने के लिए ड्रॉपडाउन घटक से पूरी तरह से addEventListener('body', ... ) कर सकते हैं ... ड्रॉपडाउन केवल माता-पिता के लिए एक 'करीबी' घटना का उत्सर्जन कर सकता है जब कोई व्यक्ति बाहर क्लिक करता है, उदाहरण के लिए।

हाँ हाँ। कुछ घटकों को रिफलेक्टर करने का समय :) सभी को धन्यवाद! बहुत बढ़िया समुदाय।

एक कैसे लागू होता है v-model के साथ एक घटक के लिए createElement ? मैंने टेम्पलेट कंपाइलर का उपयोग करके जेनरेट कोड पर एक नज़र डाली, और ... यह बहुत सारे कोड है। मुझे निर्देशों के बारे में वहां के दस्तावेज़ीकरण की समझ नहीं थी।

डिफ़ॉल्ट रूप से, एक संकलन-समय निर्देश निर्देश को निकालेगा और निर्देश रनटाइम पर मौजूद नहीं होगा। यदि आप चाहते हैं कि निर्देश को रनटाइम परिभाषा द्वारा भी नियंत्रित किया जाए, तो ट्रांसफ़ॉर्म फ़ंक्शन में सही लौटें।

@blocka यदि आप render फ़ंक्शन का उपयोग कर रहे हैं तो आपके पास अंतर्निहित निर्देशों तक पहुंच नहीं है। आपको समकक्ष तर्क को स्वयं संभालना होगा। उदाहरण के लिए v-if सिर्फ एक टर्नरी अभिव्यक्ति है, v-for एक array.map() अभिव्यक्ति है... और v-model (सामान्य <input> तत्व पर) ) का अनुवाद value बाइंडिंग और input ईवेंट श्रोता में किया जाता है।

@ yyx990803 मुझे यही लगा। मैं शायद एक एचओसी के साथ संभाला जाएगा (मैं पहले से ही सशर्त सौंप रहा हूं (हालांकि मैं इसका उपयोग

Vue 1 के साथ vuex बनाम redux के दो घोषित फायदे थे।

1. प्रदर्शन बेहतर है क्योंकि vuex राज्य को बदल देता है, जो vue के साथ सबसे अच्छा काम करता है (पुराने राज्य को बदलकर "डर्टी चेकिंग" के बराबर प्रदर्शन किया गया था)
2. Vuex अधिक "जागरूक" है कि यह एक Vue अनुप्रयोग में है

क्या वर्चुअल डोम का उपयोग 1 में से कुछ या सभी को कम करता है?

@blocka इसमें से कुछ को कम करता है, लेकिन समग्र पूर्ण अभी भी Redux की तुलना में बहुत बेहतर होगा।

2.0 में जो बदला वह प्रतिक्रियाशीलता की ग्रैन्युलैरिटी है। आइए तुलना करें:

• Vue 1.x में, प्रतिक्रियाशीलता बहुत बारीक है। प्रत्येक निर्देश और प्रत्येक पाठ बाध्यकारी में एक संबंधित द्रष्टा होता है। इसके परिणामस्वरूप डेटा में परिवर्तन होने पर बारीक अपडेट मिलते हैं, लेकिन प्रारंभिक रेंडर पर अधिक निर्भरता ट्रैकिंग ओवरहेड और थोड़ा अधिक मेमोरी उपयोग की कीमत पर।
• Redux के साथ, प्रतिक्रियाशीलता में कोई ग्रैन्युलैरिटी नहीं होती है। जब भी कुछ बदलता है, तो पूरे ऐप को फिर से प्रस्तुत करना होगा। रिएक्ट में, Redux बाइंडिंग कनेक्टेड कंटेनरों पर कुछ अनुकूलन करता है, लेकिन बेहतर प्रदर्शन हासिल करने के लिए उपयोगकर्ता को अभी भी shouldComponentUpdate को बड़े पैमाने पर लागू करने की आवश्यकता है।
• Vue 2.0 में, प्रतिक्रियाशीलता में मध्यम ग्रैन्युलैरिटी होती है। प्रत्येक घटक में एक संबंधित द्रष्टा होता है जो उस घटक की निर्भरता पर नज़र रखता है। जब डेटा बदलता है, तो केवल उन घटकों को जो परिवर्तन पर निर्भर करते हैं, उन्हें अपने वर्चुअल DOM को फिर से प्रस्तुत करना होगा। यह अनिवार्य रूप से रिएक्ट के लिए सबसे अच्छा मामला है, लेकिन आपको Vue 2.0 में इसे प्राप्त करने के लिए कुछ भी करने की आवश्यकता नहीं है।

आम तौर पर 2.0 के साथ, आप देखेंगे (1.x की तुलना में)

• छोटे डेटा परिवर्तनों के लिए थोड़ा धीमा (लेकिन अभी भी बहुत तेज़) अपडेट
• मध्यम से बड़े डेटा परिवर्तनों के लिए शालीनतापूर्वक तेज़ अपडेट
• काफी तेज प्रारंभिक रेंडर

अरे,
मुझे एनिमेटेड.सीएसएस के साथ काम करने के लिए संक्रमण नहीं मिलते हैं।

<transition enterClass="fadeIn" leaveClass="fadeOut" class="animated" mode="out-in"> 
  <router-view keep-alive></router-view> 
</transition>

क्या किसी के पास कोई विचार है?

आपके प्रोप नाम गलत हैं।

कैमलकेस बनाम केबैप-केस अभी भी 2.0 में लागू होता है।

<transition enter-class="fadeIn" leave-class="fadeOut" class="animated" mode="out-in"> 
  <router-view keep-alive></router-view> 
</transition>

@LinusBorg मुझे खेद है, मैंने पहले ही कोशिश कर ली है। यहाँ मेरी एक छोटी सी बेला है। सीएसएस संक्रमण और नाम टैग के साथ यह ठीक काम करता है।
https://jsfiddle.net/z0nyfba0/

किसी घटक पर v-model का उपयोग करते समय, क्या घटक के पास v-model साथ उपयोग किए गए किसी भी संशोधक की दृश्यता होगी?

उदाहरण के लिए यदि मेरे पास एक घटक है जो input ईवेंट उत्सर्जित करता है, जब वह ईवेंट उत्सर्जित होता है तो यह इस बात पर निर्भर करता है कि lazy संशोधक का उपयोग किया जाता है या नहीं।

@fergaldoyle मैंने इसके साथ थोड़ा खेला और मुझे लगता है कि आप कस्टम तत्व पर वी-मॉडल संशोधक का उपयोग नहीं कर सकते क्योंकि आपको मैन्युअल रूप से इनपुट ईवेंट उत्सर्जित करने की आवश्यकता है। यदि आप आलसी व्यवहार को प्राप्त करना चाहते हैं तो आपको change ईवेंट को इनपुट से बाँधना होगा जैसे https://jsfiddle.net/cynhtLty/1/

@calebboyd

https://jsfiddle.net/Linusborg/z0nyfba0/1/

1. आपको enter-active-class और leave-active-class
2. आपको class="animated" को <router-view> तत्व पर रखना होगा।

@fergaldoyle 1.0 डॉक्स के अनुसार, मैं के साथ लगता है lazy , वी मॉडल बस के लिए प्रतिक्रिया होगी change के बजाय input । आप व्यवहार को बदलने के लिए इसका उपयोग कर सकते हैं, और lazy दिए गए हैं या नहीं, इसके आधार पर अलग-अलग परिणाम देने के लिए input या change का उत्सर्जन कर सकते हैं।

मैं एक साधारण v-for उदाहरण के साथ खेलते हुए अपना सिर खुजला रहा हूं। किसी कारण से value बाइंडिंग select तत्वों के लिए 2.0 में काम नहीं कर रही है: https://jsfiddle.net/972eL5fL/

साथ ही यह शायद दस्तावेज़ों में ध्यान दिया जाना चाहिए कि "i in 10" जैसी वी-के लिए श्रेणियां 0 के बजाय 1 से शुरू होती हैं जैसे 1.0 में।

@lauritzen

उदाहरण के लिए एक साधारण वी के साथ खेलते हुए मैं अपना सिर खुजला रहा हूं। किसी कारण से 2.0 में चुनिंदा तत्वों के लिए मूल्य बाध्यकारी काम नहीं कर रहा है: https://jsfiddle.net/972eL5fL/

ऐसा लगता है कि मेरे लिए अपेक्षित काम कर रहा है, आपके लिए क्या काम नहीं कर रहा है?

सार्वजनिक सेवा घोषणा

हम आपको मंच पर या गटर पर समर्थन प्रश्न पूछने के लिए प्रोत्साहित करते हैं।

इस मुद्दे को नए एपीआई के बारे में चर्चा के लिए आरक्षित किया जाना चाहिए। यदि हम यहां विभिन्न प्रश्नों के लिए समर्थन संभालते हैं, तो यह हाथ से निकल जाएगा।

शुक्रिया।

क्यों vm.$get को पदावनत कर दिया गया है?
इसके बजाय Vue.get क्यों नहीं?
यह इस तरह के परिकलित भावों का मूल्यांकन करने के लिए बहुत उपयोगी है
var exp = 'entity.type.name' // this is generated in runtime return vm.$get(exp)

@iagafonov ऐसे बहुत से परिदृश्य नहीं हैं जहाँ यह उपयोगी है, इसलिए इसे कोर का हिस्सा नहीं होना चाहिए।

यदि आपको कुछ परिदृश्यों में से किसी एक के लिए कार्यक्षमता की आवश्यकता है, तो आप बहुत आसानी से एक समान व्यवहार जोड़ सकते हैं जैसे कि लॉश:

import get from 'lodash/get';
Vue.prototype.$get = get

//in any component
var value = this.$get(this.someObject,'some.path.to.value')

(बेशक आप इसे "वर्ग विधि" के रूप में Vue.get() के रूप में भी जोड़ सकते हैं - या बस इसे स्थानीय रूप से आयात करें जहां आपको इसकी आवश्यकता है - आपकी पसंद)

@LinusBorg। सबसे पहले, मैं लॉश या ऐसा कुछ उपयोग नहीं करता।
दूसरा लॉश कार्यान्वयन धीमा है, क्योंकि यह रन-टाइम में अभिव्यक्ति संरचना में गहराई से प्रयास करने का प्रयास करता है। vue नए निर्दिष्ट फ़ंक्शन (parseExpression द्वारा) का अनुपालन करता है, जो स्कोप से बंधा होता है।
यह मामूली हिस्सा नहीं है, इसे फिर से लागू करना बहुत मुश्किल है।
बेशक, $ हर बार संकलन समारोह प्राप्त करें)। अच्छा होगा यदि parseExression उदाहरण के लिए Vue.util में एपीआई का हिस्सा हो।

@iagafonov this.$get भी रनटाइम पर पथ को पार्स करना होगा और मूल्य को गतिशील रूप से पुनर्प्राप्त करना होगा। अन्यथा यदि पथ मौजूद नहीं है तो आपको एक त्रुटि मिलेगी। साथ ही अधिकांश मामलों में पूर्ण अंतर नगण्य होगा। यदि आप लॉश नहीं चाहते हैं तो वहां बहुत से अन्य पथ पुनर्प्राप्ति पुस्तकालय हैं। यह अब Vue की चिंता का हिस्सा नहीं है।

अब बहिष्कृत परम विशेषताओं के कुछ विकल्प क्या हैं?

क्या आप निर्देश में पैरा के बारे में बात कर रहे हैं? तब आप vnode ऑब्जेक्ट के अंदर सभी बाइंडेड विशेषताएँ पा सकते हैं

<button v-test="123" color="red" type="button">click me</button>

bind (el, binding, vnode) {
 // vnode.data.attrs -> { color: 'red' }
}

@sqal , क्या यह मेरे प्रश्न के उत्तर में है? यदि हां, तो मैं परम विशेषताओं जैसे आलसी, संख्या और बहस के बारे में बात कर रहा हूं। उदाहरण के लिए, 2.0 से पहले, मैं यह <input type="text" v-model="msg" number> (संख्या यहाँ एक परम विशेषता है)। परम विशेषता का उपयोग किए बिना मैं वही परिणाम कैसे प्राप्त कर सकता हूं?

@ पी-एडम्स इसका उल्लेख पोस्ट में किया गया है - वे अब संशोधक हैं <input v-model.number="msg">

मैं Vue 2.0 में पाता हूं, जब प्रॉप्स बदलते हैं, तो रेंडर फ़ंक्शन को हमेशा कॉल किया जाता है, इसलिए मुझे आश्चर्य है कि 2.0 shouldComponentUpdate को फिर से रेंडर करने का निर्णय लेने के लिए समर्थन करेगा।

@ yyx990803 ठीक है, मैं इसे अब The lazy and number params are now modifiers पोस्ट में देखता हूं।

@HeChenTao Evan ने इसे यहाँ थोड़ा समझाया है https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.pc5c8urbv

@HeChenTao रेंडर फ़ंक्शन "हमेशा" नहीं कहा जाता है, केवल तभी जब इसकी आवश्यकता होती है:

• इसकी प्रतिक्रियाशीलता के कारण, Vue को shouldComponentUpdate की आवश्यकता नहीं है।
• जब एक घटक में उपयोग किए जाने वाले प्रतिक्रियाशील डेटा को बदल दिया जाता है, तो यह रेंडर फ़ंक्शन, vdom डिफरेंशियल इत्यादि को ट्रिगर करेगा।
• लेकिन अगर उस डेटा में से कोई भी नहीं बदला है, तो अपडेट नहीं होना अनिवार्य है और रेंडर फ़ंक्शन को _not_ कहा जाएगा।

मोबक्स के साथ प्रतिक्रिया में भी यही किया जा सकता है। मुझे पूरा यकीन है कि आपको shouldComponentUpdate लागू करने की ज़रूरत नहीं है। हालाँकि, Vue की तरह, mobx एक परिवर्तनशील अवस्था पर जोर देता है। अगर, किसी कारण से, आपने अपरिवर्तनीय राज्य अवधारणा में खरीदा है। उस स्थिति में, प्रतिक्रिया आपकी पीठ shouldComponentUpdate ।

तो क्या इसका मतलब यह है कि अगर कोई अपरिवर्तनीय स्थिति पर जोर देता है, तो व्यू एक अच्छा मैच नहीं होगा?

कार्यात्मक घटकों के संदर्भ तर्क में children प्लस slots । मुझे यह जानकर थोड़ा भ्रम होता है कि children() और slots().default यह बिल्कुल समान है। मुझे आश्चर्य है कि सही दृष्टिकोण क्या है। शायद स्लॉट के रूप में 'बच्चे' आलसी हैं, लेकिन फिर भी एक ही व्यवहार प्राप्त करने के दो अलग-अलग तरीकों का समर्थन क्यों कर रहे हैं?

कार्यात्मक घटक केवल कार्य हैं और इस प्रकार उनके बच्चे नहीं होते हैं। आईएमएचओ, बच्चों को बहिष्कृत किया जाना चाहिए और स्लॉट को आलसी नहीं रखना चाहिए।

@blocka आप

@ miljan-aleksic children कच्चा है (आपको प्रत्येक नोड मिलता है चाहे उन्हें किस स्लॉट में जाना चाहिए), slots आने वाले बच्चों पर slot नामों के आधार पर हल किया जाएगा।

धन्यवाद @yyx990803। हो सकता है कि डॉक्स में इसके बारे में अधिक जानकारी भ्रम से बचें, @chrisvfritz।

@ मिलजन-अलेक्सिक मैं एक नोट जोड़ूंगा। मैं

फ़िल्टर के संबंध में, गणना की गई संपत्ति का उपयोग करना काफी सीधा लगता है, लेकिन वी-मॉडल के साथ फ़िल्टर का उपयोग करने के मामले को कैसे संभालना है। यदि कोई इनपुट फ़ील्ड में टाइप करके नामों की सूची के माध्यम से फ़िल्टर करना चाहता है, तो यह 2.0 में कैसे किया जा सकता है?

जब कोई डेटा फ़ील्ड / परिकलित गुण किसी टेम्पलेट में उपयोग नहीं किया जा रहा हो, तो Vue चेतावनी देने पर विचार? मुझे लगता है कि यहां कुछ सीमाएं हैं, लेकिन यह जानना बहुत उपयोगी होगा कि मैं कुछ बेकार स्टोर आयातों को कहां खींच सकता हूं जहां उनकी आवश्यकता नहीं है।

@ yyx990803 , घटक प्रोटोटाइप के संदर्भ में $context सेट करने के बारे में आप क्या सोचते हैं? $parent या $root मैंने अपने आप को अक्सर उस संदर्भ तक पहुँचते पाया जो वर्तमान में केवल $vnode ऑब्जेक्ट के माध्यम से उपलब्ध है।

असल में यह संदर्भ तक पहुंचने का एक विश्वसनीय तरीका प्रतीत नहीं होता है। कैसे किया जाना चाहिए?

@ miljan-aleksic क्या आप उन उपयोग मामलों को साझा कर सकते हैं जहां आप अक्सर संदर्भ तक पहुंच रहे हैं?

@Kingdaro क्या आप इसके लिए कोई मुद्दा खोल सकते हैं? यह अच्छा लगता है अगर यह संभव होगा।

@ पी-एडम्स आप अभी भी Array.prototype.filter साथ एक गणना की गई संपत्ति का उपयोग कर सकते हैं।

@chrisvfritz , मूल रूप से कामकाज के लिए उदाहरण के लिए बच्चे की अपेक्षा के संदर्भ में चर सेट करने के लिए। या पहले घटक के लिए एक रेफरी सेट करने के लिए जो Vue स्वयं करता है।

मैं सहमत हूं कि यह सभी के लिए सामान्य नहीं है, लेकिन कम से कम घटक के भीतर इसे एक्सेस करने का एक विश्वसनीय तरीका होना चाहिए। $vnode तब तक मौजूद नहीं है जब तक कि टेम्प्लेट का उपयोग करते समय घटक माउंट नहीं हो जाता (कम से कम मेरा निष्कर्ष अब तक)।

मुझे यह जानकर संतोष होगा कि इसे उचित तरीके से कैसे एक्सेस किया जाए।

एक अन्य स्थिति जहां $context उपयोगी होगी जब एक घटक को दूसरे घटक की जड़ के रूप में पुन: उपयोग किया जाता है।

<template>
  <Foo>
    <child/>
  </Foo>
</template>
<script>
{ name: 'Bar' ... }
</script>

उदाहरण में child.$parent बार के बजाय घटक फू लौटाएगा, जो सही है लेकिन अगर माता-पिता और बच्चे एक-दूसरे पर निर्भर हैं तो उनके बीच सीधा संचार संदर्भ के माध्यम से हो सकता है।

@ miljan-aleksic मैं इसे @ yyx990803 पर छोड़ दूँगा। मैं कहूंगा कि $parent , $context तक पहुंचना शायद 99.9% समय गलत तरीका होगा और मुझे लगता है कि मैं शायद इसका कभी भी उपयोग नहीं करूंगा।

मेरे पास v-show और संक्रमण के साथ एक स्थिति है। इस परिदृश्य में एक मोडल है जो डिफ़ॉल्ट रूप से सीएसएस में 'डिस्प्ले: कोई नहीं' है। जब v-show के साथ संयुक्त किया जाता है तो यह कभी नहीं दिखाया जाएगा क्योंकि निर्देश प्रदर्शन संपत्ति को हटा देता है, सीएसएस वाले तब बने रहते हैं। मैं CSS (परियोजना आवश्यकताओं) को नहीं बदल सकता और मैं एक कस्टम निर्देश का उपयोग नहीं कर सकता क्योंकि ऐसा लगता है कि Vue संक्रमण विशेष रूप से इस पर निर्भर करता है।

मैं अब सोच रहा हूं कि एक निर्देश जो वी-शो के ठीक बाद मूल्यांकन करता है, डिस्प्ले प्रॉपर्टी को ब्लॉक करने के लिए सेट कर सकता है। इसे आज़माने की ज़रूरत है, लेकिन वैसे भी यह एक अच्छा विचार हो सकता है कि वी-शो में एक संशोधक जोड़ने के लिए सेटिंग डिस्प्ले को ब्लॉक या इनलाइन-ब्लॉक करने की अनुमति दी जाए। सिर्फ एक विचार।

@chrisvfritz , यह उम्मीद की जाती है कि कार्यात्मक घटकों के लिए मूल संदर्भ तत्काल माता-पिता नहीं है जहां उन्हें स्लॉट के रूप में उपयोग किया जा रहा है, बल्कि संदर्भ घटक इसके बजाय?

2.0.0-बीटा7 में "<" (और संभवतः अन्य एचटीएमएल-संवेदनशील वर्ण) होने पर टेम्पलेट का संकलन विफल हो जाता है

https://jsfiddle.net/x0r59ur1/

यह 1.0.26 में काम किया।

"<" के साथ "<" से बचने से समस्या हल हो जाती है।

@GlurG के ठीक से "<" से बचने की उम्मीद है।

@ yyx990803 , यदि मैं एक ही प्रकार के घटकों की सूची में ट्रांज़िशन का उपयोग करना चाहता हूं और उनका राज्य रखना चाहता हूं, तो मुझे यह कैसे करना चाहिए? डॉक्स के बाद मैं केवल यह देखता हूं कि जब घटक अलग होते हैं।

आइए एक टैब घटक कहें और इसकी वस्तुओं को संक्रमण करें। मुझे कोई रास्ता नहीं मिल रहा है :(

<tabs>
  <transition>
    <tabs-item>Content 1</tabs-item>
    <tabs-item>Content 2</tabs-item>
    <tabs-item>Content 3</tabs-item>
  <transition>
</tabs>

@ miljan-aleksic <transition> केवल एकल तत्व के लिए है। आपको कई मदों के लिए <transition-group> ।

@ yyx99803 , ने भी कोशिश की, लेकिन फिर भी यह नहीं देखा कि इसे कैसे प्राप्त किया जाए। संक्रमण-समूह तत्वों को जोड़कर/हटाकर काम करता है लेकिन ऐसा करते समय घटक फिर से जुड़ जाएंगे, राज्य खो देंगे। एक टैब के विचार के अलावा एक समय में केवल एक घटक दिखाना है, यह बिल्कुल एक सूची नहीं है :)

@ yyx990803 , @LinusBorg मैं मदद की सराहना करता हूं लेकिन समाधान स्पष्ट नहीं है। मुझे पता है कि संक्रमण कैसे लागू होते हैं, जो मैं समझ नहीं पा रहा हूं वह यह है कि keep-alive संक्रमित घटकों को कैसे लागू किया जाए।

मैंने jsfiddle उदाहरण के साथ स्पष्टता के लिए एक नया मुद्दा बनाया है कि हर बार घटक कैसे बनाए जाते हैं।

@ yyx990803 ,

आप सचमुच मेरे जीवन को बदल रहे हैं, अपने उत्पादों और कार्य नैतिकता के साथ मैं उन उत्पादों को सीखने, बनाने और वितरित करने में सक्षम हूं जो मेरे पास लंबे समय से स्टैंडबाय में थे। आपके इसे सरल दृष्टिकोण के साथ, उपयोग करने और निर्माण करने के लिए सभी के लिए उच्च तकनीक उपलब्ध है। इन सबके लिए और इससे भी अधिक के लिए मैं सदा आभारी हूँ।

@ मिलजन-अलेक्सिक एक पैट्रियन अभियान विंक विंक है ।

आप क्या जानते हैं @phanan , आप बिल्कुल सही हैं। मैंने व्यक्तिगत रूप से इवान का समर्थन करना शुरू कर दिया है और जैसे ही कंपनी के उत्पाद परिणाम देना शुरू करेंगे, यह सुनिश्चित करेगा कि समर्थन अधिक ध्यान देने योग्य हो।

ready जीवनचक्र हुक को mounted पक्ष में हटा दिया गया है; लेकिन चैंज के अनुसार इस बात की कोई गारंटी नहीं है कि माउंट किए जाने से पहले घटक को प्रस्तुत किया जाएगा। यह छिटपुट त्रुटियों का कारण बनता है जब मैं घटक शुरू होने के बाद कुछ jQuery घटकों (जैसे चयन) को प्रारंभ करना चाहता हूं। इसके बजाय मुझे किस जीवनचक्र हुक का उपयोग करना चाहिए? क्या "तैयार" हुक इस तरह अनुकरण किया जा सकता है:

function mounted() {
  Vue.nextTick(() => {
    //...
  });
}

@GlurG हाँ, यह काम करेगा। और वैसे, यह भी कई मामलों में 1.0 में ready'() साथ nessessariy था।

क्या कोई कारण है कि इसके लिए कोई हुक नहीं हो सकता है? मैंने भी
इस पार... 1.0 में भी, और raf to . के साथ लूपिंग जैसी चीज़ों का सहारा लिया
जांचें कि क्या यह डोम में है, आदि।
10 अगस्त 2016 को शाम 6:26 बजे, "थॉर्स्टन लुनबोर्ग" नोटिफिकेशन @github.com
लिखा था:

@GlurG https://github.com/GlurG हां, यह काम करेगा। और जिस तरह से,
वह भी कई मामलों में 1.0 में तैयार '() के साथ nessessariy था।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/vuejs/vue/issues/2873#issuecomment -238903012, या म्यूट करें
सूत्र
https://github.com/notifications/unsubscribe-auth/AACounAoI8p65soUrbdaiwteDXKgMGJks5qee25gaJpZM4IedHC
.

रेंडर फ़ंक्शंस का उपयोग करते समय मुख्य निर्देशों को अनदेखा कर दिया जाता है, जो उचित है। लेकिन कुछ सादे जेएस का उपयोग करके पुन: पेश करना इतना आसान नहीं है, क्योंकि v-model जिसमें आईई 9 के लिए कामकाज है और शायद अन्य किनारे के मामले के मुद्दों को हल करता है।

यह आपको इसके बजाय एक टेम्पलेट का उपयोग करने पर पुनर्विचार करने पर मजबूर करता है, लेकिन यह संभव नहीं है या कुछ स्थितियों में सबसे अच्छा विकल्प है। दस्तावेज़ निश्चित रूप से इस विषय पर अधिक मार्गदर्शन प्रदान कर सकते हैं और इसके अलावा रेंडर फ़ंक्शंस के साथ काम करते समय कुछ सहायक होना एक अच्छा विचार हो सकता है जो इन सामान्य परिस्थितियों को हल करने में मदद करेगा और कोई भी टेम्पलेट याद नहीं करेगा।

@ miljan-aleksic क्षमा करें, मैंने अपनी टिप्पणी हटा दी क्योंकि मैंने देखा कि यह केवल वी-शो या कस्टम निर्देशों के लिए काम करता है, और हाँ, जैसा कि आपने वी-मॉडल के मामले में कहा था, इनपुट जोड़ने/श्रोता बदलने और मैन्युअल रूप से हमारे डेटा को अपडेट करने की आवश्यकता है

क्या नया activated हुक कहा जाना चाहिए जब एक मार्ग निकाल दिया जाता है जो router-view सक्रिय/माउंट करता है? Im वर्तमान में यह व्यवहार नहीं देख रहा है।

@wprater नहीं, यह पूरी तरह से <keep-alive> और कुछ नहीं।

@ yyx990803 मैं अपने राउटर-व्यू को एक जीवित में लपेट रहा हूं, लेकिन जब मैं विकृत दृश्य पर वापस जाता हूं तो मुझे एक हुक नहीं मिल रहा है। mounted और न ही activated कहलाते हैं। मुझे यह सुनिश्चित करने की ज़रूरत है कि डोम का प्रतिपादन किया गया हो।

@wprater कृपया असंबंधित प्रश्नों के लिए इस धागे का उपयोग करने से बचें। यदि कोई बग है, तो प्रजनन के साथ संबंधित रेपो में समस्या दर्ज करें।

क्या Vue JSX ऑब्जेक्ट स्प्रेड ऑपरेटर को सपोर्ट करता है? मैंने कोशिश की है लेकिन यह काम नहीं करता है।

यह करता है और @yyx990803 इसे काम करने के लिए बहुत प्रयास करता है।

मैं यह <Component {...{ props } }></Component> कर रहा हूं और यह दस्तावेज के रूप में काम करता है।

@blocka धन्यवाद! मुझे लगा कि संपत्ति के नाम props की जरूरत नहीं थी

@yyx990803
components विकल्प सरणी प्रकार का समर्थन नहीं करते हैं, लेकिन यह 1.x में काम करता है।

जैसे

var Parent = Vue.extend({
  name: 'parent',
  template: '<div><slot></slot></div>'
})

var Child = Vue.extend({
  name: 'child',
  template: '<span>hello</span>'
})

new Vue({
  el: '#app',

  components: [
    Parent,
    Child
  ],

  replace: false,

  template: '<parent><child></child></parent>'
})

यह बग है?

@ QingWei-Li वे अब समर्थित नहीं हैं, क्योंकि यह कभी भी आधिकारिक रूप से प्रलेखित विशेषता नहीं थी। कारण यह है कि ES2015 के साथ आप केवल components: { Parent, Child } लिख सकते हैं।

बस एक छोटा सा सुझाव,
क्या सामान्य सरणी पुनरावृत्ति के लिए हम v-foreach का उपयोग करते हैं और सीमा के लिए हम v-for ।

जो PHP से आने वाले और यहां तक ​​कि JQ में .each या JS में foreach अनुरूप होने वाले उपयोगकर्ताओं के लिए अधिक समझ में आता है

@ ctf0 हम आरसी चरण में हैं, एपीआई अब और नहीं बदलेगा। और हम एक ही काम करने के लिए वैकल्पिक सिंटैक्स का परिचय नहीं देंगे।

मुझे नहीं लगता कि v-for="item in items" का मानसिक उपर इतना महत्वपूर्ण है कि इसकी गारंटी दी जा सके।

इस नए संस्करण के साथ, क्या आप इस मामले को संभालेंगे।

मेरे पास एक कैलेंडर घटक है (सिमेंटिक यूआई से आ रहा है), जो क्लासिक टेक्स्ट इनपुट का उपयोग करता है, और मानव प्रारूप में दिनांक दिखाता है (उदाहरण के लिए "जुलाई 10, 2016")। V1.0 के साथ, मैं उस स्ट्रिंग को उचित तिथि में बदलने के लिए दो-तरफा फ़िल्टर का उपयोग कर रहा था, इसलिए मेरा ऑब्जेक्ट डेटा सीधे सबमिट करने के लिए तैयार था। लेकिन चूंकि फिल्टर अब वी-मॉडल में काम नहीं करेंगे, मैं अब v2.0 में वही काम कैसे कर सकता हूं?

धन्यवाद

@shadowRR क्या कुछ कोड देखना संभव होगा?

@ पी-एडम्स ज़रूर। हेयर यू गो।

सबसे पहले, मेरा फ़िल्टर, जो मेरे कैलेंडर इनपुट के लिए मेरे वी-मॉडल पर उपयोग किया जाता है। इसका एकमात्र उद्देश्य लिखना है, जब मूल्य बदलता है, मेरे डेटा के लिए उचित दिनांक प्रकार (तिथि पोस्टग्रेज़)।

Vue.filter( 'formatDate', {
        read( date ) {
            return date;
        },
        write( date ) {
            if( !date ) return null;
            return moment( date, 'D MMMM YYYY' ).format( 'YYYY-MM-DD' );
        }
    } );

और मैं इसे अपने घटक पर इस तरह इस्तेमाल करूंगा (इनपुट में एक कैलेंडर सिस्टम है जो मेरी तारीख को मानव पठनीय प्रारूप में लौटाता है)

<div class="required field">
        <label>Start date</label>
         <div class="ui calendar">
                 <div class="ui input left icon">
                      <i class="calendar icon"></i>
                      <input v-model="section.start | formatDate" type="text">
                 </div>
         </div>
</div>

मैं यहां @yyx990803 की पोस्ट पढ़ने की अनुशंसा करता हूं: https://github.com/vuejs/vue/issues/2756 जहां वह v-model पर दो-तरफ़ा फ़िल्टर पर चर्चा करता है। साथ ही, इस तरह के प्रश्न यहां पूछना बेहतर हो सकता है: http://forum.vuejs.org/

मैं उस पोस्ट को याद कर रहा हूं जिसके बारे में आप बात कर रहे हैं, उसे देखने वाला, धन्यवाद;)

नमस्ते,
मुझे नए जीवन चक्र के हुक में कुछ संदेह है।
अगर मैं माउंट होने पर एक ईवेंट हैंडलर पंजीकृत करना चाहता हूं, और इसे अनमाउंट करने से पहले अपंजीकृत करना चाहता हूं, तो मुझे इसे कैसे काम करना चाहिए? बनाए गए और हुक को नष्ट करने से पहले चेक और लॉजिक्स जोड़ें?
Vue 1.x में मैं संलग्न और अलग हुक का उपयोग करूंगा।
लेकिन 2.0 में माउंटेड हुक है लेकिन कोई अनमाउंट हुक नहीं है। थोड़ा मेल नहीं खाता लगता है।
क्या कोई कारण है कि कोई अनमाउंट हुक प्रदान नहीं किया जाता है?

@ f15gdsy mounted मेल खाती है destroyed । 2.0 में कोई attached / detatched काउंटर पार्ट्स नहीं हैं - आपको इन-डोम स्वयं जांच करने की आवश्यकता है। यदि आपके ईवेंट इन-डोम/ऑफ़-डोम की परवाह नहीं करते हैं तो mounted और beforeDestroy ऐसा करने के लिए उपयुक्त स्थान हैं।

जब किसी कस्टम घटक पर उपयोग किया जाता है, तो v-on अब केवल उस घटक द्वारा उत्सर्जित कस्टम ईवेंट को सुनता है। (अब DOM ईवेंट नहीं सुनता)

हो सकता है कि मैंने यहां कुछ पोस्ट मिस कर दी हों, लेकिन इसके पीछे का डिज़ाइन निर्णय क्या है?
यह घटकों पर बाध्यकारी सरल क्लिक ईवेंट को बहुत ही वर्बोज़ बना देगा ..

1.0:

<foo @click="bar"></foo>

2.0:

<div @click=bar>
  <foo></foo>
<div>

@fnlctrl , मूल संशोधक का उपयोग करें: @click.native="bar" ।

@ miljan-aleksic बहुत-बहुत धन्यवाद! मुझे लगता है कि इस संशोधक को इस अंक में Directives -> v-on -> modifiers में जोड़ा जाना चाहिए

क्या मैं सर्वर के रूप में कोआ (1.x या 2.x) का उपयोग कर सकता हूं? क्या कोआ के साथ vue-server-renderer पर कोई समस्या है?

@yyx990803

import Vue from 'vue'

Vue.component('expanding', {
  functional: true,
  render (createElement, { children }) {
    const data = {
      props: {
        name: 'expanding',
      },
      on: {
        beforeEnter ($el) {
          $el.classList.add('collapse')
          console.log('beforeEnter')
        },
        enter ($el) {
          $el.classList.remove('collapse')
          $el.classList.add('collapsing')
          $el.style.height = `${$el.scrollHeight}px`
          console.log('enter')
        },
        afterEnter ($el) {
          $el.classList.remove('collapsing')
          $el.classList.add('collapse', 'in')
          console.log('afterEnter')
        },
        beforeLeave ($el) {
          $el.classList.add('collapsing')
          $el.classList.remove('collapse', 'in')
          $el.style.height = 0
          console.log('beforeLeave')
        },
        leave ($el) {
          console.log('leave')
        },
        afterLeave ($el) {
          $el.classList.remove('collapsing')
          $el.classList.add('collapse')
          $el.style.display = 'none'
          console.log('afterLeave')
        }
      }
    }
    return createElement('transition', data, children)
  }
})

        <a href="#" :aria-expanded="showItem ? 'true' : 'false'" @click="showItem = !showItem">
          <span class="icon is-small"><i class="fa fa-table"></i></span>
          Tables
          <span class="icon is-small is-angle"><i class="fa fa-angle-down"></i></span>
        </a>
        <expanding appear="true">
          <ul v-show="showItem">
            <li>
              <router-link to="/tables/basic">Basic</router-link>
            </li>
            <li>
              <router-link to="/tables/handsontable">Handsontable</router-link>
            </li>
          </ul>
        </expanding>

एंटर हुक को कॉल क्यों नहीं करते?

@fundon आपको मंचों या गंदी चैट पर सवाल पूछना चाहिए

इस धागे को लॉक करना क्योंकि:

1. हम अब RC में API फ़्रीज़ में हैं इसलिए यह दस्तावेज़ अब अपडेट नहीं किया जाएगा।
2. बहुत से लोग इसे सामान्य एफएक्यू थ्रेड के रूप में उपयोग कर रहे हैं, जो कि इसके लिए नहीं है।

यदि आपके पास कोई बग है, तो कृपया समस्या रिपोर्टिंग मार्गदर्शिका के बाद एक अलग समस्या खोलें, यदि आपका कोई प्रश्न है, तो कृपया फ़ोरम या गटर का उपयोग करें।

अपडेट : 2.0 में परिवर्तनों की अधिक निश्चित और विस्तृत सूची के लिए, नई माइग्रेशन मार्गदर्शिका देखें ।