Создание унифицированного UI без мам, пап и кредитов

https://habr.com/ru/post/581616/?utm_campaign=581616&utm_source=habrahabr&utm_medium=rss
Всем привет! Меня зовут Артём и я разработчик в команде Operations & Support Tools. Наша команда занимается разработкой софта для взаимодействия поддержки с пользователями, с целью решения любых возникших у пользователей проблем.В прошлый раз один из моих коллег рассказывал, как реализовано взаимодействие сервисов у нас в Платформе. Те, кто пропустили эту статью, могут найти её по ссылке. Сегодня я хочу рассказать про приложение, которое раскрыло возможности Contract API с новой стороны. Знакомьтесь, Contract UI. Читать далее

[Перевод] Создание веб-компонентов с помощью Vue 3.2

https://habr.com/ru/post/581954/?utm_campaign=581954&utm_source=habrahabr&utm_medium=rss
Вы когда-нибудь работали над несколькими проектами и хотели иметь набор настраиваемых компонентов, которые можно было бы использовать во всех из них? Будь то работа или просто побочные проекты, набор компонентов, к которым вы можете обратиться, - отличный способ ускорить работу в новом или существующем проекте. Но что, если не все ваши проекты используют одну и ту же структуру пользовательского интерфейса? Или, что, если у вас есть тот, который вообще не использует какой-либо фреймворк JavaScript и полностью отрисован на сервере?Как разработчик Vue, в идеале мы хотели бы просто использовать наш фреймворк для создания сложных пользовательских интерфейсов. Но иногда мы оказываемся в описанной выше ситуации, работая с другим фреймворком JavaScript, таким как React или Angular, или используя внутреннюю систему рендеринга, такую как Rails или Laravel. Как мы можем создать многоразовый пользовательский интерфейс для различных вариантов внешнего интерфейса?В Vue 3.2 у нас теперь есть решение этой проблемы: веб-компоненты на базе Vue! Читать далее

DAY 01 - 100 Days With Vue

https://dev.to/tahsin52225/day-01-100-days-with-vue-22fb
At last, I have started to learn Vue.js. Well, starting is the hard part of learning. Today I have learned about how to integrate Vue CDN and add Vue property to your project.

It's simple just add Vue CDN at the end of your Html file. Vue is ready for use.



Vue CDN


<script src="https://unpkg.com/vue@next" defer></script>





Adding Vue property in a particular HTML section

In your app.js (External JS file) file you have to create a Vue app and mount it into a particular section. Well you can use a variable to declare the Vue app



const app = Vue.createApp({});


To add this Vue app into your HTML code you need to use the mount function to this object. Mount accepts a string value of a CSS selector in which this Vue code applies. Here we have a section that has an id named #user-goal



const app = Vue.createApp({});
app.mount('#user-goal');


Nice ! Vue is mounted on that section



"data" property of Vue object

"data" is a predefined property of the Vue object which holds all the variables of the Vue app. "data" property always returns an object which holds a collection of variable names and values in a key-value pair. the variable value can be anything String, Number

, Boolean etc.



const app = Vue.createApp({
data(){
return {
variable_name : "variable_value"
}
}
});
app.mount('#user-goal');





"Interpolations" Showing data property value

"Interpolations" is a fancy name of handlebars, if you want to show your variable value into HTML. Just use double curly braces and write the variable name which you had declared on the data property.



<p>{{ variable_name }}</p>


"Interpolations" tells Vue to replace the variable name with the actual value of it. so you can't use "Interpolations" outside Vue mounted section.



"v-bind" attribute of Vue

Well, sometimes we need to pass value to Html attribute. For example, let's say you want to return a link to an anchor tag 'href' attribute, but if you use "Interpolations" it won't work. You need to use the "v-bind" attribute for that.

"v-bind" is a Vue attribute that helps to bind any Html attribute to Vue variables. Example :



<p> <a v-bind:href="variable_name">Link </a></p>


P.S: There are more uses of v-bind and we can use the shorter version of v-bind, But for now, let's stick with this.



"v-html" attribute of Vue

Now let's say you want to show an Html code using a variable. If you use only "Interpolations" it will show markup value and won't fulfill the purpose. For that, you need to use v-html attribute.

Example:

In app.js



const app = Vue.createApp({
data(){
return {
variable_name : "<h1> Hello this is value </h1>"
}
}
});
app.mount('#user-goal');


In index.html



<p v-html="variable_name"></p>





"methods" property of Vue object

Till now, we have used only static data. We need to add some dynamic feel to it. To do this, we need to use the "methods" property of the Vue object. "methods" is a predefined property that accepts only JS objects that hold the collection of functions.



const app = Vue.createApp({
data(){
return {
variable_name : "<h1> Hello this is value </h1>"
}
},
methods: {
function_name: function () {
//do something
}
}
});
app.mount('#user-goal');


We can use direct methods in "Interpolations"

In index.html



<p> {{ function_name() }}</p>





