web前端開發之vue基礎

一、vue基礎

1.1 啥是vue

1.1.1 創建vue

1. 引入vue.js 的cdn節點

   1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 創建一個 id為app的節點

   1. 如：<div id="app"></div>

3. 創建vue實體

   1. <script> let app = new Vue({ el: '#app', data: { msg:'vue' } }) </script>

• el 屬性指定當前 vue 實體的掛載點
  • vue實體中的所有資料只能在此dom范圍內使用
• data 中是模型資料，這些資料依賴于當前的vue實體，可以在控制臺中通過下面方式訪問data中資料

2.1 資料系結

2.1.1 內容系結

直接在標簽內使用{{}}

<div id="app">
        <p>{{msg}}</p>
</div>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                msg:'我是內容系結'
            }
        })
    </script>

雙{{}}只能顯示純文本

如需顯示html內容 則需要使用v-html指令

<div id="app">
    <p v-html="msg"></p>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg:'<b>我是內容系結</b>'
        }
    })
</script>

2.1.2 屬性系結

1. 所謂屬性系結就是把data中的資料作為某個元素的屬性值
2. 我們需要使用v-bind:屬性名 指令
3. 屬性可以是內置的 也可以是自定義的

<p v-bind:id="id">{{id}}</p>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            id:11
        }
    })
</script>

v-bind: 可以簡寫為

<p :id="id">{{id}}</p>

2.1.3 表單控制元件的值

• 可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向資料系結，
• 它會根據控制元件型別自動選取正確的方法來更新元素

2.1.3.1 文本框和文本域

<input type="text" v-model="value">
<script>
    let app = new Vue({
        el: '#app',
        data: {
            value:'我是文本框'
        }
    })
</script>

<textarea v-model="textarea"></textarea>
        let app = new Vue({
            el: '#app',
            data: {
                textarea:'我是文本域'
            }
        })

2.1.3.2 復選框

? 對于復選框來說 v-model 系結的是checked屬性

		<label for="swip">游泳</label>
        <input type="checkbox" id="swim" v-model="isSwim">
        <label for="read">閱讀</label>
        <input type="checkbox" id="read" v-model="isRead">
        <label for="play">游戲</label>
        <input type="checkbox" id="play" v-model="isPlay">

<script>
        let app = new Vue({
            el: '#app',
            data: {
                isSwim:false,
                isRead:false,
                isPlay:true
            }
        })
    </script>

經過實驗我們可以得出：當v-model的值為false的時候 復選框是不會選中的

2.1.3.3 單選框

<label for="man">男</label>
<input type="radio" id="man" value="man" v-model="gender">
<label for="women">女</label>
<input type="radio" id="women" value="women" v-model="gender">
	<script>
        let app = new Vue({
            el: '#app',
            data: {
                gender:''
            }
        })
    </script>

• 設定多個單選框的 v-model 為同樣的值，就可以省略 name 屬性
• 選擇某個單選框后，此單選框的 vlue 屬性值會賦值給 gender 屬性
• 設定 gender 屬性的值為某個單選框的 value 值，此單選框就會默認選中

2.1.3.4 下拉串列：

<select v-model="city">
            <option value="" disabled selected>請選擇</option>
            <option value="bj">北京</option>
            <option value="sjz">石家莊</option>
            <option value="sh">上海</option>
</select>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                city:''
            }
        })
    </script>

3.1 串列渲染

說到串列渲染就會用到v-for指令

<ul>
    <li v-for="item in list">
        {{item}}
    </li>
</ul>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, title: '我是標題1' },
                    { id: 2, title: '我是標題2' },
                    { id: 3, title: '我是標題3' }
                ]
            }
        })
    </script>

v-for的第一個引數可以隨便起名 in 要回圈渲染的data中的資料

在實際開發中，我們的資料則需要從服務端獲取

所以我們用到了fetch方法

 <script>
      let app = new Vue({
        el: '#app',
        data: {
          list: [],
        },
        created: function () {
        // created 函式會再 vue 實體實體化時執行
          fetch('地址')
            .then((res) => {
              return res.json()
            })
            .then((res) => {
              this.list = res
            })
        },
      })
    </script>

3.2 條件渲染

條件渲染的方式有很多種

• 可以直接使用v-if
• 配套使用v-if和v-else 和 v-else-if
• v-if在單獨使用的時候，與 v-show 的作用是一樣的，都是根據變數的值決定是顯示還是隱藏當前元素

3.2.1 v - if

<p v-if="isDouble">你猜猜我會不會被渲染</p>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                isDouble:false
            }
        })
    </script>

通過運行我們可以得出 瀏覽器并不會渲染 因為isDouble為false

且并不是設定了display為none 而是瀏覽器并沒有這個標簽

3.2.2 v- if 和 v - else

<p v-if="isDouble">有物件</p>
<p v-else="isDouble">沒物件</p>

結果不用想都知道 那肯定是沒物件

isDouble的值為false 而使用了v-else之后 isDouble的值會取反

3.2.3 v- show

<p v-show="isDouble">有物件</p>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                isDouble:false
            }
        })
    </script>

• 與v - if 不同的是 瀏覽器渲染了這個元素 但是設定了p標簽的style樣式為displa:none;

3.3 串列渲染總結：

• v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷，
• 因此，如果需要非常頻繁地切換，則使用 v-show 較好；
• 如果在運行時條件很少改變，則使用 v-if 較好