vue学习之hello world

这篇具有很好参考价值的文章主要介绍了vue学习之hello world。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

依赖引入

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

Hello world 实现

<html>
    <head>
        <style>

        </style>
    </head>


    <body>
        <script src="https://unpkg.com/vue@2.6.10/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的值通过{{}}来获取,这个叫做插值表达式

效果展示

vue学习之hello world,vue.js,学习,windows

按钮、todo列表

通过点击按钮获取输入框中的值,添加到todo列表中
vue学习之hello world,vue.js,学习,windows

  • 定义按钮、绑定方法
<div>
     <input type="text" v-model="info">
     <button @click="handleClick">添加</button>
</div>

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

以上写法我们每次都要刷新页面,没有热刷新,下面我们即将使用热更新的方式进行开发和学习文章来源地址https://www.toymoban.com/news/detail-669738.html

到了这里,关于vue学习之hello world的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 自学WEB后端01-安装Express+Node.js框架完成Hello World!

    前端         前端开发主要涉及用户界面(UI)和用户体验(UX),负责实现网站的外观和交互逻辑。前端开发使用HTML、CSS和JavaScript等技术来构建网页,并通过各种工具和框架(如React、Vue.js、Angular等)来简化开发过程。前端开发关注于网页设计、布局、样式、动画效果以及

    2024年02月07日
    浏览(64)
  • 初识Vue 输出Hello World 及注意事项

    在我们还没接触Vue之前,我同学常说我可以直接在元素里输出JS的表达式吗?肯定是不太行。当我们接触vue.js后,这个想法成了现实。 每当我们学习一门新的语言或者框架时,我们都习惯打印一个“hello world”,在我们vue当中,我们如何打印,或使用呢?接下来让我为大家介

    2024年02月06日
    浏览(40)
  • C++并发编程学习01——hello concurrent world

    编译 gdb调试 管理线程的函数和类在 thread 中声明,而保护共享数据的函数和类在其他 头文件中声明 每个线程都必须具有一个初始函数(initial function),新线程的执行从这个函数开始。对于应用程序来说,初始线程是main(),但是对于其他线程,可以在 std::thread 对象的构造函数中

    2024年02月11日
    浏览(48)
  • 鸿蒙开发学习笔记1——真机运行hello world

    学习任何语言和框架的第一步,永远都是跑通熟悉的“hello world”,本文将介绍鸿蒙开发如何跑通“hello world”。 一、构建第一个ArkTS应用(fa模型) 说明:请使用DevEco Studio V3.0.0.601 Beta1及更高版本。下载链接:https://developer.harmonyos.com/cn/develop/deveco-studio 。 (1)创建ArkTS工程

    2024年02月12日
    浏览(42)
  • QT5学习教程一——Hello World例子

    一、打开 Qt Creator -文件-新建文件或项目-Application-Qt Widgets Application-选择,如图 1.1  图 1.2 将项目放到指定目录,便于管理。单击[下一步]  选择构建的环境,可以根据自己的配置来选择,本例子选择MSVC2015。MSVC是指微软的VC编译器。MinGW是指是Minimalist GNU on Windows的缩写。它是

    2023年04月16日
    浏览(34)
  • HarmonyOS鸿蒙学习基础篇 - 运行第一个程序 Hello World

    下载与安装DevEco Studio      古话说得好,“磨刀不误砍柴工”,对于HarmonyOS应用开发,我们首先得确保工具齐全。这就好比要进行HarmonyOS应用开发,我们需要确保已经安装了DevEco Studio,这是HarmonyOS的一站式集成开发环境(IDE)。      下面我们就以在Windows系统上安装DevEco

    2024年01月23日
    浏览(45)
  • <HarmonyOS第一课>1·运行Hello World【学习笔记+课后考核】

    其中详细如下: AppScope中存放应用全局所需要的资源文件。         在AppScope,其中有resources文件夹和配置文件app.json5。AppScoperesourcesbase中包含element和media两个文件夹          其中,element文件夹主要存放公共的字符串、布局文件等资源。media存放全局公共的多媒体资

    2024年02月11日
    浏览(47)
  • Visual Studio 2022 MASM x64汇编hello world以及调试(Console版 + Windows版)

    本文介绍使用Visual Studio 2022的MASM开发x64汇编程序hello world的环境配置和汇编代码,作为学习CPU指令的起点。分两个版本的hello world, 一个是console版本,另一个是windows版本。 首先安装visual studio community 2022,下载地址 https://visualstudio.microsoft.com/,安装时选择C++开发模块 安装好以

    2024年02月05日
    浏览(100)
  • 【Java】学习一门开发语言,从TA的Hello World开始

    欢迎来到《小5讲堂》 大家好,我是全栈小5。 这是《Java》序列文章,每篇文章将以博主理解的角度展开讲解, 特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对知识点的理解和掌握。 温馨提示:博主能力有限,理解水平有限

    2024年01月23日
    浏览(55)
  • ASM Java字节码操作框架入门学习 输出Hello World

    查看字节码信息 方法调用 invokestatic:用于调用静态方法。该指令会根据方法的类名、方法名和方法描述符进行方法查找和调用。 invokespecial:用于调用私有方法、构造方法和父类方法。该指令会根据方法的类名、方法名和方法描述符进行方法查找和调用。 invokevirtual:用于调

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包