注意:本筆記大體順序是按照 vue.js官方文檔來的，配合食用更加！javascript

一.Vue簡介

1.1Vue的特色

採用組件化模式，提升代碼複用率，且讓代碼更好維護css
聲明式編碼，讓編碼人員無需直接操做DOM，提升開發效率html
使用虛擬DOM+優秀的Diff算法，儘可能複用DOM節點vue

1.2搭建Vue開發環境

能夠打開官網連接去查看安裝步驟：Vue官網地址java

直接用script引入

完整版(包含完整的警告和調試模式)：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>

壓縮版(刪除了警告)：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
複製代碼

最好使用下載Vue Devtools

二.Vue核心

2.1初識Vue

想讓Vue工做，就必須建立一個Vue實例，且要傳入一個配置對象git
root容器裏的代碼依然符合HTML規範，只不過混入了一些特殊的Vue語法github
root容器裏的代碼被稱爲Vue模板ajax
真實開發中只有一個Vue實例，而且會配合着組件一塊兒使用；算法
{xxx}}中的xxx能夠自動讀取到data中的相應屬性，且xxx寫js表達式時會自動執行；markdown
例如：{{name.toUpperCase()}} 大寫，{{1+1}}輸出值爲二，{{Date.now()}}獲取時間戳
一旦data中的數據發生改變，那麼頁面中用到該數據的地方也會自動更新；

注意區分：js表達式 和 js代碼(語句)

1.表達式：一個表達式會產生一個值，能夠放在任何一個須要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'

2.js代碼(語句)
(1). if(){}
(2). for(){}
複製代碼

Vue實例和模板是一一對應的關係，如下兩段代碼中，均沒法正常解析渲染

<div class="root">
        <h1>hello,{{name}}</h1>
</div>

<div class="root">
    <h1>hello,{{name}}</h1>
</div>

<script>
    new Vue({
        el: '.root',
        data: { 
            name:'cez'
        },
        methods: {}
    });
</script>
複製代碼

<div id="root">
        <h1>hello,{{name}},{{address}}</h1>
</div>

<script>
    new Vue({
        el: '#root',
        data: { 
            name:'cez'
        },
        methods: {}
    })
    new Vue({
        el: '#root',
        data: { 
            address:'山東'
        },
        methods: {}
    });
</script>
複製代碼

徹底版代碼：

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>初識Vue</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準備好一個容器 --> <div id="demo"> <h1>Hello，{{name.toUpperCase()}}，{{address}}，{{1+1}},{{Date.now()}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啓動時生成生產提示。 //建立Vue實例 new Vue({ el: '#demo', //el用於指定當前Vue實例爲哪一個容器服務，值一般爲css選擇器字符串。\ // el:document.getElementById('root'),也能夠這麼寫，但不推薦 data: { //data中用於存儲數據，數據供el所指定的容器去使用，值咱們暫時先寫成一個對象。 name: 'zgc', address: '北京' } }) </script> </body> </html>
複製代碼

2.2 模板語法

Vue模板語法有兩大類：
- 插值語法：
  - 功能：用於解析標籤體內容
  - 寫法：{{xxx}},xxx是js表達式，且能夠直接讀取到data中的全部屬性
- 指令語法：
  - 功能：用於解析標籤(包括：標籤屬性、標籤體內容、綁定事件…)
  - 舉例：v-bind:href="xxx"或省略v-bind，xxx一樣要寫js表達式，且能夠直接讀取data中的全部屬性，Vue中有不少的指令，且形式都是：v-????，此處只是拿v-bind舉例子

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>模板語法</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準備好一個容器--> <div id="root"> <h1>插值語法</h1> <h3>你好，{{name}}</h3> <hr /> <h1>指令語法</h1> <a v-bind:href="school.url.toUpperCase()" x="hello">點我去{{school.name}}學習1</a> <a :href="school.url" v-bind:x="hello">點我去{{school.name}}學習2</a> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啓動時生成生產提示。 new Vue({ el: '#root', data: { name: 'zgc', school: { name: '清華', url: 'http://www.atguigu.com', }, hello: '你好' } }) </script> </html>
複製代碼

2.3數據綁定

Vue有兩種數據綁定的方式：

單向綁定(v-bind)：數據只能從data流向頁面。
雙向綁定(v-model)：數據不只能從data流向頁面，還能夠從頁面流向data。

備註：

雙向綁定通常都應用在表單類元素上（如：input、select等）
v-model:value 能夠簡寫爲 v-model，由於v-model默認收集的就是value值。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>數據綁定</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 準備好一個容器-->
	<div id="root">
		<!-- 普通寫法 -->
		<!-- 
			單向數據綁定：<input type="text" v-bind:value="name"><br/>
			雙向數據綁定：<input type="text" v-model:value="name"><br/>
		     -->

		<!-- 簡寫 -->
		單向數據綁定：<input type="text" :value="name"><br />
		雙向數據綁定：<input type="text" v-model="name"><br />

		<!-- 以下代碼是錯誤的，由於v-model只能應用在表單類元素（輸入類元素）上 -->
		<!-- <h2 v-model:x="name">你好啊</h2> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在啓動時生成生產提示。

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷'
		}
	})
