Vue基礎(chǔ)語法知識梳理上篇

更新時間：2022年12月12日 09:58:14 作者：糖^O^

這篇文章主要介紹了Vue基礎(chǔ)語法知識梳理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Vue簡介

讓Vue工作，就須創(chuàng)建一個Vue實例，且要傳入一個配置對象
demo容器里的代碼符合html規(guī)范，只不過混入了一些特殊的Vue語法
demo容器里的代碼被稱為【Vue模板】
Vue實例和容器是一一對應(yīng)的
真實開發(fā)中只有一個Vue實例，并且會配合著組件一起使用
{{xxx}}是Vue的語法：插值表達(dá)式，{{xxx}}可以讀取到data中的所有屬性
一旦data中的數(shù)據(jù)發(fā)生改變，那么頁面中用到該數(shù)據(jù)的地方也會自動更新(Vue實現(xiàn)的響應(yīng)式)

<!-- 準(zhǔn)備好一個容器 -->
<div id="demo">
	<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
	//創(chuàng)建Vue實例
	new Vue({
		el:'#demo', //el用于指定當(dāng)前Vue實例為哪個容器服務(wù)，值通常為css選擇器字符串。
		data:{ //data中用于存儲數(shù)據(jù)，數(shù)據(jù)供el所指定的容器去使用，值我們暫時先寫成一個對象。
			name:'hello,world',
			address:'北京'
		}
	});
</script>

模板語法

（1）插值語法：

功能：用于解析標(biāo)簽體內(nèi)容

寫法：{{xxx}}，xxx是js表達(dá)式，且可以直接讀取到data中的所有屬性

（2）指令語法:

功能：用于解析標(biāo)簽（包括：標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件…）

舉例：v-bind:href=“xxx” 或簡寫為

:href=“xxx”，xxx同樣要寫js表達(dá)式，且可以直接讀取到data中的所有屬性

<div id="root">
	<h1>插值語法</h1>
	<h3>你好，{{name}}</h3>
	<hr/>
	<h1>指令語法</h1>
    <!-- 這里是展示被Vue指令綁定的屬性，引號內(nèi)寫的是js表達(dá)式 -->
	<a :href="school.url.toUpperCase()" rel="external nofollow"  x="hello">點我去{{school.name}}學(xué)習(xí)1</a>
	<a :href="school.url" rel="external nofollow"  x="hello">點我去{{school.name}}學(xué)習(xí)2</a>
</div>
<script>
    new Vue({
		el:'#root',
		data:{
			name:'jack',
			school:{
				name:'百度',
				url:'http://www.baidu.com',
			}
        }
	})
</script>

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

（1）單向綁定(v-bind)：數(shù)據(jù)只能從data流向頁面

（2）雙向綁定(v-model)：數(shù)據(jù)不僅能從data流向頁面，還可以從頁面流向data

1.雙向綁定一般都應(yīng)用在表單類元素上（如：input、select等）

2.v-model:value 可以簡寫為 v-model，因為v-model默認(rèn)收集的就是value值

<div id="root">
	<!-- 普通寫法 單向數(shù)據(jù)綁定 -->
    單向數(shù)據(jù)綁定：<input type="text" v-bind:value="name"><br/>
    雙向數(shù)據(jù)綁定：<input type="text" v-model:value="name"><br/>
    <!-- 簡寫 v-model:value 可以簡寫為 v-model，因為v-model默認(rèn)收集的就是value值-->
    單向數(shù)據(jù)綁定：<input type="text" :value="name"><br/>
    雙向數(shù)據(jù)綁定：<input type="text" v-model="name"><br/>
</div>
<script>
    new Vue({
		el:'#root',
		data:{
			name:'jack',
        }
	})
</script>

el與data的兩種寫法

（1）el有2種寫法

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

<script>
   	// 第一種 
	const vm = new Vue({
		el:'#root',
		data:{
			name:'jack',
        }
	})
    // 第二種
    vm.$mount('#root')
</script>

（2）data有2種寫法

對象式
函數(shù)式

在組件中，data必須使用函數(shù)式

<script>
    new Vue({
		el:'#root',
        // 第一種
		data:{
			name:'jack',
        }
        // 第二種
        data() {
        	return {
                name: 'jack'
            }
    	}
	})
