全端入门Day21_前端程序撰写之Vue.js

昨天介绍了JavaScript,今天就要来介绍JavaScript的框架:Vue

我不会介绍有关太多Vue的功能,能够用基本的功能代表已经往前一步了,之後要往下继续学就看个人的需求了。

Vue.js入门

第一次自学Vue所以有错请多包涵,可以在底下跟我说有错误什麽的,我们直接上程序码:

  1. 我们先在新的档案夹里面新增一个html档案,然後再补上div标签,这个标签我们把ID设成app
<!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">{{hi}}</div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
            hi: 'hello Vue.js!'
            }
        });
    </script>
</body>
</html>
  1. 之後写一个Vue的语法,用script包住然後里面要有el,这个el就是指JavaScript的document.getElementById("app")
    data就是要把资料给输出,首先会去对到el抓的ID然後把内容丢进去,就会是hi的内容被丢成hello Vue.js!
  2. 存档成index.html然後把它打开就会看到这样:
    https://ithelp.ithome.com.tw/upload/images/20210905/20140126d3zULFjaYl.jpg

原本是继续把Vue.js介绍多一点,但好像篇幅要不够了,怕会无法介绍到後端,所以前端大概就到这边了。
明天就会是介绍後端的程序了!


<<:  05 - Tmuxinator - Tmux sessions 管理工具

>>:  【Day05】Data Flow 与 State

[Day27]Flutter Netflix UI 使用json_serializable转换Model

大家好,今天要来做Model的转换,使用到json_serializable、build_runne...

[REPORT] IMAGE BASE64

注意事项 DB里的值,前面的desc要拿掉,只存後面就好 影像属性要选png ...

Day02 UIKit 01 - 新建专案

我们首先先从UIkit开始,我们在Xcode 新建专案,并选择Storyboard 作为Interf...

[Day 17] Facial Recognition - siamese networks: 只是一个开始

双胞胎有同卵双生或异卵双生,孪生网路当然也要有 今天开始我们将谈谈如何让网路去学习辨识不同的人脸,...

使用 KSP 来改善 annotation processor?

就在我们用 KAPT 开发完这个 RSS library 後几个月 KSP 就发布了! KSP 的全...