Vue起步_hello world

最新推荐文章于 2024-01-20 20:41:59 发布
最新推荐文章于 2024-01-20 20:41:59 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： Vue学习笔记 文章标签： vue 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17832583/article/details/80391166
版权

vue中文官方文档 https://cn.vuejs.org/

打开vscode编辑器，创建index.html文件，编辑：


原始hello world：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>

    <script>
        var dom = document.getElementById('app');
        dom.innerHTML = 'hello world'
    </script>
</body>

</html>

打开扩展工具：


安装view in brower,然后在index.html上右键就会出现View in Browser选项


通过vue实现 hello world:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!-- <script src="/assets/js/vue.js"></script> -->
    <script src="E:\Code\Vue\assets\js\vue.js"></script>
</head>

<body>
    <div id="app">{{content}}</div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                content: 'Hello World'
            }
        })
    </script>
</body>
</html>

创建Vue实例，el表示实例负责管理的一个区域，#app指的是id等于app的div标签。

{{}} 插值表达式

data定义数据


添加div：

< div >{{content}} </ div >


Vue实例只接管了app这个dom标签下的content


实现隔两秒钟改变Hello World内容：

< script >
var app = new Vue({
el: '#app',
data: {
content: 'Hello World'
}
})

setTimeout( function () {
app. $data. content = 'byte world'
}, 2000)
< / script >



