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、参数绑定:参数名称

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

相关推荐
aoxiang_ywj11 分钟前
【Linux】内核驱动学习笔记(二)
linux·笔记·学习
WhyNot?1 小时前
深度学习入门(三):神经网络的学习
深度学习·神经网络·学习
Moonnnn.1 小时前
运算放大器(五)电压比较器
笔记·学习·硬件工程
揣晓丹1 小时前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源
顽疲2 小时前
从零用java实现 小红书 springboot vue uniapp (11)集成AI聊天机器人
java·vue.js·spring boot·ai
@BreCaspian2 小时前
Windows强制删除任何你想删除的文件和文件夹
windows
KangkangLoveNLP2 小时前
手动实现一个迷你Llama:使用SentencePiece实现自己的tokenizer
人工智能·深度学习·学习·算法·transformer·llama
派小汤2 小时前
Springboot + Vue + WebSocket + Notification实现消息推送功能
vue.js·spring boot·websocket
sukalot2 小时前
Windows 图形显示驱动开发-WDDM 2.4功能-基于 IOMMU 的 GPU 隔离(二)
windows·驱动开发
浪淘沙jkp3 小时前
大模型学习二:DeepSeek R1+蒸馏模型组本地部署与调用
学习·deepseek