vue 快速入门 系列 —— 初步认识 vue
2021-04-03 04:09
1456 查看
其他章节请看:
初步认识 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 Runnin 56c g 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 来管理路由。
其他章节请看:
相关文章推荐
- IOS快速入门-工匠化教程系列(一) Xcode安装和快速认识
- vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]
- 大数据入门基础系列之初步认识大数据生态系统圈(博主推荐)
- vue 快速入门 系列 —— 虚拟 DOM
- Vue学习系列 -- vue-router 快速入门
- vue-router 60分钟快速入门
- [转]Ultra Fractal教程系列04——快速入门教程01——创建一个分形图像
- Vue.js——60分钟组件快速入门(上篇)
- Vue.js——60分钟组件快速入门(上篇)
- Maven 系列 一 :Maven 快速入门及简单使用【转】
- Vue.js——60分钟组件快速入门(下篇)
- vue-router 快速入门
- 由浅入深CIL系列:1.初步认识CIL通用中间语言
- WPF快速入门系列(9)——WPF任务管理工具实现
- C++ Primer学习系列(1):快速入门/变量和基本类型/标准库类型
- 极客react之Ant Design Pro系列快速入门(三)--菜单与权限
- JNI学习系列——初步认识JNI
- Vue基础知识以及快速入门&&Element基本使用
- Python Twisted系列教程3:初步认识Twisted
- JMeter快速入门知识系列(1) ----JMeter基础