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

دسته بندی: آموزش
زمان مطالعه: 1 دقیقه
۰۱ اردیبهشت ۱۳۹۷

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

:: توجه

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

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

چه امتیازی به این مقاله می دید؟
نویسنده
کارشناس و فارغ التحصیل مهندسی نرم افزار،برنامه نویس BackEnd سون‌لرن،یک گیک، 5 سال سابقه برنامه‌نویسی فرانت اند و بک اند.مسلط به زبان های Ruby,php,java,javascript و ... . علاقه مند به Clean Code و مقیاس‌پذیری وب

جلسات دوره

نظرات کاربران

علی رضوی

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

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

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

<!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>
Saeid Yaghoobi

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

محمد نجاری

خواهش میکنم.

Saeid Yaghoobi

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

Saeid Yaghoobi

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

محمد نجاری

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

Mr abbas

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

محمد نجاری

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

مجید زارعی هوشیار

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

مجید زارعی هوشیار

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

محمد نجاری

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

مجید زارعی هوشیار

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

محمد نجاری

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

موفق باشید

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل