آموزش ساخت یك سایت كوچك TODO با استفاده از Vue.js و ASP.NET Core:
در این آموزش با استفاده از تكنولوژی های ذكر شده یك وب سایت ساده برای ثبت، نمایش، حذف و ویرایش آیتم های TODO ساخته خواهد شد.
لینك مقاله :
https://scotch.io/tutorials/build-a-secure-to-do-app-with-vuejs-aspnet-core-and-okta

#Vue_Js #ASP_Net_Core #Okta

@WebDevelopmentReferences

شروع كار با VueJs:

https://www.sitepoint.com/getting-started-with-vue-js/

#Vue_Js #Getting_Started

@WebDevelopmentReferences

ارسال فرم به كنترلر اكشن در دات نت كور توسط Vue:
برای ارسال اطلاعات فرم به اكشن متد در دات نت كور توسط Vue باید از كتابخانه Axios استفاده كنیم.
اگر با جی كوئری كار كرده باشید احتمالا از ایجكس استفاده كرده اید.
یك نكته را به خاطر داشته باشید (در استفاده از axios) در پارامتر ورودی اكشن متد باید حتما از خاصیت FormBody استفاده كنید یعنی:
public IActionResult GetData([FormBody] User user)
{
return View();
}
اگر خاصیت فرم بادی قرار داره نشود اطلاعات دریافت نمی شوند!
در مطلب بعدی یك مثال ساده برای ارسال نام و نام خانوادگی به اكشن متد را توضیح خواهم داد.

#axios #DotNetCore #Vue_Js

@WebDevelopmentReferences

مثالی از ارسال اطلاعات به اكشن متد در دات نت كور توسط Vue و Axios:
در این مثال می خواهیم نام و نام خانوادگی را از كاربر دریافت كرده و به اكشن متد خاصی ارسال كنیم.
ابتدا كتابخانه های Vue و Axios را به صفحه اضافه میكنیم، همینطور فایل جی اس خودمان:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/app/app.js"></script>
فرم مورد نظر هم به صورت زیر خواهد بود:
<div id="app">

<input name="firstName" v-model="firstName" placeholder="First Name"/>
<br/>
<input name="lastName" v-model="lastName" placeholder="Last Name"/>
<br/>
<button v-on:click="sendToServer">Submit</button>

</div>
فایل app.js كه كدهای مورد نیاز است را به صورت زیر می نویسیم:
new Vue({

el: "#app",
data: {
firstName: "",
lastName: ""
},
methods: {
sendToServer: function () {

axios({
method: 'post',
url: '/home/index',
data: {
"firstName": this.firstName,
"lastName": this.lastName
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

}
}

});

دقت كنید، یك متد داریم با نام sendToServer كه وظیفه ارسال اطلاعات به سرور و دریافت پاسخ را به عهده دارد.
حالا یك ویو مدل نیاز داریم كه به صورت زیر تعریف میكنیم:

namespace VueJsToNetCore.ViewModel
{
public class User
{
public string LastName { get; set; }
public string FirstName { get; set; }
}
}
و در آخر اكشن متد مورد نظر كه وظیفه دریافت اطلاعات ارسالی و اعمال عملیات خاص روی آن را دارد به صورت زیر می باشد:


[HttpPost]
public IActionResult Index([FromBody]User user)
{
return View();
}
این اكشن در مثال ما در كنترلری با نام Home قرار دارد.

#Vue_Js #ASP_Net_Core #axios

@WebDevelopmentReferences

چند دلیل برای یاد گیری Vue:
1. مستندات این فریم ورك بسیار عالی ارائه شده است.
2. برای شروع نیازی نیست نرم افزار خاصی نصب كنید.
3. برای استفاده نیازی نیست از پكیج منیجرها استفاده كنید و مانند جی كوئری تنها یك فایل به پروزه اضافه میكنید.
4. نیاز نیست حتما از سبك خاصی استفاده كنید حتی می توانید از جاوا اسكریپت خالص هم استفاده كنید.
5. هم مانند ری اكت و انگولار است و هم مانند ناك اوت شما را سریع به هدف می رساند.
6. یك فریم ورك پیش رونده است و بر اساس نیاز شما امكانات بیشتری را در اختیار شما می گذارد.
#Vue

http://t.me/WebDevelopmentReferences

✏️ VueJS and Data Binding:

📄 As you know we can show data in page with {{}}, but what about binding data to an element attribute like href?

For example we have a websiteTag data like this:
websiteTag: 'http://sadin.ir'
and we want to bind this data to an anchor tag.

If you try to use like this, you will see in href attribute 'websiteTag', but we want to see value of websiteTag (http://sadin.ir).

We should use v-bind for binding data to attributes:
<a v-bind:href="websiteTag">My Site</a>
Also we can use shortcut :href :
<a :href="websiteTag">My Site</a>
If you run index.html you can see http://sadin.ir is binding to href attribute of link.

Same way you can bind data to any other attributes, for example I want to show value of name in textbox:

In app.js:
name: 'Kamran',
websiteTag: 'http://sadin.ir'

In index.html:
<input type="text" v-bind:value="name'/>
<a href="websiteTag">MySite<a/>

Codes are available here:
https://codepen.io/A-Programmer/pen/oqryVx
https://gist.github.com/A-Programmer/6ff00e510a46475b0e719686c49cd495

🗓 in the next tip i'm going to show you how to bind html element to page.

#Vue #Data_Binding #Vue_Data_Binding

http://t.me/WebDevelopmentReferences

How HTML element can be bind to page by vue?

In last tip, I wrote about data binding to attributes, what about binding a html element to page? For example I want to get my site link from data called websiteHtmlTag.

I have a data called websiteHtmlTag and I want to render its value on my page:

websiteHtmlTag: '<a href="http://sadin.ir">My Site</a>

So lets try the latest way:

{{websiteHtmlTag}}

This will show output exactly same as its value, but what I want is showing rendered result! A hyper link with My Site text that links to http://sadin.ir .

First we create a p tag and then we should bind websiteHtmlTag to this element:

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

Now vue know in this p tag we want that html.
So if we run the page, we will see the right result.

Codes are available on Codepen and Github gist:

🌐 CodePen: https://codepen.io/A-Programmer/pen/EEBGvo

🌐 Github gist: https://gist.github.com/A-Programmer/3d717eec54199a780c1620746b6a1f6a

#Vue #Data_Binding #Vue_Data_Binding #Vue_Html_Binding

http://t.me/WebDevelopmentReferences

جلسه اول از دوره "ویو از ابتدا تا پیشرفته"

در این ویدئو با ویو آشنا می شویم، دلیل انتخاب ویو رو میفهمیم، ابزار مورد نیاز رو میشناسیم، ویو رو نصب می كنیم و آماده كار با ویو خواهیم شد.
كدهای پروژه رو می تونید از گیت هاب بنده دانلود كنید:
برای هر قسمت یك برنچ در نظر گرفته شده، با انتخاب اون برنچ شما به فایل های اون جلسه دسترسی خواهید داشت، مثلا اگر برنچ 05 رو انتخاب كنید فایل ها و تغییراتی كه تا جلسه 05 اعمال شده رو خواهید دید. همینطور با استفاده از دكمه clone or download می تونید پروژه رو دانلود كنید.
https://github.com/A-Programmer/VueForBegginers

#Vue #Vue_01 #Learning_Vue

http://t.me/WebDevelopmentReferences