小斌斌阿
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HelloWorld.vue
03-25
本文件是flv+express+ffmpeg脚手架，vue项目中的HelloWorld.vue。如需要下载另外一个express(index.js)文件请查看我的资源。自行下载。代码的使用，具体看文件中的注释。 单独的文件是不能运行的，生成对应的项目之后，替换同名文件即可
Vue-Hello Wolrd
qq_31387691的博客
03-31 840
上述步骤就是对Vue项目的环境搭建，接下来我们就可以使用 vue-cli 脚手架工具进行Vue项目的构建了。以上就是Vue项目的创建和基本使用，后续将会继续学习Vue的相关知识，并将学习过程中的收获和心得总结分享出来。项目启动后会返回一个地址，将地址拷贝到浏览器地址栏，出现vue官网的欢迎页面，则一个Vue项目构建完成了。（2）创建项目过程中，需要对项目名称、描述、作者等信息进行确认或者填写，案例如下。（2）查看 vue-cli 版本号，检查是否安装成功。（1）cd命令进入到项目的路径下，再执行命令。
「网页开发｜前端开发｜Vue」01 快速入门：快速写一个Vue的HelloWorld项目
过美好生活，做高效程序员
08-22 3165
本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。
前端框架Vue（概述，特点，安装，helloWorld，模板语法，指令，组件）
qq_53677566的博客
12-28 1万+
这里写目录标题Vue什么是Vue.js?Vue.js优点Vue安装第一个Vue demo模板语法Vue指令Vue生命周期**Vue组件** Vue 什么是Vue.js? Vue(读音 /vjuː/，类似于 view())是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue的核心库之关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。 ​ Vue.js是前端的主流框架之一，和Angular.js，React.js,并成为前端三大主流框架 Vue.js优点
Vue 环境搭建和 Hello world
Errol's Blog
03-22 2321
vue环境搭建和 hello world
Vue3版本HelloWorld
08-02
Vue3版本HelloWorld，可在本地浏览器运行测试学习。
vue3_dev_tools.crx
12-19
vue3_dev_tools插件
vue helloworld
01-20
hello wolrd 的例子： https://blog.csdn.net/qq_38738510/article/details/101013380 查看有无问题： 新版本的有ｖｕｅ编译模式的区别。 乱码问题： 前天使用utf- 8 模式处理 3.相关demo学习 ...
vue3_devtools.zip
11-08
vue3谷歌调试工具
vue_hello
03-20
vue_hello
vue3之hello world
最新发布
weixin_68376171的博客
01-20 1317
App.vue文件：看上去就是把html、css、javascript前端的这三个部分放在一起用一个vue组件文件实现前端。tsconfig.json中"extends": "@vue/tsconfig/tsconfig.web.json"标红。运行后它会根据env.d.ts文件去安装相关模块依赖，生成node_modules文件。main.js：程序入口文件，整个程序中最先执行的文件。在 main.ts 中，我们需要先引入相关的模块。相关的依赖，运行下面命令安装。APP.vue：唯一的根组件。
Vue——HelloWorld，对vue首个项目的简单理解
TIANQIcode
03-04 6318
0、写在前面 作为一个前端小白，第一次接触vue，今天简单了解了一下基于vue文件的组件以及路由的简单流程，如有错误，还请指出。 1、项目总览 1.1、项目目录 目录/文件 说明 assets 放置一些图片，如logo等。 components 放置了一个组件 router 放置路由JavaScript文件：index.js views 放置一些视图组件 App....
Vue入门——用Vue创建一个HelloWorld
weixin_44493195的博客
06-01 3156
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统！ 如何创建HelloWorld程序 Step1：创建一个id为app的div标签 <div id="app"></div> Step2：在div当中用左右为双括号的方式声明一个变量message。 <div id="app"> {{message}} </div> 上述两步是vue.js最常见的一种文本查值的方式。 Step3：在sricpt脚本中创建vue实例（对象
vue入门之Hello World
花&败
12-12 1302
一：简介 是一个构建用户界面的框架 是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定 数据驱动和组件化的前端开发 通过简单的API就能实现响应式的数据绑定和组合的视图组件 兼容性 Vue不支持IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。 但它支持所有兼容 E...
Vue(1) 新手入门教程——helloworld(表达式，指令)
郑清
12-09 7019
Vue：渐进式JavaScript框架 如何安装使用？？ -->官网下载vue.js然后在自己的项目中引入https://cn.vuejs.org/v2/guide/installation.html <!--通过外链方式引入vue.js 注意：Vue就是一个全局变量--> <script type="text/javascript" src="js/v...
Vue之Hello World！
sun0322
10-25 2983
目录1.简介1.1.Vue介绍1.2.Vue相关1.3.帮助文档2.安装2.1.管理员启动cmd，执行npm install vue命令2.2.继续安装，执行cnpm install vue@2命令2.3.查看安装信息，执行 npm info vue 命令2.4.安装之后，vue.js的位置2.5. （据说）不安装时，可以在线引用，不过不好用3.代码4.运行效果5.更多代码5.1 function 定义 与 编写5.2修改添加DOM元素 （v-html）5.3.SpringBoot + VUE6.其它
从hello，world小案例开始Vue的学习
m0_47370714的博客
06-13 105
有开发版本和生产版本，我们在日常学习和开发时选择开发版本即可。
Vue--HelloWorld实现原理
热门推荐
DR.马 的博客
03-14 1万+
  HelloWorld项目的搭建详细步骤请看：Vue安装搭建点这里 首先，最终的界面是有两个部分组成的，一个是logo图片、一个是helloworld大家可能有很多问题：比如我们在HelloWorld 中只写了helloworld，图片哪里来的呢？这两个怎么组合在一起的？。。。。下面我们来了解一下src中其他的文件，心中疑惑自然会解除：1.App.vue &lt;template&gt; &...
vue脚手架输出helloworld
07-27
你可以使用 Vue CLI 来创建一个 Vue 项目，并输出 "Hello, World!"。 首先，确保你已经安装了 Node.js 和 npm。然后，按照以下步骤来创建和运行一个简单的 Vue 项目： 1. 打开命令行工具，在你想要创建项目的文件夹中运行以下命令来安装 Vue CLI： ``` npm install -g @vue/cli ``` 2. 创建一个新的 Vue 项目。在命令行中运行以下命令： ``` vue create my-project ``` 这将提示你选择一些配置选项，你可以选择默认值或根据需要进行自定义配置。 3. 进入项目文件夹： ``` cd my-project ``` 4. 启动开发服务器： ``` npm run serve ``` 5. 在浏览器中打开 http://localhost:8080/，你将看到一个默认的 Vue 欢迎页面。 6. 打开 `src/App.vue` 文件，将其中的内容替换为以下代码： ```vue <template> <div> <h1>Hello, World!</h1> </div> </template> ``` 7. 保存文件后，浏览器会自动刷新，并且你将看到 "Hello, World!" 的输出。 这样，你就成功输出了 "Hello, World!"。你可以在 `src/App.vue` 文件中进行更多的修改和实验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值