Vue.js介绍及开发环境准备(DAY24)

Vue.js是什麽?

Vue.js是近年来蛮流行的前端框架,也是一个包装好的语言,使用上会比较便利。用於建立使用者介面的JavaScript框架,有效的组织与简化Web开发,也可以用Vue-cli建立单页应用的Web应用框架。

  • 特点:

  1. Vue 提供了渐进式的方法来撰写网页内容,依照自己所需要的工具再行载入,若想更加了解可以参考这篇文章
  2. 元件化:可以把 Vue 和 HTML 做整合,就像帮HTML的特定区块订制他们适合的衣服,并创造可以重复使用的网页内容
  3. 相对平缓的学习曲线,不需要求太高的 JavaScript 能力
  4. 简洁易懂的语法
  5. 提高维护品质
    补充:类似语言:react、angular(使用数据来驱动内容)
  • Vue.js核心功能

  1. 声名式渲染
    在HTML(模板)呈现JavaScript(资料),当状态和资料被更新後,就会同步更新HTML,将资料渲染到DOM。
  2. 元件系统
    元件 (Component) 的最小单位为节点,而好几个节点组成称为元件,元件有属於各自的模板、逻辑、样式,这些元件可以重复的被使用。
  • 开发环境准备

1.使用线上编译器
https://peterhpchen.github.io/vue-dojo/
https://ithelp.ithome.com.tw/upload/images/20211005/20140225OkJbN9Ymo3.png
2. 使用CDN载入Vue(先创建一个HTML档案,并载入Vue.js)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  • 试着创立第一个Vue专案

<div id="app"><h1>{{ message }}</h1></div>
<script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello!This is your project 1'
            }
        })
</script>

将会跑出以下结果:

https://ithelp.ithome.com.tw/upload/images/20211005/20140225EPt4lgED0F.png

结语

如果以上的环境已经建置好,下一篇就正式的开始来认识vue的功能吧!


<<:  Day 25 - 模板

>>:  每日挑战,从Javascript面试题目了解一些你可能忽略的概念 - Day22

2.4.11 Design System - Switches/Toggle

作息的重要性 我大部分的时候可以属於夜猫子类型 但几次实验下来发现 熬夜→睡不饱→上班想睡→花比较...

Day18-Vue Router 路由设定(part1)

昨天有提到的路由今天要来做拆解,做更深入的了解。昨天提到的router/index.js设定也可以写...

Day-15 Excel图表介绍

结束了为期三天的枢纽分析表,接着进到另一大主题,图表 (>ε<) 相信大家都知道图表可以让冗长的资数...

[Day 9] Course 3_Prepare Data - 资料型态

《30天带你上完 Google Data Analytics Certificate 课程》系列将...

第57天~

这个得上一篇:https://ithelp.ithome.com.tw/articles/10261...