美文网首页
前端基础vue-HelloWorld

前端基础vue-HelloWorld

作者: 让你变好的过程从来都不会很舒服 | 来源:发表于2024-01-03 23:34 被阅读0次

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不
同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上
手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库
结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
官网:https://cn.vuejs.org/
参考:https://cn.vuejs.org/v2/guide/
Git 地址:https://github.com/vuejs
尤雨溪,Vue.js 创作者,Vue Technology 创始人,致力于 Vue 的研究开发

入门案例

1)、安装
官网文档提供了 3 中安装方式:

  1. 直接 script 引入本地 vue 文件。需要通过官网下载 vue 文件。
  2. 通过 script 引入 CDN 代理。需要联网,生产环境可以使用这种方式
  3. 通过 npm 安装。这种方式也是官网推荐的方式,需要 nodejs 环境。
    本课程就采用第三种方式

HelloWorld

在 hello.html 中,我们编写一段简单的代码。
h2 中要输出一句话:xx 非常帅。前面的xx是要渲染的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}},非常帅</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

        let vm  = new Vue({
            el:"#app",
            data:{
                name:"张三"
            }

        });

    </script>


</body>
</html>

浏览器安装 vue-devtools 方便调试

 将软件包中的 vue-devtools 解压。
 打开 chrome 设置->扩展程序
参考:https://blog.csdn.net/xm1037782843/article/details/127708733

相关文章

  • 前端基础进阶系列

    前端基础进阶(一):内存空间详细图解前端基础进阶(二):执行上下文详细图解前端基础进阶(三):变量对象详解前端基础...

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

  • 二、flask开发基础与入门

    一、web开发基础 1、前端知识 前端开发基础: HTML CSS JavaScript 前端常用的库与框架: b...

  • 【350页】前端校招面试题及解析大全

    前言 前端校招面试题主要内容包括html,css,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据...

  • web前端入门基础

    web前端基础笔记 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了...

  • HTML基础学习笔记

    原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...

  • 学习Vue框架之前,要有JavaScript的知识储备

    前端三剑客知识储备(有关前端的专题) ☑ HTML基础知识 ☑ CSS基础知识 ☑ JavaScript5基础知识...

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • 学习前端需要掌握什么基础?

    学习前端需要掌握什么基础?前端基础包含HTML、CSS层叠样式表、JavaScript、HTML5、CSS3、jQ...

网友评论

      本文标题:前端基础vue-HelloWorld

      本文链接:https://www.haomeiwen.com/subject/uhpvndtx.html