記錄一次vue的學習（一）
阿新 • • 發佈：2018-12-08
記錄一次vue的學習（一）
前言
- 作為一個後端程式設計師（？？碼農？），一直因為沒辦法將寫好的web好好的展示出來，苦惱於沒有前端配合，前端還能用node去自己寫點後端，今天決定學習vue，敲開前端的大門，當家作主，翻身做主人！讓自己也可以單槍匹馬寫好一個web！順便上一下github地址vue專案程式碼
提前準備
- 安裝好node環境
- 安裝好npm yarn
- 編譯器使用 vscode
- 建立一個新的資料夾，包含index.html 和vue.js
動手！
- 開啟vue的官網，點選教程，點選安裝
- 點選開發版本，將裡面的程式碼copy到提前建立好的vue.js上
- 開啟html，引進vue.js
這個時候就可以開始敲程式碼了！
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue 入門</title> <script src = "./vue.js"> </script> </head> <body> <div id="root"> <div @click="handleClick"> {{content}} </div> </div> <script> new Vue({ el : "#root", data: { content : "hello" }, methods: { handleClick:function(){ this.content = "world" } } }) </script> </body> </html>
- 效果
- 點選hello後
學習筆記
-
在script標籤中建立一個Vue例項 在body上寫一個div
-
vue例項中包含 el ：例項需要掛載的地方，此處是id為root的div
-
data：例項的資料
-
methods 例項可能用到的方法，這裡寫了一個handleClick為名的方法
-
@click 繫結一個函式，當點選的時候觸發函式，其實和 v-on:click = "handleClick"是等價的
-
{{content}} : 代表將這個掛載點對應的例項的data里名為content的引數的值輸出
-
當我們點選hellow的時候觸發函式handleClick,將content的值改變，這個時候頁面上對應的輸出的值也將改變