0
点赞
收藏
分享

微信扫一扫

vue 快速入门 系列 —— 初步认识 vue

伽马星系 2022-03-18 阅读 77



其他章节请看:

​​vue 快速入门 系列​​


初步认识 vue

vue 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的​渐进式框架​。

所谓渐进式,就是你可以一步一步、有阶段的使用 vue,不必一开始就使用所有的东西。

命令式框架 vs 声明式框架

jQuery 是​命令式​操作 DOM 的前端框架。比如点击一个​​新增​​​按钮,需要出现一个录入信息的弹框,在 jQuery 中,我们需要在​​新增​​按钮被点击的时候,发出一个命令,让录入信息的弹框显示。随着交互越来越复杂,代码中会有相当一部分的代码是在操作 DOM,不好维护的问题也就出现了。

现在主流的框架 vue、angular 和 react 都是​声明式​操作 DOM 的框架。所谓声明式,就是我们只需要描述状态与 DOM 之间的映射关系,就可以将状态渲染成视图。状态到视图的转换,框架会帮我们做,不需要我们手动去操作 DOM。我们只需要关注状态的维护,而不用再关心 DOM 的操作。

hello-world

直接用 script 的方式引入 vue,开始我们的第一个例子。

// 新建 demo/1.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 模板将会替换挂载的元素。最后显示的是 section,而不是 div -->
<div id='app'></div>
<script type="text/x-template" id="tpl">
<section>
{{ message }}
<p v-if="seen">现在你看到我了</p>
</section>
</script>

<script>
var app = new Vue({
el: '#app',
// 模板。描述状态与 DOM 之间的关系。
template: '#tpl',
// 状态
data: {
message: 'Hello Vue!',
seen: true
}
})
</script>
</body>
</html>

Tip​:笔者使用 anywhere 来启动一个服务器。通过 ​​npm install anywhere --global​​​ 即可安装。在任意目录下执行 ​​anywhere​​​ 就能启动一个服务,也可以指定端口启动 ​​anywhere -p 8090​​。

进入 demo 目录,启动服务:

$ anywhere
Running at http://169.254.53.24:8000/
Also running at https://169.254.53.24:8001/

通过浏览器请求 1.html 页面:http://169.254.53.24:8000/demo/1.html
页面显示:
Hello Vue!
现在你看到我了

如果在浏览器控制台下执行 ​​app.seen = false​​​,你会发现页面中的 ​​现在你看到我了​​ 不见了。

在这个例子中,明面上我们做的只有:​在模板中描述状态与 DOM 之间的关系​。背地里,vue 帮我们把状态渲染成视图,如果我们更改了状态(数据),视图会自动更新,无需我们操作 DOM。

vue 的开发模式

vue 框架的开发模式是多样化的。可以把 vue 当成 js 库来使用;也可以使用 .vue 单文件形式配合 webpack 使用,必要时还可以使用 vuex 来管理状态,vue-router 来管理路由。


其他章节请看:

​​vue 快速入门 系列​​



作者:​​彭加李​​

欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。


举报

相关推荐

0 条评论