vue基本指令

Vue 版本

1. 開發環境 :

<!-- 開發環境版本，包含了有幫助的命令列警告   相當於jquery中的開發版本  開發中 經常使用  因為出錯有提示-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 生產環境

<!-- 生產環境版本，優化了尺寸和速度 相當於jquery.min.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

1. 宣告與渲染

宣告

	<div id="app">
	  {{ message }}
	</div>

渲染

	var app = new Vue({
	  el: '#app',
	  data: {
	    message: 'Hello Vue!'
	  }
	})

el : 用來標記使用vue來管理的dom物件 一般是選擇器 但是 不能使用html和body 要是用普通的標籤
el 裡面可以是任意的選擇器 除了body 和html 但是建議給id選擇器 在el裡面被命中的選擇器 他的子代以及後代選擇器 都會被vue管理
data : (就是在頁面顯示的資料) 通過某一種語法 和頁面dom元素關聯起來

2. v-text

v-text 給元素設定設定文字
語法 : 在標籤裡面 v-text=“data裡面的資料”
特點 : 直接設定 會覆蓋掉標籤原本的文字
沒辦法解析標籤
簡寫方式 {{}}
如果我們要保留標籤裡面原始的文字 name就必須使用簡寫方式
開發中 簡寫方式用的很多 v-text用得比較少

 <h1 v-text="message" ></h1>

覆蓋

<h1 v-text="message" >我不愛睡覺</h1>

在前面新增 :

<h1>我不愛睡覺{{message}}</h1>

簡寫 :

<h1>{{str}}</h1>

3. v-html

v-html : 在標籤內部 v-html= “data中的資料”
可以解析標籤 也可以解析文字
標籤內部如果說存在原始文字 name就會被覆蓋
沒有簡寫形式
相對於v-text 使用的頻率不高

 const app = new Vue({
        el : "#app",
        data : {
            a : "<a>我是一個超連結</a>",
            info : "我是某某某"
        }
    })

4. v-on 給元素繫結事件

給元素繫結事件 v-on:click blur dblclick
簡寫形式 : @事件名=
註冊的事件 後面的函式可以傳參
普通的註冊 :

  <input type="button" v-on:click="sayHi" value="sayHi">

寫形式 :

 <input type="button" @click="sayHi" value="sayHi">

可以傳參 :

 <input type="button" @click="bigger(10)" value="count">

5. Vue中的 this 指向

在Vue中 this是指向於Vue例項化物件的

app 例項化之後 data和methods 裡面的屬性 會直接整合到Vue例項上 它的裡面已經沒有data和methods屬性所以我們取值的時候 只需要使用this進行取值

const app  = new Vue({
            el : "#app",
            data : {
                summer : "夏天的風我永遠記得"
            },

            methods : {
                tryThis() {
                    console.log(this);
                    console.log(this === app);
                    
                    
                }
            }

        })

true

  console.log(this === app); 

6. v-bind 動態加上屬性

標準形式 :

 <div v-bind:class="isGreen?'green' : ''"></div>

三元簡寫 :

<div :class="isGreen?'green' : "></div>

象的寫法 :
物件的寫法 :class="{屬性值 : 表示式}

<div :class="{green : isGreen}"></div>

7.v-model 雙向繫結

當文字輸入框的內容發生變化時 會同步修改繫結的資料
如果我們直接修改data裡面的值 也會同步修改文字

<div id="app">
    <h2>{{info}}</h2>
	<input type="text" v-model="info" @keyup.enter="getInfo">
 </div>



 const app = new Vue({
        el : "#app",
        data : {
            info : "天氣不錯"
        },
        methods : {

        getInfo() {
            this.info              
            }
        }
    })

注意點 :

1. 沒有簡寫形式
2. 只有指定的表單元素可以使用(input select textarea)
3. 原理 : 檢測使用者輸入 把輸入的值獲取到 然後同步更新給頁面的元素
4. 修飾符 : .enter .13 .stop .prevent

8. v-for 遍歷陣列的數和下標

1. 點選時獲取對應的值名稱

	<p v-for="item in songList" @click="sing(item)">{{item}}</p>

2. 遍歷和獲取對應的下標

<p v-for="(item, index) in songList">{{item}}---{{index}}</p>