vue学习之hello world

依赖引入

复制代码
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

Hello world 实现

复制代码
<html>
    <head>
        <style>

        </style>
    </head>


    <body>
        <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

        <div id = "app">{{msg}}</div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        msg: "hello geek!"
                    }
                }
            })
        </script>
    </body>

</html>
  • 给节点定义id,这样组件可以和指定节点进行绑定
  • Vue对象中的data节点,是对此实例数据的说明
  • 其中div中获取对象实例中定义的msg的值通过{``{}}来获取,这个叫做插值表达式

效果展示

按钮、todo列表

通过点击按钮获取输入框中的值,添加到todo列表中

  • 定义按钮、绑定方法

    <button @click="handleClick">添加</button>
    <script> new Vue({ el: '#app', data() { return { msg: "hello geek!", info: '' } }, methods: { handleClick() { console.log(this.info) } } }) </script>

input为输入框,需要通过获取输入框中的内容添加到todo列表中,通过参数绑定:v-model="info"进行绑定,在Vue对象中定义info属性,用来接收输入框的值
button绑定方法:@click = "handleClick",在Vue对象中定义方法列表,其中定义 handleClick 方法

复制代码
<ul>
	<li v-for="item in list">{{item}}</li>
</ul>

为将输入框的数据动态添加到todo列表中,使用v-for="item in list", 使用{``{item}}获取值,其中数据是从list中取的,所以需要在对象内定义list属性,是数组类型

复制代码
new Vue({
                el: '#app',
                data() {
                    return {
                        msg: "hello geek!",
                        info: '',
                        list: []
                    }
                },
                methods: {
                    handleClick() {
                        console.log(this.info)
                        this.list.push(this.info)
                    }
                }
            })

完整body如下:

复制代码
<body>
        <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

        <div id = "app">{{msg}}
            <div>
                <input type="text" v-model="info">
                <button @click="handleClick">添加</button>
            </div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>


        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        msg: "hello geek!",
                        info: '',
                        list: []
                    }
                },
                methods: {
                    handleClick() {
                        console.log(this.info)
                        this.list.push(this.info)
                    }
                }
            })
        </script>
    </body>

在点击方法内,将获取到的输入框的值添加到数组中

todo列表添加完成后清空

复制代码
handleClick() {
    if (this.info != '') {
        this.list.push(this.info)
        this.info = ''
    }
}

组件定义

如果<li v-for="item in list">{``{item}}</li>这种遍历场景很多的话,我们为了不希望每个地方都写一遍,所以将此进行封装和定义:

复制代码
Vue.component('todo-item', {
    props: ['item'],
    template: '<li class="item">{{item}}</li>'
})

// 在使用时
<todo-item v-for="item in list" :item="item"></todo-item>

Vue.component是注册一个名为todo-item的组件,props是用来接收参数的,这个参数是让template中使用的
:item="item"是将for遍历中的item进行绑定的,和props中定义的参数一致,如果props中定义的参数为:value,要给组件传值的话,就需要使用:value=""来进行传值

总结

  • 插值表达式
  • vue对象实例化,我们的数据都是在对象中定义,以及方法也是在其中定义
  • 属性绑定:v-model、循环遍历:v-for、参数绑定:参数名称

以上写法我们每次都要刷新页面,没有热刷新,下面我们即将使用热更新的方式进行开发和学习

相关推荐
前端大白话6 分钟前
Vue2和Vue3语法糖差异大揭秘:一文读懂,开发不纠结!
javascript·vue.js·设计模式
绅士玖11 分钟前
Vue.js 核心特性解析:响应式原理与组合式API实践
vue.js
灏瀚星空15 分钟前
从基础到实战的量化交易全流程学习:1.3 数学与统计学基础——概率与统计基础 | 基础概念
笔记·python·学习·金融·概率论
无敌的牛29 分钟前
AVL树的介绍与学习
数据结构·学习
【0931】40 分钟前
进程控制的学习
学习·操作系统
阿图灵42 分钟前
文章记单词 | 第48篇(六级)
学习·学习方法
宁建利1 小时前
树莓派学习专题<11>:使用V4L2驱动获取摄像头数据--启动/停止数据流,数据捕获,缓存释放
学习
阳光宅男@李光熠1 小时前
【质量管理】TRIZ(萃智)的工程系统进化法则
笔记·学习
Suckerbin1 小时前
pikachu靶场-敏感信息泄露
网络·学习·安全·网络安全
ghost1431 小时前
C#学习第19天:多线程
开发语言·学习·c#