为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第1天 编写TodoList小功能,了解循环和双向绑定

标签:
Vue.js

课程名称:2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节:1-5 编写TodoList小功能,了解循环和双向绑定 

主讲老师:Dell


课程内容:

今天学习的内容包括: Vue 的点击事件,逻辑判断,双向绑定。

知识点:

    1. v-on: <event-type> = "<func name>"`, 绑定一个页面事件,事件触发时执行相关函数。比如 vue 的点击事件 vue-on:click=""    
    2. v-for="(item, index) of list"`,循环遍历 list 数组中的元素和索引    
    3.`v-model="inputValue"`, 可以让数据和 input 输入框进行数据双向绑定
示例代码:
<div id="root"></div>
<script>
    Vue.createApp({
        data(){
            return {
                list:['hello','world','dell','lee'],
                inutValue:''
            }
        },
        methods:{
            handleAddItem(){
                this.list.push(this.inutValue)
            }
        },
        template:
            `<div>
                <input v-model="inutValue"/>
                <button v-on:click="handleAddItem">增加</button>
                <ul>
                    <li v-for="(item,index) in list">{{item}}{{index}}</li>
                </ul>
            </div>`
    }).mount('#root')
</script>

课程收获:

今天学习了2022持续升级 Vue3 从入门到实战 掌握完整知识体系》这门课。这门课是暑期买的,只看了几节暂时先放下了。之前学完了七月老师的《微信小程序入门》,九月争取半月内学完这门关于 Vue 的课程,学无止境,勇攀高峰。向全栈工程师发展,最近多学些前端知识。

今日课程学习时间大约花费 8 分钟。

https://img1.sycdn.imooc.com//6315f0810001743c19160934.jpg


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消