vue2学习笔记2-老规矩，从Hello World开始，了解Vue实例和模板

已于 2024-07-14 11:15:08 修改
阅读量1k 收藏 19
点赞数 15
分类专栏： Vue 文章标签： 学习 笔记
于 2024-07-14 11:01:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/l_q_l/article/details/140361196
版权

想要实现的效果：在页面上展示“Hello，World”字符串

1、准备一个【容器】div

想要把“Hello，World”放置在页面上，首先需要准备一个HTML的块级元素div，来承接内容。所以，我们先在<body>中定义<div>：

2、传统实现方式

直接将想要展现的内容，写在html中，如下：

右键，选择open with Live Server，便可看到想要的效果了。

但是，这种方式的缺点很明显，这段文字是个hardcode，当我想要修改时，必须来这里修改，而且

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue2学习笔记4 - 深入学习模板语法：插值语法和指令语法
l_q_l的专栏
07-15 940
1、插值语法：功能：用于解析标签体内容。写法：{{xxxx}}，其中xxxx是js表达式，且可以直接读取到data中的所有属性。2、指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）示例：v-bind:href="xxx"或简写为 :href="xxx"，xxx同样要写js表达式。且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-????。
vue2学习笔记3 - 开发环境知识补充：live server简介
l_q_l的专栏
07-14 606
Live Server是一款方便的Web开发工具，可以在开发过程中提供实时预览和自动刷新的功能。无需手动刷新网页，开发者可以实时查看对代码的修改，并快速验证效果，但是不能用于部署最终站点。
vue helloworld
01-20
1安装node 环境 https://www.jianshu.com/p/dd7fbb101fc0 这里需要本地的文件中~ 用户目录下使用淘宝mirror. 按照提示vuｅ　程序，ｎｐｍ　ｒｕｎ　ｓｅｒｖｅ 不是ｓｅｒｖｅｒ． 2更改对应的文件 2.1.参考博文：  hello wolrd 的例子： https://blog.youkuaiyun.com/qq_38738510/article/details/101013380 查看有无问题： 新版本的有ｖｕｅ编译模式的区别。 乱码问题： 前天使用utf- 8  模式处理 3.相关demo学习 https://github.com/TigerChain/
Vue2.Hello World
强我强国
01-04 534
Vue2，写一个Hello world
2.2Vue2的模板语法
最新发布
GQL___的博客
03-20 907
什么是指令？有什么作用？  指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
vue2之helloworld
richest_qi的博客
01-20 1059
直接下载vue的开发版本（vue.js）和生产版本（vue.min.js），通过<script>引入，因此可使用全局变量Vue。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
vue入门之Hello World
花&败
12-12 1476
一：简介 是一个构建用户界面的框架 是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定 数据驱动和组件化的前端开发 通过简单的API就能实现响应式的数据绑定和组合的视图组件 兼容性 Vue不支持IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。 但它支持所有兼容 E...
Vue-Hello Wolrd
qq_31387691的博客
03-31 1092
上述步骤就是对Vue项目的环境搭建，接下来我们就可以使用 vue-cli 脚手架工具进行Vue项目的构建了。以上就是Vue项目的创建和基本使用，后续将会继续学习Vue的相关知识，并将学习过程中的收获和心得总结分享出来。项目启动后会返回一个地址，将地址拷贝到浏览器地址栏，出现vue官网的欢迎页面，则一个Vue项目构建完成了。（2）创建项目过程中，需要对项目名称、描述、作者等信息进行确认或者填写，案例如下。（2）查看 vue-cli 版本号，检查是否安装成功。（1）cd命令进入到项目的路径下，再执行命令。
Flask备忘录
weixin_51334923的博客
11-02 1936
此文仅仅作为学习本人Flask途中的学习笔记以及备忘录！！！！！ 代码格式粘贴复制可能格式出错emm，自己知道就好了！！ 无图，慢慢看！！挺枯燥的学习笔记，做个网络备份！！！ 目录 一.服务架构： 二.Flask是什么？ 01. 微框架 02. 特点 03. 组成 04.常用库： 三.Flask环境搭建： 01.Windows虚拟环境直接上： 02.Conda环境： 03.Linux环境： 四.Flask工程实践： 01.万物之源Hello World： 02.请求处理：
Vue实现Hello World
qq_64628470的博客
09-26 558
Vue实现Hello World
Vue(一) HelloWorld
GyaoG的专栏
03-29 1198
Vue 一、Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 二、Vue 最简单的Hello World程序步骤 1、去Vue官网 Vue官网：https://cn.vuejs.org/ 2、获
Vue写hello world
怪只怪满眼尽是人间烟火
05-28 790
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;hello world&lt;/title&gt; &lt;script type="text/javascript" src="js/vue.js"
vue3之hello world
weixin_68376171的博客
01-20 1687
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起步_hello world
进击的小斌斌
05-21 2145
vue中文官方文档 https://cn.vuejs.org/打开vscode编辑器，创建index.html文件，编辑：原始hello world：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&amp
Vue起步 - helloWorld
肉团子的博客
07-23 388
背景 开发工具：Visual Studio Code 1.36.1 Vue版本：2.x HelloWorld 是不是没有代码提示呀～是不是不知道怎么在浏览器上运行写的html代码呀～当你遇到各种问题以为是IDE不好使的时候，那你应该上网搜一下是不是有插件可以辅助，【vscode常用插件推荐 ：https://www.cnblogs.com/karthuslorin/p/8577224.ht...
创建第一个Vue2项目-----HelloWorld
Adios_0403的博客
12-12 526
如何创建第一个Vue项目
Vue之Hello World！
sun0322
10-25 3794
目录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.其它
Vue Hello world
yin4302008的专栏
01-26 228
现在我们来写一个vue的HelloWord 代码如下： &lt;div id="app"&gt; &lt;!--绑定vue对象中的mesage对象--&gt; &lt;h1&gt;{{message}}&lt;/h1&gt; &lt;/div&gt; &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vu..
vue hello world
xu990128638的专栏
05-20 308
vue hello world 1. 依赖环境 Node.js 8.9+ npm (安装nodejs的时候自动安装了npm) 2. 官网文档 https://cn.vuejs.org/v2/guide/ 2.1 Vue.component 缺点 全局定义：强制要求每个component 中的命名不能重复 字符串模板：缺乏语法高亮，在HTML有多行的时候，需要用丑陋的\ 不支持CSS：意味着当HTML 和JavaScript 组件化时，css明显被遗漏 没有构建步骤：限制只能使用html和ES5 JavaSc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值