Vue.js基礎2

Vue基礎2

vus.js基礎2

• 模板語法
• 命令
• 條件渲染
• 列表渲染
• 事件處理器
• 表單控件綁定

2.1 模板語法

mustache 語法中是支持寫js的

1. 用法：

   • 內容： 必須加 {{ js語法 }}

   • 屬性: 屬性中屬性值能夠直接寫js語法，而且屬性值中的數據至關於全局變量

     • 給一個標籤加一個自定義屬性/已有屬性

       img中的src就是已有屬性 <img src = "" /> //data-index就是自定義屬性 ， web網頁中建議咱們使用data-形式來定義自定義屬性 <img data-index = "0" /> 

     • 思考： Vue如今想要在html中使用本身的屬性，而且要和他的語法和數據結合？

       • 咋整？

       • 分析： 如何我可以標識出哪個屬性是具備vue標誌的那就行了,也就是屬性前加 v

         • Vue給這種帶v標識的屬性，起了一個名字： 指令【 借鑑angular 】

         <div v-html = "msg"> </div> 

2. 研究它js的支持性

   • 數據類型
     • 市場上js的數據類型分類有兩種？
       • 第一種
         • 初始數據類型： number string null undefine boolean
         • 引用數據類型: Object [ function array ... ]
       • 第二種
         • 基礎數據類型: number string boolean
         • 特殊數據類型： null undefine
         • 複雜數據類型； Object [ function array ...]
   • 輸出語法
     • console
     • alert
   • 表達式 / 運算符
     • 三元表達式

3. 總結;

   • null 和 undefined 是不會顯示的，其餘數據類型都是支持的，能夠顯示的
   • 掛載在window身上的全局屬性，咱們都不能用的： 好比; console alert
   • {{ }} 不寫流程控制
     • for
     • if
     • while
     • do...while
   • {{}} 支持三元表達式，一樣也支持運算符
     • 短路原則也是支持的

2.2 指令

指令的目的是作什麼： 操做DOM

​ 解釋 : MVVM vm -> v 數據驅動

​ 因此： 今天開始，咱們不想二階段同樣操做dom，改爲操做數據，數據要想操控DOM,那麼咱們須要依賴指令，由於指令是直接綁定在dom身上的

1. v-html 轉義輸出，也就是能夠解析 xml 數據

2. v-text： 非轉義輸出，也就是沒法解析 xml 類型數據

3. v-bind

   • 將數據和屬性進行單向數據綁定： 將vue中數據賦值給屬性值

     <img v-bind:src = "src" /> <div v-bind:class = ""> </div> <div v-bind:style = ""> </div> 

   • 簡寫形式

     <img v-bind:src="src" alt=""> <img :src="src" alt=""> 

   • 類名綁定

     • 用法

       • 對象形式用法

         <p :class = "{ bg: true,size: true }"></p> <p :class = "{ bg: true,size: false }"></p> <p :class = "{ [classA]: true,[classB]: true }"></p> 

       • 數組形式用法

         <p :class = "[ 'size','bg' ]"></p> <p :class = "[ classA,classB ]"></p> <p :class = "[ classA,classB,5>3?'a':'b']"> </p> 

• 樣式綁定

  • 用法

    • 對象形式用法

      <p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p> <p :style = "styleObj"></p> 

    • 數組形式用法

      <p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p> <p :style = "[size,bg]"></p> 

2.3 條件渲染

1. v-if

2. v-else-if

3. v-else

4. v-show 條件展現

   <h3> 條件渲染 - 單路分支 </h3> <p v-if = "flag"> A </p> <h3> 條件渲染 - 雙路分支 </h3> <p v-if = "flag"> A </p> <p v-else > B </p> <h3> 條件渲染 - 多路分支 </h3> <p v-if = "type === '美食'"> 美食 </p> <p v-else-if = " type === '遊戲' "> 遊戲 </p> <p v-else> 睡覺 </p> <h3> 條件展現 </h3> <p v-show = " showFlag "> 條件展現 </p> 

