vue的一些基礎知識點

~路人乙~發表於2020-12-30
Vue

介紹

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

引入

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

資料與方法

  • 案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{name}}<br>
			{{errorText}}<br>
			{{code}}
		</div>
		
		<button onclick="changeName()">changeName</button>
		
		<script type="text/javascript">
			
			var data={
				name:"console",
				errorText:"error",
				code:200
			}
		
			var vm=new Vue({
				el:'#app',
				data:data
			});
			
            //變數變化追蹤
			vm.$watch('name',function(newValue,oldValue){
				console.log("info:"+oldValue+"->"+newValue);
				
			});
			
			
			function changeName(){
				data.name='thuce';
			}
			
		</script>
		
	</body>
</html>
  • Object.freeze()方法

Object.freeze()，這會阻止修改現有的 property，也意味著響應系統無法再追蹤變化。

<script type="text/javascript">

    var data={
        name:"console",
        errorText:"error",
        code:200
    }

    Object.freeze(data);

    var vm=new Vue({
        el:'#app',
        data:data
    });

    vm.$watch('name',function(newValue,oldValue){
        console.log("info:"+oldValue+"->"+newValue);

    });


	//按鈕單擊不會改變屬性值
    function changeName(){
        data.name='thuce';
    }

</script>
  • $方法

Vue 例項還暴露了一些有用的例項 property 與方法。它們都有字首 $，以便與使用者定義的 property 區分開來

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一個例項方法
vm.$watch('a', function (newValue, oldValue) {
  // 這個回撥將在 `vm.a` 改變後呼叫
})

生命週期

在這裡插入圖片描述

生命週期鉤子

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 例項
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的鉤子，在例項生命週期的不同階段被呼叫，如 mounted、updated 和 destroyed。生命週期鉤子的 this 上下文指向呼叫它的 Vue 例項。

不要在選項 property 或回撥上使用箭頭函式，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因為箭頭函式並沒有 this，this 會作為變數一直向上級詞法作用域查詢，直至找到為止，經常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

模板語法

插值 v-text/v-html

  • 文字
<p>Using mustaches: {{ rawHtml }}</p>
  • 原始html
<p  v-html="rawHtml"></p>
  • 屬性
<button v-bind:disabled="isButtonDisable">button</button>
  • JavaScript表示式
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

指令v

指令 (Directives) 是帶有 v- 字首的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表示式 (v-for 是例外情況，稍後我們再討論)。指令的職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。回顧我們在介紹中看到的例子：

<p v-if="seen">現在你看到我了</p>

這裡，v-if 指令將根據表示式 seen 的值的真假來插入/移除 元素。

引數v-bind

一些指令能夠接收一個“引數”，在指令名稱之後以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML attribute：

<a v-bind:href="url">...</a>

在這裡 href 是引數，告知 v-bind 指令將該元素的 href attribute 與表示式 url 的值繫結。

另一個例子是 v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">...</a>

動態引數v-bind:[]=“”

從 2.6.0 開始，可以用方括號括起來的 JavaScript 表示式作為一個指令的引數：

<!--
注意，參數列達式的寫法存在一些約束，如之後的“對動態參數列達式的約束”章節所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

這裡的 attributeName 會被作為一個 JavaScript 表示式進行動態求值，求得的值將會作為最終的引數來使用。例如，如果你的 Vue 例項有一個 data property attributeName，其值為 "href"，那麼這個繫結將等價於 v-bind:href。

同樣地，你可以使用動態引數為一個動態的事件名繫結處理函式：

<a v-on:[eventName]="doSomething"> ... </a>

在這個示例中，當 eventName 的值為 "focus" 時，v-on:[eventName] 將等價於 v-on:focus。

對動態引數的值的約束

動態引數預期會求出一個字串，異常情況下值為 null。這個特殊的 null 值可以被顯性地用於移除繫結。任何其它非字串型別的值都將會觸發一個警告。

對動態參數列達式的約束

動態參數列達式有一些語法約束，因為某些字元，如空格和引號，放在 HTML attribute 名裡是無效的。例如：

<!-- 這會觸發一個編譯警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

變通的辦法是使用沒有空格或引號的表示式，或用計算屬性替代這種複雜表示式。

在 DOM 中使用模板時 (直接在一個 HTML 檔案裡撰寫模板)，還需要避免使用大寫字元來命名鍵名，因為瀏覽器會把 attribute 名全部強制轉為小寫：

<!--
在 DOM 中使用模板時這段程式碼會被轉換為 `v-bind:[someattr]`。
除非在例項中有一個名為“someattr”的 property，否則程式碼不會工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

修飾符

修飾符 (modifier) 是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

縮寫

[bind 縮寫]

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動態引數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動態引數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對於 attribute 名來說都是合法字元，在所有支援 Vue 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。

v-show

根據值確定標籤是否顯示,操作標籤屬性

<div v-show="false"></div>

v-if

根據值確定標籤是否顯示,操作DOM

<div v-if="false"></div>

v-for

<li v-for="i in num">{{i}}</li>
<li v-for="(item,index) in num">{{index}}----{{item}}</li>
	
<tr v-for="user in users">
    <td>{{user.name}}</td>
    <td>{{user.age}}</td>
</tr>

v-model

將表單值和data中的資料關聯起來，實現雙向繫結

<input type="text" v-model="tel"/>

案例

<body>
		<div id="app">
			<ul>
				<li v-for="i in num">{{i}}</li>
			</ul>
			
			<ul>
				<li v-for="(item,index) in num">{{index}}-&gt;{{item}}</li>
			</ul>
			
			<table border="" cellspacing="0" cellpadding="2">
				<tr>
					<th>姓名</th>
					<th>年齡</th>
				</tr>
				<tr v-for="user in users">
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
				</tr>
			</table>
			
		</div>
		
		<script type="text/javascript">
			
			var app=new Vue({
				el:"#app",
				data:{
					num:[1,1,2,3,5,8],
					users:[
						{
							name:"zhangsan",
							age:12
						},
						{
							name:"lisi",
							age:18
						}
					]
				}
			});
			
			
			
		</script>
		
	</body>
</html>

計算屬性

案例

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 例項
      return this.message.split('').reverse().join('')
    }
  }
})

結果：

Original message: “Hello”

Computed reversed message: “olleH”

這裡我們宣告瞭一個計算屬性 reversedMessage。我們提供的函式將用作 property vm.reversedMessage 的 getter 函式：

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

相關文章