前端基础vue-HelloWorld
2024-01-03 本文已影响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 中安装方式：
- 直接 script 引入本地 vue 文件。需要通过官网下载 vue 文件。
- 通过 script 引入 CDN 代理。需要联网，生产环境可以使用这种方式
- 通过 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