5. 思考總結

   思考： v-if vs v-show 1. 效果看起來同樣 2. why Vue要出兩個類似的指令？ v-if控制的是元素的存在與否 v-show控制的是元素的display:none屬性 思考？ 若是出事條件爲假時？ v-if v-show 誰的性能損耗較高？ v-show 總結： 項目中如何選擇哪個？ 頻繁切換用 v-show 若是不是很頻繁的切換，那咱們用 v-if 

2.4 列表渲染

• v-for 指令

  <h3> 數組 </h3> <ul> <li v-for = "(item,index) in arr" :key = " index "> {{ item }} -- index{{ index }} </li> </ul> <h3> 對象 </h3> <ul> <li v-for = "(item,key,index) of obj" :key = "index"> {{ item }} -- {{ key }} -- {{ index }} </li> </ul> <h3> json </h3> <ul> <li v-for = "item in json" :key = "item.id"> <span> 商品名稱： {{ item.shop_name }} </span> <span> 商品價格： {{ item.price }} </span> </li> </ul> <h3> 循環嵌套 </h3> <ul> <li v-for = "item in lists" :key = "item.id"> <h3> 商品類型： {{ item.shop_name }} </h3> <ul> <li v-for = "item in item.type" :key = "item.id"> <p> 製造商： {{ item.maker }} </p> </li> <!-- <li v-for = "ele in item.type" :key = "ele.id"> <p> 製造商： {{ ele.maker }} </p> </li> --> </ul> </li> </ul> <h3> 循環number / string </h3> <p v-for = "item in 10"> {{ item }} </p> <p v-for = "item in 'abc'"> {{ item }} </p> 

• 總結：

  • 1. 列表渲染參數能夠寫三個，分別爲 item key index
  • 2. 列表渲染，要在渲染的元素身上加一個key，做爲這個元素惟一的標識 ,
       1. 思考: 這是爲何？
       2. 這個key最好是id,由於id惟一？思考： 爲何不能是index
  • 3. 循環嵌套式，參數名稱是能夠一致的
  • 4. in / of 均可以使用

2.5 事件處理器

• v-on

簡寫 <button v-on:click = 'fn'> 點擊 </button> <button @click = 'fn'> 點擊 </button> <button @click = "eventHandler"> 事件對象 </button> <button @click = "argumentHandler( a,b,$event )"> 事件參數 </button> //當一個事件處理程序中有多個參數，其中一個參數是事件對象式，咱們在調用這個方法時，要添加一個實際參數 $event 與之對應 new Vue({ el: '#app', data: { a: 10, b: 20 }, methods: { // methods稱之爲方法 ，裏面存儲是事件處理程序 fn () { alert('事件') }, eventHandler ( e ) { console.log( e ) }, argumentHandler ( a,b,e ) { console.log( e ) console.log( a + b ) } } }) 

• 事件修飾符
  • Vue中對事件的功能的擴展
    • 修飾符 - 修飾事件
      • 按鍵修飾符
        • stop
        • self
        • once
        • ...
      • 鍵盤修飾符
        • 自定義按鍵修飾符 Vue.config.keyCodes.f1 = 112
    • 修飾符的好處
      • 事件冒泡
      • 回車彈出input的value

  例：html <div id="app"> <h3> 鍵盤修飾符 </h3> <input type="text" @keyUp.13="getValue"> <input type="text" @keyUp.enter="getValue"> </div> 

  Vue.config.keyCodes.f1 = 112 new Vue({ el: '#app', methods: { getValue(e) { // if ( e.keyCode === 13 ) { // console.log('執行了') // } console.log('執行了') } } }) 

2.6 表單控件綁定

• v-model
  • 雙向數據綁定
    • VM 改變 V隨之改變
    • V改變， VM也隨之改變
  • v-model只用於表單
    • 理由： v-model默認綁定value屬性
  • 技巧： 看到表單直接 v-model