Vue學習1

el掛載點

1. Vue例項的作用範圍是什麼？

   Vue 會管理el選項命中的元素及其內部的後代元素

2. 是否可以使用其他選擇器

   通常使用的“"#app"使用的是id選擇器，像類選擇器”.app“,標籤選擇器”div“,都可以使用，不過建議選擇id選擇器，只有一個

3. 是否可以設定其他的dom元素呢？Vue是否可以掛載到其他dom元素上，而不僅僅是div?

   可以掛載到其他的dom元素上(要求是雙標籤)，不能掛載到html 和body上

4. el的作用：用來設定Vue例項掛載(管理)的元素

data資料物件

1. Vue 中用到的資料定義在data中

2. data中可以寫複雜型別的資料 (物件student(相當於python 中的字典)，陣列，。。。)

3. 渲染複雜型別資料時，遵守js的語法即可( student.name 點，索引)

Vue指令

v-text

1. 作用：將資料設定為標籤的文字值(設定元素的文字值)
2. 預設寫法會替換全部內容，使用差值表示式{{}}可以替換指定內容
3. 內部支援寫表示式
4. {{}}也是v-text 的一種形式，或者可稱是其一種簡寫

v-text :就是一個屬性而已

<div id="app">
    <h2 v-text ="msg" ></h2>
    <h2>深圳{{msg}}</h2>
    <!--這兩種的區別是v-text屬性 會把data中的對應資料覆蓋h2標籤的所有內容，是整體改變，而差值表示式{{}}是區域性替換-->
</div>
 

<h2 v-text =" msg+'!!'" ></h2>
<h2>深圳{{msg+"biu"}}</h2>

v-html

1. 作用：設定標籤的innerHTML

2. 內容中有html結構會被解析為標籤

3. v-text 指令無論內容是什麼，只會解析為文字

4. 解析文字使用v-text ，需要解析html結構使用v-html

v-on

1. 作用：為元素繫結事件
2. 事件名寫什麼？如果是點選事件，寫 click ,如果的是 滑鼠移入事件，寫monseenter ，雙擊事件 dblclick 方法寫在Vue例項的methods中
3. 無論什麼事件共同的部分是 v-on: ,Vue提供了一種更簡單的寫法，支援 v-on：替換為 @

<div id="app">
    <input type="button" value = "事件繫結" v-on:事件名 = "方法" >
</div>

v-text v-html v- on 內容繫結 事件繫結

v-show

1. 根據表示式的真假，切換元素的顯示和隱藏
2. 原理是修改元素的display,實現顯示隱藏
3. 指令後面的內容，最終都會解析為布林值
4. 值為true 元素顯示，值為false 元素隱藏
5. 資料改變之後，對應元素的顯示狀態會同步更新

<div id="app">
    <!--三種形式-->
    <img src="地址" v-show = "true">
    <img src="地址" v-show = "isShow">
    <img src="地址" v-show = "age >=18">
</div>

var vm = new Vue({
    el:"#app",
    data:{
        isShow:true,
        age:16,
    }
})

v-if

1. 根據表示式的真假，切換元素的顯示和隱藏(操縱dom元素)
2. 本質是通過操縱dom元素來切換顯示狀態
3. 表示式的值為true，元素存在於dom樹中，為false,從dom樹中移除
4. 與 v- show類似的作用,兩者都有其差不多的三種形式
5. 兩者的區別在於，v-if 為false的時候，會把該元素從dom樹中移除，而v-show是操縱元素的display ，為false時，將display 設定為none。
6. 實際使用時，對於頻繁使用的元素，用v-show,不經常使用的用v-if

v-bind

1. 設定元素的屬性(比如src,title,class)
2. v-bind 指令的作用是：為元素繫結屬性
3. 語法： v-bind: 屬性名 = 表示式 或者 ：屬性名 = 表示式
4. v-bind: 可簡寫為 ：
5. 如果設定的為class 更建議使用物件的形式而不是三元表示式

<div id="app">
    <img v-bind:src = "imgSrc">
    <img v-bind:title = "imgTitle"+"!!!!"> //可直接新增字元
    <img v-bind:class = "isActive? 'active':''"> //三元表示式
    <img v-bind:class = "{active:isActive}"> //物件形式
    
</div>

var vm = new Vue({
    el:"#app",
    data:{
        imgSrc:"圖片地址",
        imgTitle:"黑馬程式設計師",
        isActive:false
    }
})