</script>
</html>
複製代碼

2.4 el與data的兩種寫法：

data與el的2種寫法
	1.el有2種寫法
		(1).new Vue時候配置el屬性。
		(2).先建立Vue實例，隨後再經過vm.$mount('#root')指定el的值。
	2.data有2種寫法
		(1).對象式
		(2).函數式
	   如何選擇：目前哪一種寫法均可以，之後學習到組件時，data必須使用函數式，不然會報錯。
	3.一個重要的原則：
	   由Vue管理的函數，必定不要寫箭頭函數，一旦寫了箭頭函數，this就再也不是Vue實例了。
           Vue管理的函數舉例：data（），method方法中定義的函數等，this會變成Window
複製代碼

el：

el 屬性又稱掛載點，可認爲是 element 的簡寫，建立一個 vue實例得知道是在哪一塊元素上建立 Vue實例，對哪一塊視圖進行操做。

1. 設置 el 屬性
<div id="app"></div> 
new Vue({ 
  el: "#app", 
  render: h => h(App) 
}) 
2. 使用 $mount 接口
new Vue({
  render: h => h(App) 
}).$mount("#app");
複製代碼

data：

data 屬性又稱內部數據，該屬性值能夠是對象，也能夠是函數，但優先推薦使用函數，對象裏的函數又稱方法。而且如果組件中的 data 則必須使用函數。

優先推薦使用函數的緣由是在使用同一個 options 對象做爲參數建立多個 Vue實例時，若 data 屬性值爲對象，在使用 new Vue(options) 建立 Vue實例時會將 options.data 屬性值直接賦值給 Vue實例.data的屬性，因爲對象的賦值是複製的地址，所以多個實例的 data 屬性值都是指向同一個對象的地址，則多個實例會共用一個 data對象，當一個實例改變 data對象時，另外一個實例的 data對象也會被改變。

而當 data 屬性值爲函數時，Vue 建立實例時是會執行該 data() 函數，並將函數執行的結果返回的對象賦值給 Vue實例.data 屬性，每次函數執行返回的對象都是不一樣的對象，所以多個實例的 data 屬性值對應的是不一樣的對象，一個改變不會影響另一個，各自獨立不影響。

1. 使用對象

data:{ n: 0 }

2. 使用函數

data(){ return{ n: 0 } }
複製代碼

2.5MVVM

MVVM:Model-View-ViewModel 是一種軟件架構模式
- M：Model 對應data中的數據
- V：視圖(View) 模板
- VM：視圖模式(ViewModel) Vue實例對象
data中全部的屬性，最後都出如今了vm身上
vm身上全部的屬性，及Vue原型上全部屬性，在Vue模板中均可以直接使用如{{$options}} {{$emit}}均有結果出現。

2.6 Object.defineProperty()

Vue數據劫持與數據代理，計算屬性等都用到了這個方法，必須理解它。若是你看到這個方法瞬間能反應過來他的用法，看一下我下面的代碼回憶回憶就能夠繼續向下學習，若是不會，則看個人另外一篇博客學習。

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>回顧Object.defineproperty方法</title> </head> <body> <script type="text/javascript"> let number = 18 let person = { name: '張三', sex: '男', } //Object.defineProperty給對象添加屬性 Object.defineProperty(person, 'age', { //裏面三個參數（對象，屬性名，options配置對象{}） // value: 18, // enumerable: true, //控制屬性是否能夠枚舉（遍歷），默認值是false // writable:true, //控制屬性是否能夠被修改，默認值是false // configurable:true //控制屬性是否能夠被刪除，默認值是false //當有人讀取person的age屬性時，get函數(getter)就會被調用，且返回值就是age的值 get() { console.log('有人讀取age屬性了') return number }, //當有人修改person的age屬性時，set函數(setter)就會被調用，且會收到修改的具體值 set(value) { console.log('有人修改了age屬性，且值是', value) number = value } }) // console.log(Object.keys(person)) console.log(person) </script> </body> </html>
複製代碼

2.7 數據代理

何爲數據代理

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>何爲數據代理</title> </head> <body> <!-- 數據代理：經過一個對象代理對另外一個對象中屬性的操做（讀/寫）--> <script type="text/javascript" > let obj = {x:100} let obj2 = {y:200} Object.defineProperty(obj2,'x',{ get(){ return obj.x }, set(value){ obj.x = value } }) </script> </body> </html>
複製代碼

能夠經過obj2對象操做obj對象中的屬性

Vue數據代理

1.Vue中的數據代理：經過vm對象來代理data對象中屬性的操做（讀/寫）

2.Vue中數據代理的好處：更加方便的操做data中的數據

3.基本原理：
經過Object.defineProperty()把data對象中全部屬性添加到vm上。
爲每個添加到vm上的屬性，都指定一個getter/setter。
在getter/setter內部去操做（讀/寫）data中對應的屬性。

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>Vue中的數據代理</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準備好一個容器--> <div id="root"> <h2>學校名稱：{{name}}</h2> <h2>學校地址：{{address}}</h2> <!-- 若是沒有數據代理，代碼要這麼寫，尋找_data中的name屬性與address屬性，太過繁瑣, 由於vm上沒有這兩個屬性，經過數據代理將這兩個屬性放在vm身上一份 <h2>學校名稱：{{_data.name}}</h2> <h2>學校地址：{{_data.address}}</h2> --> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啓動時生成生產提示。 const vm = new Vue({ el: '#root', data: { name: '尚硅谷', address: '宏福科技園' } }) </script> </html>
複製代碼

頁面中學校名稱本來爲尚硅谷，data數據改變後頁面內容也就跟着變了

2.8事件處理

事件的基本使用

事件的基本使用：
1.使用v-on:xxx 或 @xxx 綁定事件，其中xxx是事件名；
2.事件的回調須要配置在methods對象中，最終會在vm上；
3.methods中配置的函數，不要用箭頭函數！不然this就不是vm了；
4.methods中配置的函數，都是被Vue所管理的函數，this的指向是vm 或組件實例對象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但後者能夠傳參；

exact 修飾符
.exact 修飾符容許你控制由精確的系統修飾符組合觸發的事件。

<!-- 即便 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
 
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
 
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>
複製代碼

鼠標按鈕修飾符
這些修飾符會限制處理函數僅響應特定的鼠標按鈕。

.left
.right
.middle
複製代碼

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準備好一個容器--> <div id="root"> <h2>歡迎來到{{name}}學習</h2> <!-- <button v-on:click="showInfo">點我提示信息</button> --> <button @click="showInfo1">點我提示信息1（不傳參）</button> <button @click.right="showInfo1">右鍵點我提示信息1（不傳參）</button> <button @click="showInfo2($event,66)">點我提示信息2（傳參）</button> <!-- 有且只有 ctrl 被按下的時候才觸發 --> <button v-on:click.ctrl.exact="showInfo1">A</button> <!-- shift 即便 與（Alt 或 ctrl） 被一同按下時也會觸發 --> <button v-on:click.shift="showInfo1">A</button> <!-- 沒有任何系統修飾符被按下的時候才觸發 --> <button v-on:click.exact="showInfo1">A</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啓動時生成生產提示。 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', }, methods:{ showInfo1(event){ // console.log(event.target.innerText) // console.log(this) //此處的this是vm alert('同窗你好！') }, showInfo2(event,number){ console.log(event,number) // console.log(event.target.innerText) // console.log(this) //此處的this是vm alert('同窗你好！！') } } }) </script> </html>
複製代碼

事件修飾符

Vue中的事件修飾符：
1.prevent：阻止默認事件（經常使用）；
2.stop：阻止事件冒泡（經常使用）；
3.once：事件只觸發一次（經常使用）；
4.capture：使用事件的捕獲模式；
5.self：只有event.target是當前操做的元素時才觸發事件；
6.passive：事件的默認行爲當即執行，無需等待事件回調執行完畢；

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8" /> <title>事件修飾符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> <style> * { margin-top: 20px; } .demo1 { height: 50px; background-color: skyblue; } .box1 { padding: 5px; background-color: skyblue; } .box2 { padding: 5px; background-color: orange; } .list { width: 200px; height: 200px; background-color: peru; overflow: auto; } li { height: 100px; } </style> </head> <body> <!-- 準備好一個容器--> <div id="root"> <h2>歡迎來到{{name}}學習</h2> <!-- 阻止默認事件（經常使用） --> <a href="http://www.atguigu.com" @click.prevent="showInfo">點我提示信息</a> <!-- 阻止事件冒泡（經常使用） --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">點我提示信息</button> <!-- 在哪一層加了阻止事件冒泡，哪一層外面的全部祖先冒泡都會被阻止 --> <!-- 修飾符能夠連續寫 --> <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">點我提示信息</a> --> </div> <!-- 事件只觸發一次（經常使用） --> <button @click.once="showInfo">點我提示信息</button> <!-- 使用事件的捕獲模式 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是當前操做的元素時才觸發事件； --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">點我提示信息</button> </div> <!-- 事件的默認行爲當即執行，無需等待事件回調執行完畢； --> <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <!-- @wheel滾輪滾動事件 @scroll滾動條滾動事件 --> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在啓動時生成生產提示。 new Vue({ el: '#root', data: { name: '尚硅谷' }, methods: { showInfo(e) { // e.stopPropagation()//阻止冒泡 // e.preventDefault()//阻止默認事件 //能夠不用上面兩種方法而改用事件修飾符 alert('同窗你好！') console.log(e.target) }, showMsg(msg) { console.log(msg) }, demo() { for (let i = 0; i < 100000; i++) { console.log('#') } console.log('累壞了') } } }) </script> </html>
複製代碼

鍵盤事件

1.Vue中經常使用的按鍵別名：
回車 => enter
刪除 => delete (捕獲「刪除」和「退格」鍵)
退出 => esc
空格 => space
換行 => tab (特殊，必須配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2.Vue未提供別名的按鍵，可使用按鍵原始的key值去綁定，但注意要轉爲kebab-case（短橫線命名）

3.系統修飾鍵（用法特殊）：tab、ctrl、alt、shift、meta
(1).配合keyup使用：按下修飾鍵的同時，再按下其餘鍵，隨後釋放其餘鍵，事件才被觸發。
(2).配合keydown使用：正常觸發事件。

4.也可使用keyCode去指定具體的按鍵（不推薦）

<input type="text" placeholder="按下回車提示輸入" @keydown.13="showInfo">
複製代碼

5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，能夠去定製按鍵別名

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>鍵盤事件</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 準備好一個容器-->
	<div id="root">
		<h2>歡迎來到{{name}}學習</h2>
		<input type="text" placeholder="按下回車提示輸入" @keydown.huiche="showInfo">
		<!-- <input type="text" placeholder="按下回車提示輸入" @keydown.enter="showInfo"> -->
		<!--當有需求要同時按下兩個鍵才能生效時 
			<input type="text" placeholder="按下回車提示輸入" @keyup.ctrl.y="showInfo"> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在啓動時生成生產提示。

	Vue.config.keyCodes.huiche = 13 //定義了一個別名按鍵

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷'
		},
		methods: {
			showInfo(e) {
				// console.log(e.key,e.keyCode)
				// if (e.keyCode !== 13) return 若是不是回車鍵，則彈出函數
				console.log(e.target.value)
			}
		},
	})
</script>
</html>
複製代碼

Vue學習筆記（一）