01-Vue初學習

1. Vue下載 

（1）網址：//cn.vuejs.org/v2/guide/installation.html   

（2）點擊開發版本，下載完成是一個 Vue.js

 

 

 

2. 使用 

（1）創建文件夾

文件夾：html

　　文件夾：js

　　　　把 Vue.js放到 這個文件夾中

　　文件夾：01-Vue

　　　　在這個文件夾中寫 html程式碼：01.html

 

（2） 引入 Vue.js

 

<script src="../js/vue.js"></script>

完整程式碼

<!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>
<script src="../js/vue.js"></script><!-- 就是這一行-->
</body>
</html>

 

（3）初體驗，列印：HelloVue — 注意體會與JS的不同

  • 創建<div>    

 <div id=”app”></div> 

  • 創建 Vue對象
const app = new Vue({
        el: '#app',//用於掛載要管理的元素
        data:{//定義數據
            message :"HelloVue"
        }
    })
  • 完整程式碼
<!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">
    <h1> {{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    //編程範式：聲明式編程
    const app = new Vue({
        el: '#app',//用於掛載要管理的元素  是 l 不是 1
        data:{//定義數據
            message :"HelloVue",
        }
    })
</script>
</body>
</html>

（4）響應式編程：數據發生改變的時候，介面自動改變

  • 運行html，打開控制台
  • 輸入 app.message ：顯示HelloVue

 

  • 修改HelloVue：在控制台輸入 app.message = “你好啊” 回車  頁面會立即發生變化

 

 

 

3. 瀏覽器執行程式碼的流程

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9 <!-- 數據與介面分離-->
10 <div id="app">
11     <h1> {{message}}</h1>
12 </div>
13 <script src="../js/vue.js"></script>
14 <script>
15     //編程範式：聲明式編程
16     const app = new Vue({
17         el: '#app',//用於掛載要管理的元素
18         data:{//定義數據
19             message :"HelloVue"
20         }
21     })
22     //響應式：數據發生改變的時候，介面自動改變
23 </script>
24 </body>
25 </html>
  • 執行到10-13行時，顯示出對應的 html
  • 執行到16行，創建Vue實例，並且對HTML進行解析和修改

4. 創建Vue時，傳入的options： el 和 data

  • el：該屬性決定了這個Vue對象掛載到哪一個元素上，這裡我們掛在到了id為app的元素上
  • data：該屬性通常會存儲一些數據，這些數據可以是上面那樣我們直接定義的，還可以是從網路、伺服器載入的

5. 源碼

<!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">
    <h1> {{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    //let 變數 const 常量
    //let name = "why"
    //name = "tom"
    //編程範式：聲明式編程
    const app = new Vue({
        el: '#app',//用於掛載要管理的元素
        data:{//定義數據
            message :"HelloVue"
        }
    })
    //響應式：數據發生改變的時候，介面自動改變
</script>
</body>
</html>

 

Tags:

VirMach 便宜 VPS

QNews

QNews