Use "data" property into "methods"

Basically we need to use variable into methods for that we just need to use "$this" keyword.



const app = Vue.createApp({
data(){
return {
variable_name : "<h1> Hello this is value </h1>"
}
},
methods: {
function_name: function () {
$this.variable_name = "new value"
}
}
});
app.mount('#user-goal');





Github Practice Code






Tahsin-Ahmed52225
/
100days-with-Vue

An explosion of confetti as a Vue 3 component

https://vuejsexamples.com/an-explosion-of-confetti-as-a-vue-3-component/
An explosion of confetti as a Vue 3 component

The Web App that helps you to mange the Tech Communities

https://vuejsexamples.com/the-web-app-that-helps-you-to-mange-the-tech-communities/
The Web App that helps you to mange the Tech Communities

A Sticky Slider Example For Vue

https://vuejsexamples.com/a-sticky-slider-example-for-vue/
A Sticky Slider Example For Vue

Add a Github corner to your project page, This GitHub corner for Vue 3.0+ component

https://vuejsexamples.com/add-a-github-corner-to-your-project-page-this-github-corner-for-vue-3-0-component/
Add a Github corner to your project page, This GitHub corner for Vue 3.0+ component

A portfolio for developers with a blog powered by Notion

https://vuejsexamples.com/a-portfolio-for-developers-with-a-blog-powered-by-notion/
A portfolio for developers with a blog powered by Notion

Portfolio starter theme for Gridsome and Forestry

https://vuejsexamples.com/portfolio-starter-theme-for-gridsome-and-forestry/
Portfolio starter theme for Gridsome and Forestry

How to create dynamic input using Vue

https://dev.to/snehalk/how-to-create-dynamic-input-using-vue-2hf7
Hello Readers,
In this blog, I am going to show you, how we can create dynamic input using vuejs.
First, create a component and name it as DynamicInput.vue and add the below code.



<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div class="w-full mt-4 p-10">
<button
type="button"
class="flex justify-start ml-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
@click="addMore()"
>
Add More
</button>
<div v-for="(course, index) in courses" :key="index">
<div class="flex justify-start ml-2 mt-4">
<input
v-model="course.courseName"
class="w-full py-2 border border-indigo-500 rounded"
/>
<button
type="button"
class="ml-2 rounded-md border px-3 py-2 bg-red-600 text-white"
@click="remove(index)"
v-show="index != 0"
>
Remove
</button>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
courses: [
{
courseName: "",
},
],
};
},
methods: {
addMore() {
this.courses.push({
courseName: "",
});
},
remove(index) {
this.courses.splice(index, 1);
},
},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>


Now add this component into App.vue file as below.



<template>
<div id="app">
<DynamicInput msg="Example of Dynamic Input" />
</div>
</template>

<script>
import DynamicInput from "./components/DynamicInput";
export default {
name: "App",
components: {
DynamicInput,
},
};
</script>

<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>


I have installed tailwind CSS to styling you have to install it.
If you like my post please follow me to get more blog posts.


.ltag__user__id__672647 .follow-action-button {
background-color: #9f0b46 !important;
color: #ffffff !important;
border-color: #9f0b46 !important;
}








Snehal Follow


Software Developer by Profession, mostly works in Laravel | Vue JS | Nuxt JS | PHP | Javascript | InertiaJS.



For more details you can refer below codesandbox.



Happy Reading. 🦄 ❤️

Tracing Squares to Detect
Hand Stability

https://ranashreyas.medium.com/tracing-squares-to-detect-hand-stability-e36faf70ca12?source=rss------vuejs-5
15th August, 2021Continue reading on Medium »

Plugins in Vue JS | How to create your own.

https://medium.com/@toakshay.official/plugins-in-vue-js-how-to-create-your-own-88f900b62f6d?source=rss------vuejs-5
So before starting let me tell you what plugins are in Vue JS and how can you benefit with them.Continue reading on Medium »

How to Add Chatbot in Vue.js Apps

https://medium.com/js-dojo/how-to-add-chatbot-in-vue-js-apps-d446e2111cbe?source=rss------vuejs-5
In this post, we will be learning how to add chatbot in Vue.js apps. Vue.js is an open-source JavaScript framework for building user…Continue reading on Vue.js Developers »

VSCode:How to Clone the vue-upload-drop-image from Github and Run it

https://paulxiong.medium.com/vscode-how-to-clone-the-vue-upload-drop-image-from-github-and-run-it-3bf61d0b9b4e?source=rss------vuejs-5
https://github.com/paulxiong/vue-upload-drop-images.gitContinue reading on Medium »

Options Api vs. Composition Api pada Vue.js

https://fhaladin-dev.medium.com/options-api-vs-composition-api-pada-vue-js-7df4dc8e9918?source=rss------vuejs-5
Composition api merupakan salah satu fitur baru yang hadir di vue.js 3 sebagai alternatif dari options api, composition api ini sendiri…Continue reading on Medium »