Vue的快速入門

時間 2019-12-01

標籤 vue 快速入門简体版

原文原文鏈接

1 環境準備html

　　1 下載安裝Node 地址https://nodejs.org/en/download/vue

　　　完成後經過cmd打開控制檯輸入node -v 能夠看到版本信息node

　　2 經過該node自帶的npm 下載安裝nrm 命令 npm install nrm -gweb

　　　　nrm ls 查看鏡像倉庫 nrm use taobao 使用taobao這個鏡像倉庫 nrm test taobao 測試鏈接速度npm

　　3. 安裝完成後重啓電腦app

　　4.1 打開idea 建立一個static web 項目 hello-vue ide

　　　2 打開terminal控制檯進入項目目錄 cd hello-vue 而後進行初始化命令 npm init -y測試

　　　　3. 安裝Vue 輸入命令 npm install vue --save (過程須要聯網下載)this

　　　　成功後的項目目錄：hello.html是我建立的idea

2 測試練習：

　　1新建一個HTML 例如 hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首次測試</title>
</head>
<body>
    <div id="div">
        <h1>hello world, I'm vue!</h1>
        {{name}}
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
//vue渲染須要放在HTML語句後面 先有須要渲染的元素而後才能綁定元素
    <script>
        var app = new Vue({
            el:"#div",  //綁定須要渲染的元素
            data:{ //數據
                name:"一劍西來，天外飛仙"
            }
        })
    </script>
</body>
</html>

　　頁面效果：

2 建立 test2.html 測試雙向綁定和事件處理

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>雙向綁定</title>
 6     <script src="node_modules/vue/dist/vue.js"></script>
 7 
 8 </head>
 9 <body>
10     <div id="div">
11         <h1>這只是個標題</h1>
12         你有幾隻羊？<input type="text" v-model="num" placeholder="請誠實哦">
13         <button v-on:click="add">+</button><br />
14         我有{{num}}只羊。
15     </div>
16     <script>
17         let div = new Vue({
18             el:"#div",
19             data:{
20                 num:2
21             },
22             methods:{
23                 add(){
24                     this.num++
25                 }
26             }
27         })
28     </script>
29 </body>
30 </html>