</script>

Vue中的MVVM

M：模型(Model) ：data中的數(shù)據(jù)
V：視圖(View) ：模板代碼
VM：視圖模型(ViewModel)：Vue實例

數(shù)據(jù)代理

了解數(shù)據(jù)代理需要js的一些知識：Object.defineProperty()，屬性標(biāo)志，屬性描述符，getter，setter

屬性標(biāo)志:

對象屬性（properties），除 value 外，還有三個特殊的特性（attributes），也就是所謂的“標(biāo)志”

writable — 如果為 true，則值可以被修改，否則它是只可讀的
enumerable — 如果為 true，則表示是可以遍歷的，可以在for… .in Object.keys()中遍歷出來
configurable — 如果為 true，則此屬性可以被刪除，這些特性也可以被修改，否則不可以

Object.getOwnPropertyDescriptor(obj, propertyName)

這個方法是查詢有關(guān)屬性的完整信息 obj是對象， propertyName是屬性名

let user = {
  name: "John"
};
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
console.log(descriptor)
/* 屬性描述符：
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

Object.defineProperty(obj, prop, descriptor)

obj：要定義屬性的對象。

prop：要定義或修改的屬性的名稱

descriptor：要定義或修改的屬性描述符

let user = {
  name: "John"
};
Object.defineProperty(user, "name", {
  writable: false
});
user.name = "Pete";
// 打印后還是顯示 'John',無法修改name值

其他的屬性標(biāo)志就不演示了，接下來看重點：訪問器屬性。

訪問器屬性：

本質(zhì)上是用于獲取和設(shè)置值的函數(shù)，但從外部代碼來看就像常規(guī)屬性。

訪問器屬性由 “getter” 和 “setter” 方法表示。在對象字面量中，它們用 get 和 set 表示：

let obj = {
    get name() {
        // 當(dāng)讀取 obj.propName 時，getter 起作用
    },
    set name() {
        // 當(dāng)執(zhí)行 obj.name = value 操作時，setter 起作用
    }
}

更復(fù)雜一點的使用

let user = {
	surname: 'gao',
    name: 'han'
    get fullName() {
        return this.name + this.surname;
    }
}
console.log(user.fullName)

從外表看，訪問器屬性看起來就像一個普通屬性。這就是訪問器屬性的設(shè)計思想。我們不以函數(shù)的方式調(diào)用 user.fullName，我們正常讀取它：getter 在幕后運行。

截至目前，fullName 只有一個 getter。如果我們嘗試賦值操作 user.fullName=，將會出現(xiàn)錯誤：

user.fullName = "Test"; // Error（屬性只有一個 getter）

為 user.fullName 添加一個 setter 來修復(fù)它：

let user = {
	surname: 'gao',
    name: 'han'
    get fullName() {
        return this.name + ' ' + this.surname;
    }
	set fullName(value) {
        // 這個用到了新語法 結(jié)構(gòu)賦值
        [this.surname, this.name] = value.split(' ');
    }
}
user.fullName = 'Li Hua'
console.log(user.name);
console.log(user.surname);

數(shù)據(jù)代理：

數(shù)據(jù)代理：通過一個對象代理對另一個對象中屬性的操作（讀/寫）

例：
let obj = {
    x: 100
}
let obj2 = {
    y: 200
}

我們想要訪問 **obj** 中的 **x** 的值，但我們最好不要直接去訪問 **obj** ,而是想要通過 **obj2** 這個代理對象去訪問。

這時候就可以用上 Object.defineProperty()，給 obj2 添加訪問器屬性（也就是getter和setter）

代碼

let obj = {
    x: 100
}
let obj2 = {
    y: 200
}
Object.defineProperty(obj2, 'x', {
    get() {
        return obj.x;
    },
    set(value) {
        obj.x = value;
    }
})

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

Vue中的數(shù)據(jù)代理：通過vm對象來代理data對象中屬性的操作（讀/寫）

Vue中數(shù)據(jù)代理的好處：更加方便的操作data中的數(shù)據(jù)

基本原理：

通過Object.defineProperty()把data對象中所有屬性添加到vm上。
為每一個添加到vm上的屬性，都指定一個getter/setter。
在getter/setter內(nèi)部去操作（讀/寫）data中對應(yīng)的屬性。

<!-- 準(zhǔn)備好一個容器-->
<div id="root">
	<h2>學(xué)校名稱：{{name}}</h2>
	<h2>學(xué)校地址：{{address}}</h2>
</div>
<script>
	const vm = new Vue({
        el: '#root',
        data: {
            name: '浙江師范大學(xué)',
            address: '浙江金華'
        }
    })
</script>

我們在控制臺打印 new 出來的 vm

可以看到，寫在配置項中的 data 數(shù)據(jù)被綁定到了 vm 對象上，我先來講結(jié)果，是 Vue 將 _data 中的 name，address 數(shù)據(jù) 代理到 vm 本身上。

先來解釋下_data 是啥， _data 就是 vm 身上的 _data 屬性，就是下圖那個

這個 _data 是從哪來的？

<script>
	const vm = new Vue({
        el: '#root',
        // 我們在Vue 初始化的配置項中寫了 data 屬性。
        data: {
            name: '浙江師范大學(xué)',
            address: '浙江金華'
        }
    })
</script>

new Vue 時， Vue 通過一系列處理，將匹配項上的 data 數(shù)據(jù)綁定到了 _data 這個屬性上，并對這個屬性進(jìn)行了處理（數(shù)據(jù)劫持），但這個屬性就是來源于配置項中的 data，我們可以來驗證一下。

<script>
    let data1 = {
        name: '浙江師范大學(xué)',
        address: '浙江金華'
    }
	const vm = new Vue({
        el: '#root',
        // 我們在Vue 初始化的配置項中寫了 data 屬性。
        data: data1
    })
</script>

這一切都是通過 Object.defineProperty() 來完成的，我來模擬一下這個過程

Object.defineProperty(vm, 'name', {
    get() {
        return vm._data.name;
    },
    set(value) {
        vm._data.name = value
    }
})

在插值語法中，{{ name }} 取到的值就相當(dāng)于 {{ vm.name }}，不用數(shù)據(jù)代理的話，在插值語法就要這樣去寫了。

事件處理

事件的基本使用：

使用v-on:xxx 或 @xxx 綁定事件，其中xxx是事件名
事件的回調(diào)需要配置在methods對象中，最終會在vm上
methods中配置的函數(shù)，都是被Vue所管理的函數(shù)，this的指向是vm 或組件實例對象

<!-- 準(zhǔn)備好一個容器-->
<div id="root">
    <h2>歡迎來到{{name}}學(xué)習(xí)</h2>
    <!-- <button v-on:click="showInfo">點我提示信息</button> -->
    <button @click="showInfo1">點我提示信息1（不傳參）</button>
    <!-- 主動傳事件本身 -->
    <button @click="showInfo2($event,66)">點我提示信息2（傳參）</button>
</div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            name:'vue',
        },
        methods:{
            // 如果vue模板沒有寫event，會自動傳 event 給函數(shù)
            showInfo1(event){
                // console.log(event.target.innerText)
                // console.log(this) //此處的this是vm
                alert('同學(xué)你好！')
            },
            showInfo2(event,number){
                console.log(event,number)
                // console.log(event.target.innerText)
                // console.log(this) //此處的this是vm
                alert('同學(xué)你好??！')
            }
        }
	});
</script>

Vue中的事件修飾符

prevent：阻止默認(rèn)事件（常用）
stop：阻止事件冒泡（常用）
once：事件只觸發(fā)一次（常用）

<div id="root">
    <h2>歡迎來到{{name}}學(xué)習(xí)</h2>
    <!-- 阻止默認(rèn)事件（常用） -->
	<a  rel="external nofollow"  @click.prevent="showInfo">點我提示信息</a>
    <!-- 阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">點我提示信息</button>
        <!-- 修飾符可以連續(xù)寫 -->
        <!-- <a  rel="external nofollow"  @click.prevent.stop="showInfo">點我提示信息</a> -->
    </div>
    <!-- 事件只觸發(fā)一次（常用） -->
    <button @click.once="showInfo">點我提示信息</button>
</div>

到此這篇關(guān)于Vue基礎(chǔ)語法知識梳理上篇的文章就介紹到這了,更多相關(guān)Vue語法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: