初識(shí)vue

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

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

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

• Vue實(shí)例和容器是一一對(duì)應(yīng)關(guān)系
• {{xxx}}中的xxx要寫js表達(dá)式，xxx可以自動(dòng)讀取到data中的所有屬性
• data數(shù)據(jù)一旦發(fā)生變化,模板中用到數(shù)據(jù)的地方也會(huì)發(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表達(dá)式執(zhí)行
        <a v-bind:href="url" rel="external nofollow"  rel="external nofollow" >百度</a>
        <a :href="url" rel="external nofollow"  rel="external nofollow" >簡(jiǎn)寫，百度</a>
    //使用v-bind指令后，href中的url即為js表達(dá)式,此處即為	http://baidu.com
    //v-bind指令可以簡(jiǎn)寫為 :
    </div>
    <script type="text/javascript">
          Vue.config.productionTip = false//防止在vue啟動(dòng)時(shí)產(chǎn)生提示
        new Vue({
            el:'#root',
            data:{
                name:'三萬小',
                url:'http://baidu.com',
            }
        })
    </script>

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

單向綁定

v-bind:

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

雙向綁定

v-model:

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

el和data的兩種寫法

el

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

data

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

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

Object.defineProperty方法

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

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

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

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

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

• 通過vm對(duì)象代理data對(duì)象中屬性的操作，能夠更加方便的操作data中的數(shù)據(jù)
• 通過Object.definePropery()把data對(duì)象中所有屬性添加到vm上為每一個(gè)添加到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對(duì)象中，最終在vm上

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

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

事件修飾符

• prevent：阻止默認(rèn)行為

事件修飾符可以連寫

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

即按鈕只生效一次

• capture: 使用事件捕捉模式
• self: 只有event.target時(shí)當(dāng)前操作的元素是才觸發(fā)事件
• passive: 事件的默認(rèn)行為立即執(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事件：在按下修飾鍵時(shí)，再按下其他鍵，隨后釋放其他鍵，事件被觸發(fā)
• keydown事件：可直接使用

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

定義命名(不常用)

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

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

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

最新評(píng)論