آموزش vue JS : جلسه 7 - آشنایی و کار با keyboard event ها



visibility  
mode_comment   ۱۳

در این جلسه در مورد رویدادها صفحه کلید صحبت خواهیم کرد و با keyup آشنا خواهید شد و مثال های برای درک این موضوع خواهیم داشت . پس با ما همراه باشید . . .

info توجه

این مطلب یک جلسه از آموزش حرفه ای vuejs می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش حرفه ای vuejs

comment دیدگاه کاربران
مجید زارعی هوشیار replyپاسخ

سلام ….اقای نجاری خسته نباشید خوب بووود….
یه سوال داشتم?? اونم اینکه….واقعا این کلیدهای ترکیبی تو پروژه های واقعی کاربرد داره..؟?…بیشتر به خاطر این سوال شده برام که مگه اکثرا کارها تو رابط کاربری با کلیک انجام نمیشه……؟…و حدسی میزنم اینکه شاید این کلید های ترکیبی در ادمین یک سایت مورد استفاده قرار بگیره ?….ایا درسته؟

محمد نجاری

سلام . . .
بسته به نوع پروژه خودتون این تعیین میشه .مثلا برای رابط کاربر شاید بخواهید کاربر دکمه S رو زد یه سرچ بار براش ظاهر شه و یا تو سمت ادمین پنل با زدن دکمه خاصی صفحه خاصی بیاد و …
اگر در جای مناسب استفاده بشه میتونه خیلی مفید باشه و حس خوبی به کاربر بده.

موفق باشید

مجید زارعی هوشیار replyپاسخ

ببخشید یه سوال میخواستم بپرسم ……یادم رفت…..
همه رویداد ها که تو جاوا یا جی کوئری هستش در ویو جی اس هم میشه استفاده کرد؟

محمد نجاری

همه رویداد ها جاوا اسکریپت در تمام فریمورک های آن قابل دسترسی است و بعضا بیشتر و راحتر هم هست . در ویدیو Event Modifier ها و Event ها مشاهده کردید که چقدر راحت استفاده بردیم از این مباحث.

مجید زارعی هوشیار replyپاسخ

بله استاد ..ممنون …..باهاشونم کار کردم …..چون لیست رویداد هارو ندیدم …..به همبن خاطربرام سوال شد

Mr abbas replyپاسخ

سلام ممنون بابت جلسه 🙂
وای فونت کدا فانتزیه یکم ادم باید بیشتر دقت کنه .
ببخشید فصل اخر کد بزن و شکوفاشو یعنی چی؟
ی سوالم دارم فصل سوم با لاراول api مینویسیم؟
ممنون

محمد نجاری

سلام سعی میشه فونت ها رو بزرگ کنیم یا عوضش کنیم.
در مورد کد بزن و شکوفا شو .اون صرفا عنوانی برای انگیزه به دوستان.در مورد لاراول هم ما کد php نمیزنیم .فقط از یک پروژه که نوشته شده با لاراول api میگیریم و اموزش خواهیم دید که چطور vue js رو در لاراول استفاده کنیم.

Saeid Yaghoobi replyپاسخ

میشه یه لینکی اینجا قرار بدی که همه این رویداد هارو با تعریف و کاراییشون داشته باشه ؟

محمد نجاری

سلام . . .
این لینک خدمت شما .

Saeid Yaghoobi replyپاسخ

جناب نجاری لینکی قرار ندادید !!!!!

Saeid Yaghoobi replyپاسخ

ببخشید متوجه شدم ممنون

محمد نجاری

خواهش میکنم.

علی رضوی replyپاسخ

سلام من اومدم یک تمرین چالش واسه خودم تنظیم کردم که با کمک دکمه ها میتونم پوزیشن جعبه مو تغییر بدم

کد در زیر این پیام هستش میخام دیگه با فشردن دکمه های بالا پایین چپ راست تغییر پوزیشن نمیدونم چجوریه میشه کمک کنید ؟

تا دانسته های این جلسه اینو درست کردم میشه کمک کنید با چیزایی گفتید در این قسمت چکار کنم؟

<!DOCTYPE html>
<html>
<head>
    <title>KeyBoard Click</title>
    <style>
        .box {
            height: 50px;
            width: 50px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click.38="topBox">Up</button>
    <button @click.40="bottomBox">Down</button>
    <button @click.39="leftBox">Right</button>
    <button @click.37="rightBox">left</button>


    <div class="box" v-bind:style="styleBox">


    </div>


</div>


<script type="text/javascript" src="../common/vue.js"></script>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            posLeft: 0,
            posTop:0,
            styleBox: {
                left: ”,
                top: ”
            }

        },
        methods: {
            leftBox() {
                this.posLeft += 5;
                return this.styleBox.left = this.posLeft + "px";

            },
            rightBox() {
                this.posLeft -= 5;
                return this.styleBox.left = this.posLeft + "px";

            },
            bottomBox() {
                this.posTop -= 5;
                return this.styleBox.top = this.posTop + "px";

            },

            topBox() {
                this.posTop += 5;
                return this.styleBox.top = this.posTop + "px";

            },
        }

    });
</script>
</body>
</html>
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.