mvvm

vm是什么？

viewmodel 的簡寫 用來連接同步view試圖層和model層 監(jiān)聽model層數(shù)據(jù)的變化 從而改變view頁面展示出來的數(shù)據(jù)

插值表達(dá)式的作用是什么

渲染data數(shù)據(jù)

v-text作用？

v-開頭的都是命令 添加在屬性欄 v-text同樣可以對(duì)內(nèi)容進(jìn)行修改 數(shù)據(jù)展示

v-text 和 v-html區(qū)別？

兩個(gè)的使用場景 都是 在標(biāo)簽屬性里面寫
v-text 不可以解析標(biāo)簽 v-html 可以解析標(biāo)簽 但是表達(dá)式不安全 不建議使用

        <p v-text='name'></p>
       <p v-html='html'></p> 

v-bind 是綁定給誰的？

綁定標(biāo)簽的屬性

        <img v-bind:src="imgsrc" alt="" width="100px">
 **bind可省略**   <img :src="imgsrc" alt="" width="100px">
   
        <a :href="'del.php?id='+id">刪除</a>

        <p :class="{'red':true}">測(cè)試屬性綁定</p>

v-for 循環(huán)數(shù)組 對(duì)象的 幾種寫法？

        <h1>v-for='item in arr'</h1>
        <p v-for='item in arr'  :key='item.name'>{{item.name}}:{{item.age}}</p>
       
        <h1>v-for='(vlue,index) in arr'</h1>
        <p v-for='(item,index) in arr ' :key='index'>{{item.name}}:{{item.age}}:'索引'{{index}}</p>
       
        <h1>v-for='vlue in obj'</h1>
        <p v-for='vlue in obj' :key='vlue'>{{vlue}}</p>

        <h1>v-for='(vlue,key,index) in obj'</h1>
        <p v-for='(vlue,key,index) in obj' :key='vlue'>{{vlue}}:{{key}}:+'索引'{{index}}</p>

在v-for=''后面 添加：key的作用？

只刷新被改變的那一部分 提高性能優(yōu)化

：key的用法？

在v-for=''后面添加:key='一個(gè)唯一的標(biāo)識(shí)符一般是item.name//index'

修改/添加數(shù)組的內(nèi)容的方法

// Vue.set 修改arr的屬性
Vue.set(vm.items, indexOfItem, newValue)/vm.$set(vm.items, indexOfItem, newValue)
Vue.set(vm.arr, 0, {name:'小混混',age:28})

// Array.prototype.splice 修改數(shù)組的長度
vm.items.splice(indexOfItem, 1, newValue)
vm.arr.splice(0, 1)
增加vm.arr.push('newarr')

v-model：實(shí)現(xiàn)雙向數(shù)據(jù)綁定

作用 視圖層和數(shù)據(jù)層是綁定在一起的 不管改變哪一個(gè) 數(shù)據(jù)都是同步改變的 僅限使用于input textarea select這三種標(biāo)簽中

<input type="text" v-model='name'>{{name}}
        <!-- textarea/input/selsect使用 -->

v-on：用來監(jiān)聽 綁定dom事件

在methods屬性中定義函數(shù)
如果想要獲取data中的屬性 需要加上this 表示的是vue實(shí)例

• 1.綁定事件 兩種寫法(可以簡寫)
• 2.stop阻止冒泡 prevent阻止默認(rèn)跳轉(zhuǎn)
• 3.@keyup:enter按鍵事件

        <button v-on:click='changeMsg'>點(diǎn)擊改變事件</button>
        <button @click="changeMsgBy('小傻瓜')">可以傳參</button>
        <button @click='getEvent($event)'>事件對(duì)象</button>
        <a  @click.prevent='changeMsg'>百度</a>
        <input @keyup.13='submit'>
        <input @keyup.enter='getEvent($event)'>

   var vm = new Vue({
       el:'#vm',
       data:{
           name:'zs',
           age:18,
           html:"<h3>哈哈哈哈</h3>",
           imgsrc:'../img/shui.jpg',
           arr:[ ],
           obj:{ }
       },
       methods:{
            changeMsg() {//點(diǎn)擊改變data里面的name的值 固定是‘小可愛’
                   this.name='小可愛',
               },
               changeMsgBy(arg){//直接傳參  改變data里面的name的值  想傳什么都可以
                   this.name=arg
               },
               getEvent(e){//打印出來的是點(diǎn)擊對(duì)象  可以用來獲取e.keyCode鍵碼，或者位置等信息
                   console.log(e)
               },
               submit(){//按鍵按下的時(shí)候觸發(fā)該事件  
                   console.log('enter')
               }
           }
   })

v-if --- v-show

用來控制元素的顯示和隱藏 v-if='布爾值true/false'
區(qū)別：

• v-if通過控制dom (標(biāo)簽隱藏)
• v-show是通過控制樣式（display:none）涉及大量操作DOM的時(shí)候 用v-show 涉及到異步數(shù)據(jù)渲染的時(shí)候就要使用v-if

        <p v-if='true'>v-if</p>
        <p v-show='isvisible'>v-show</p>

        <p v-if='type==="A"'>A</p>
        <p v-else-if='type==="B"'>B</p>
        <p v-else>not A/B/C/D</p>

使用vue和jquery控制dom的不同之處？

vue直接使用指令去進(jìn)行操作頁面上的 DOM元素

解決頁面加載{{}}閃爍問題

寫一個(gè)style樣式
[v-click]{
display:none
}
然后給標(biāo)簽添加v-click指令就可以了