vue-01 安裝與第一個vue程式

西门黑牛發表於2024-07-14
Vue

1.安裝

  1. 直接使用<script>
    • 下載vue.js後匯入
    • 直接線上匯入連結
  2. 使用cli腳手架

2.第一個vue程式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div id="app">
   <!-- 這是一個插值表示式,可以獲取下方註冊變數的值-->
    {{message}}
</div>

<script type="text/javascript">
    <!-- 建立一個vue應用，需要一個物件，並返回一個物件-->
var app=new Vue({
    <!--這裡是一個元素物件 -->
    <!--el表示元素，透過選擇器來獲取 -->
    el:'#app',
    data:{
        <!-- 在這裡註冊變數並賦初值 -->
        message:"hello Vue"
    }
})
</script>

</body>
</html>

相關文章