初識vue

vue工作時，必須先創(chuàng)建Vue實例，且要傳入一個配置對象

容器內(nèi)的代碼依然符合html規(guī)范，混入了一些特殊的Vue語法

 <div id="root">
        <h1>hello,{{name}}</h1>
  </div>
// 創(chuàng)建一個實例
        new Vue({
            el:'#root',//el用于指定當(dāng)前vue實例為那個容器使用，值通常為css選擇器字符串
            data:{ //data中用于存儲數(shù)據(jù)，數(shù)據(jù)供el所指定的容器使用
                name:'尚硅谷'
            }
        })

• Vue實例和容器是一一對應(yīng)關(guān)系
• {{xxx}}中的xxx要寫js表達式，xxx可以自動讀取到data中的所有屬性
• data數(shù)據(jù)一旦發(fā)生變化,模板中用到數(shù)據(jù)的地方也會發(fā)生變化

模板語法

插值語法

{{xxx}}，常寫在標(biāo)簽體內(nèi)

指令語法

• 用于解析標(biāo)簽（包括：標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件…）
• 形式均為v-xxx，如：v-bind

<div id="root">
      <!-- 指令語法 -->
    	<a :href="url.toUpperCase()" rel="external nofollow" ></a>//js表達式執(zhí)行
        <a v-bind:href="url" rel="external nofollow"  rel="external nofollow" >百度</a>
        <a :href="url" rel="external nofollow"  rel="external nofollow" >簡寫，百度</a>
    //使用v-bind指令后，href中的url即為js表達式,此處即為	http://baidu.com
    //v-bind指令可以簡寫為 :
    </div>
    <script type="text/javascript">
          Vue.config.productionTip = false//防止在vue啟動時產(chǎn)生提示
        new Vue({
            el:'#root',
            data:{
                name:'三萬小',
                url:'http://baidu.com',
            }
        })
    </script>

數(shù)據(jù)綁定

單向綁定

v-bind:

• 數(shù)據(jù)只能從data流向頁面(頁面數(shù)據(jù)改變時，data不改變；data改變頁面也改變)
• v-bind指令可以簡寫為 ：

雙向綁定

v-model:

• data數(shù)據(jù)改變頁面數(shù)據(jù)也改變，修改頁面數(shù)據(jù)也可改變data
• 一般應(yīng)用于表單類元素上（即有value的，如input select等）
• v-model:value可簡寫為 v-model=‘xxx’

el和data的兩種寫法

el

• new Vue時配置el屬性
• 先創(chuàng)建vue實例，通過v.$mount(‘#root’)指定el的值

data

• 對象式
• 函數(shù)式(學(xué)習(xí)組件時必須使用函數(shù)式寫法)
• 寫函數(shù)式時，必須要return返回對象

注：Vue管理的函數(shù)，不能寫箭頭函數(shù)，否則this指向不為Vue實例

Object.defineProperty方法

• 定義新屬性或修改原有屬性
• Object.defineProperty(obj,props,descriptor)
• 返回值是 傳入函數(shù)的對象

       let person = {
            name:'張三',
            sex:"男"
        }
        // Object.defineProperty（對象名,需添加的屬性名，方法屬性）
        Object.defineProperty(person,'age',{
            value:'18',//給person添加age:'18'
            // enumerable:true,//控制屬性是否可以枚舉（遍歷）,默認值為false
            // writable:true,//控制屬性是否可以被修改,默認值為false
            // configurable:true,//控制屬性是否可以被刪除，默認值為屬性
		}

getter函數(shù)實現(xiàn)了，讀取age時實際讀取的是number

setter函數(shù)實現(xiàn)了，修改age時，將age值給了number

??Vue中的數(shù)據(jù)代理???

• 通過vm對象代理data對象中屬性的操作，能夠更加方便的操作data中的數(shù)據(jù)
• 通過Object.definePropery()把data對象中所有屬性添加到vm上為每一個添加到vm上的屬性,都指定getter,setter。在getter和setter內(nèi)部操作(讀/寫)data中的屬性
• vm._data相當(dāng)于data

事件處理

?? 1. 使用v-on:click='xxx’或者@click=‘xxx’綁定事件，其中xxx為事件名

?? 2. 事件的回調(diào)需要配置在methods對象中，最終在vm上

?? 3. methods中的函數(shù)不能用箭頭函數(shù)，否則this就不是vm

?? 4. 傳參時 @click='xxx(參數(shù))'的格式，其中event為@click=‘xxx($event)’

事件修飾符

• prevent：阻止默認行為

事件修飾符可以連寫

• stop: 阻止事件冒泡
• once: 事件只觸發(fā)一次

即按鈕只生效一次

• capture: 使用事件捕捉模式
• self: 只有event.target時當(dāng)前操作的元素是才觸發(fā)事件
• passive: 事件的默認行為立即執(zhí)行，無需等待事件回調(diào)函數(shù)

鍵盤事件

常用按鍵名

Vue常用按鍵名：

1. 回車 => enter
2. 刪除 =>delete
3. 退出 => esc
4. 空格 => space
5. 換行 => tab(必須綁定keydown事件才管用)
6. 上 => up
7. 下 => down
8. 左 => left
9. 右 => right

特殊按鍵（修飾鍵）名

ctrl、alt、shift、meta的使用

• keyup事件：在按下修飾鍵時，再按下其他鍵，隨后釋放其他鍵，事件被觸發(fā)
• keydown事件：可直接使用

設(shè)置只有其他鍵為y時才能觸發(fā)事件，其他鍵都不可以

定義命名(不常用)

Vue.config.keyCodes.自定義鍵名 = 鍵名對應(yīng)的鍵碼

注：Vue未提供別名的按鍵，可直接使用原始按鍵名，但注意要寫成kebab-case格式（如CapsLock寫成caps-lock）

到此這篇關(guān)于Vue零基礎(chǔ)入門之模板語法與數(shù)據(jù)綁定及Object.defineProperty方法詳解的文章就介紹到這了,更多相關(guān)Vue模板語法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論