Vue-(三)基本概念

Posted on April 19, 2019 本文总阅读量次

3-1.關於Vue (影片)

follow`MVVM`架構

透過DOM裡面的監聽event來控制/影響View Model，然後去修改Model中的資料內容;
當Model中的資料變更，會讓View Model知道，再去修改相對應DOM中的內容

Vue的學習重點

3-2.Hello World (影片)

創建新的html模板

![](https://i.imgur.com/8t8CEQP.png)

加入vue的cdn

在cdnjs網站上，搜尋vue，將其cdn複製貼上html的head中，為一個script tag，即可使用vue 的library

<!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>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js"></script>
</head>
<body>

</body>
</html>

在html的body中創建一個容器

讓這個容器可以跟vue做綁定，習慣用div，並給予一個id(習慣會命名為app)

1
2
3

<body>
    <div id="app"></div>
</body>

在html的body中宣告一個vue

先有一個script tag，接這用new vue的方式去宣告出一個vue的實體(vue裡面是一個{}物件)

<body>
    <div id="app"></div>
    <script>
    new Vue({

    });
    </script>
</body>

將該vue綁定到某個元素(id)上面

在Vue實例中，使用el屬性，其值為html中定義的元素，兩者作綁定

new Vue({
    el:"#app",
});
``` 
### 定義vue中的data
在Vue實例中，使用data屬性，並以物件的寫法，將資料放於其中
```htmlmixed=
new Vue({
        el:"#app",
        data:{
            message:"Hello world!",
        }
    });

data被呼叫使用

用大括號呼叫出data

<div id="app">
    {{message}}
</div>
``` 
### html模板與vue的綁定大功告成！

存檔之後，點開html檔案，在瀏覽器上可以看到message被呈現出來

![](https://i.imgur.com/Q2IBvDL.png)
   
## 3-3.相對於「命令式」與「宣告式」渲染  [(影片)](https://hiskio.com/courses/145/lectures/5327)
### 製作一個計數器(聲明式寫法)：給他一個目標

先在html中宣告一個div容器，命名id為counter，裡面有一個文字h1其中顯示data中的count;另外有一個按鈕button，如果被點按會執行add函式
```htmlmixed=
<div id="counter">
  <h1>{{count}}</h1>
  <button v-on:click="add">點我+1</button>
</div>

改為jquery(命令式寫法)：

一個口令一個動作

<div id="counter">
  <h1>0</h1>
  <button>點我+1</button>
</div>

當button被點按，會執行{}中的流程：將h1中的文字轉為10進位的數字型態int，宣告其為count，完成count+=1之後，再將count存回h1中

$('button').click(()=>{
  let count = parseInt ($('h1').text(),10);
  count += 1;
  $('h1').text(count);
})

![](https://i.imgur.com/RmCLUp5.png)

主流框架皆為聲明式寫法

聲明式(舉一反三): React, Vue, Angular
命令式(一個口令): jQuery

3-4.if-else:流程控制與迴圈 (影片)

v-if與v-else:如果為true成立，則…

v-if可以單獨存在;但是，v-else不可以單獨存在，前面一定要搭配v-if使用

<div id="app">
    <span v-if="see">Now you see mee.</span>
    <span v-else>Now you don't.</span>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            see:true,
        },
        methods:{
            change_status(){
                this.see = ! this.see;
            },
        }
    })
</script>

v-for

在v-for=”step in steps”語法中，定義每次從steps中拿出來的東西是step;接著，再用”“將step的內容顯示出來

<div id="app">
    <div v-for="step in steps">{{step}}</div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            see:true,
            steps:['步驟一','步驟二','步驟三']
        },
        methods:{
            change_status(){
                this.see = ! this.see;
            },
        }
    })
</script>

3-5.處理使用者輸入 (影片)

偵聽事件v-on

按鈕button被偵聽點按click事件，每當click事件發生，就會執行remove

<div id="counter">
  <ul>
    <li v-for="item in counts">{{item}}</li>
  </ul>
  <button v-on:click="remove">remove a number</button>
</div>

每當remove()函式被呼叫執行，就會從this.counts陣列中拿走一個項目

new Vue({
  el:'#counter',
  data:{
    counts:[1,2,3,4,5],
  },
  methods:{
    remove(){
      this.counts.pop();
    },
  }
})

自動雙向綁定v-model

透過v-model語法將input跟show_word綁定，若input中的內容改變，會自動更新到data的show_word

<div id="inputer">
  <h1>{{show_word}}</h1>
  <input type="text" v-model="show_word" placeholder="請輸入文字內容"/>
</div>

new Vue({
  el:'#inputer',
  data:{
    show_word:'',
  },
})

3-6.實作：老梗才是好梗「Todo List」 (影片)

用內容比對刪除

如果內容重複，只會找到第一筆一樣的資料，會出錯

<div id="app">
        <input type="text" v-model="input"></input>
        <button v-on:click="addItem">add</button>
        <ul>
            <li v-for="item in lists">
                <span>
                    {{item}}<button v-on:click="removeItem(item)">delete</button>
                <span>
            </li>
        </ul>
    </div>
    <script>
    new Vue({
        el:'#app',
        data:{
            input:'',
            lists:[],
        },
        methods:{
            addItem(){
                this.lists.push(this.input);
                this.input=''
            },
            removeItem(item){
                //只找到第一筆內容符合的項目，會出錯
                const idx = this.lists.indexOf(item);    
                this.lists.splice(idx,1);
            }
        },
    })
    </script>

用index刪除

直接指定該index的數值，刪除在陣列中第(index+1)筆資料

<div id="app">
    <input type="text" v-model="input"></input>
    <button v-on:click="addItem">add</button>
    <ul>
        <li v-for="(item, index) in lists">
            <span>
                第{{index+1}}點：{{item}}<button v-on:click="removeItem(index)">delete</button>
            <span>
        </li>
    </ul>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        input:'',
        lists:[],
    },
    methods:{
        addItem(){
            this.lists.push(this.input);
            this.input=''
        },
        removeItem(index){
            this.lists.splice(index,1);
        }
    },
})
</script>

3-7.Vue/React/Angular，我該上哪部攻城車？ (影片)

React需要較多的JS基礎，因此若JS功力深厚者，React可以很快上手
若為初學JS，建議可以從Vue開始學習
Angular學習框架成本高