সম্ভবত এটি একটি তুচ্ছ প্রশ্ন is
সুতরাং, যখন আমি ব্রাউজারে আমার ভয়েজ অ্যাপ্লিকেশনটি চালিত করি তখন থ্রটলিং ডাউনলোডের গতি সক্ষম করে (কম সংযোগে সেট করে)। আমি ব্রাউজারে অসম্পূর্ণ ভ্যু সিনট্যাক্স আউটপুট পেয়েছি।
আমি জানি যে পুরো পৃষ্ঠাটি লোড হওয়ার আগে আমরা লোডিং ইমেজ দেখিয়ে এটি চালিয়ে যেতে পারি , তবে এটি ঠিক করার কোনও সেরা সমাধান আছে কি?
উত্তর:
আপনি ভি-ক্লোকার নির্দেশিকাটি ব্যবহার করতে পারেন , যা সংকলন শেষ না হওয়া অবধি ভিউ দৃষ্টান্তটি গোপন করবে।
এইচটিএমএল:
<div v-cloak>{{ message }}</div>সিএসএস:
[v-cloak] { display: none; }Appডিভের জন্য ঠিক থাকতে হবে
v-cloakডিফল্ট হওয়া উচিত বলে মনে হয় এবং কেউ যদি সত্যিই এটি দেখাতে চায় তবে {{ }}তাদের মতো কিছু ব্যবহার করা উচিত v-uncloak।
display:noneবিদ্যমান এইচটিএমএলে, এটি এসইওর পক্ষে একটি খারাপ পতাকা। আমি মনে করি পৃষ্ঠা লোড হওয়া পর্যন্ত কোনও ধরণের ওভারলে ব্যবহার করা ভাল।
আমি নিম্নলিখিত কোডেপেন সংযুক্ত করেছি। আপনি এবং এর সাথে পার্থক্যটি দেখতে পারেন v-cloak।
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>v-cloakবৈশিষ্ট্যটি ব্যবহার করে ক্লকড ট্যাগ প্রদর্শন করে ।
অন্যেরা ভি-ক্লক ব্যবহারের পরামর্শ হিসাবে সঠিক সমাধান। তবে @ ডেলাইটেডড0 ডি উল্লেখ করেছেন যে এটি আটকানো। সহজ সমাধান ছদ্ম নির্বাচক মধ্যে কিছু সিএসএস যোগ হয় ::beforeএর v-cloakনির্দেশ।
আপনার sass / কম ফাইলের লাইন বরাবর কিছু
[v-cloak] > * { display:none; }
[v-cloak]::before {
content: " ";
display: block;
position: absolute;
width: 80px;
height: 80px;
background-image: url(/images/svg/loader.svg);
background-size: cover;
left: 50%;
top: 50%;
}অবশ্যই আপনাকে লোডার চিত্রের জন্য একটি বৈধ এবং অ্যাক্সেসযোগ্য পাথ সরবরাহ করতে হবে। এটি এমন কিছু রেন্ডার করবে।
আশা করি এটা সাহায্য করবে.
v-cloakনির্দেশনা ব্যবহার করে আপনি অ-সংকলিত গোঁফের বাইন্ডিংগুলি লুকিয়ে রাখতে পারবেন যতক্ষণ না ভ্যু ইনস্ট্যান্সটি সংকলন না করা হয়। সংকলিত হওয়া অবধি এটি লুকানোর জন্য আপনাকে অবশ্যই সিএসএস ব্লকটি ব্যবহার করতে হবে।
এইচটিএমএল:
<div v-cloak>
{{ vueVariable }}
</div>সিএসএস:
[v-cloak] {
display: none;
}এই <div>প্রোফাইল সংকলন শেষ না হওয়া পর্যন্ত হবে না।
আপনি এই লিঙ্কটি আরও ভাল নিম্নরেখারv-cloak জন্য লোড করার সময় উপাদানগুলি লুকান দেখতে পারেন see
এইচটিএমএল ফাইলে কোনও ভ্যুজ সিনট্যাক্স অন্তর্ভুক্ত করবেন না:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>আপনার প্রধান জাভাস্ক্রিপ্টে, আপনি এটি করতে পারেন:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})রেফারেন্সের জন্য মূল্যবান ওয়েবপ্যাক টেম্পলেট দেখুন ।
আরেকটি সমাধান ব্যবহার করা হয়:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app" is="App"></div>
<script src="/app.js"></script>
</body>
</html>সঙ্গে:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})আপনি যে কোনও রেন্ডারিংকে একটি সরল মোড়কের উপাদানগুলিতে স্থানান্তর করতে পারেন । VueJS প্রারম্ভিককরণ যেমন নতুন Vue (....) এ একক র্যাপার উপাদান ছাড়া কোনও HTML থাকা উচিত নয়।
সেটআপ উপর নির্ভর করে আপনি এমনকি হতে পারে <app>Loading...</app>যেখানে অ্যাপ্লিকেশন কোন লোড HTML বা যা মধ্যবর্তী তারপর লোড প্রতিস্থাপিত হয় পাঠ্য সহ মোড়কের উপাদান।
**html**
<div v-cloak>{{ message }}</div>
**css**
[v-cloak] { display: none; }<v-cloak>প্রাসঙ্গিক স্থানে ডেটা বাঁধার আগে আপনার ভ্যু কোডটি লুকানোর জন্য ব্যবহার করুন । এটি প্রকৃতপক্ষে ভ্যু ডকুমেন্টেশনের একটি জায়গায় রয়েছে যা আপনি এটি অনুসন্ধান না করে বা ভালভাবে না পড়লে যে কেউ এটিকে মিস করতে পারে।
হ্যাঁ, আপনি ব্যবহার করতে পারেন v-cloak, আমি স্পিনকিট ব্যবহার করতে পছন্দ করি , এটি কেবলমাত্র সিএসএস সহ একটি দুর্দান্ত গ্রন্থাগার, একটি সাধারণ উদাহরণ পরীক্ষা করে দেখুন:
var vm = null;
setTimeout(function() {
vm = new Vue({
el: '#app',
data: {
msg: 'Is great, using: ',
url: 'http://tobiasahlin.com/spinkit/'
}
});
}, 3000);#app .sk-rotating-plane,
[v-cloak] > * { display:none }
body{
background: #42b983;
color: #35495e;
}
#app[v-cloak] .sk-rotating-plane {
display:block;
background-color: #35495e;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css">
<div id="app" v-cloak>
<div class="sk-rotating-plane"></div>
<h1>Vue with c-cloak</h1>
<p>
{{ msg }}
<a :href='url'>{{ url }}</a>
<p>
</div>লিঙ্ক: - http://tobiasahlin.com/spinkit/
আমি v-ifএমন একটি গণিত সম্পত্তি ব্যবহার করা পছন্দ করি যা আমার ডেটা প্রস্তুত রয়েছে কিনা তা যাচাই করে:
<template>
<div v-if="shouldDisplay">
{{ variableName }}
</div>
<div v-else>
Here you can insert a loader
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
variableName: null,
};
},
computed() {
shouldDisplay() {
return this.variableName !== null;
}
},
mounted() {
this.variableName = 'yes';
},
};
</script>এই উপায়ে কোনও ডেডার প্রস্তুত (ব্যবহার করা v-else) না থাকলে লোডার দেখানো আরও সহজ ।
এই বিশেষ ক্ষেত্রে v-if="variableName"পাশাপাশি কাজ করবে, কিন্তু আরও জটিল পরিস্থিতি হতে পারে।
যারা একাধিক লারাভেল ব্লেড ফাইলের সাথে ভিউ-ক্লোব ব্যবহার করেন এবং এটি কাজ করে না, তাদের জন্য কোনও চাইল্ড ব্লেড ফাইলের চেয়ে প্যারেন্ট ব্লেড ফাইলে ভি-ক্লোব ব্যবহার করার চেষ্টা করুন।
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>অর্থ,v-cloakদ্বিতীয়টি যে সমস্ত উপাদান লুকিয়ে রাখতে চায় তাতে আমার বিশেষত্ব যুক্ত করা উচিত?