Vue核⼼介紹

1：VUE基本認知

1、線上課程所有⼈都必須要錄屏

2、作業，私發

3、按照要求進直播間

4、加強⾃⼰管理（課堂，課後）

1：vue介紹

1) 漸進式 JavaScript 框架（有2個庫，核⼼庫和外掛庫，如果能⽤核⼼庫解決的就是⽤核⼼庫，核⼼庫解決不了的，就使⽤外掛庫）漸：逐漸，進：新增

2) 作者: 尤⾬溪(⼀位華裔前 Google ⼯程師)

3) 作⽤: 動態構建⽤戶界⾯，動態DOM操作，js

2：官⽹

3：特點

1)遵循 MVVM 模式 , model view vm ViewModel

2)編碼簡潔, 體積⼩, 運⾏效率⾼, 適合移動/PC 端開發

3) 它本⾝只關注 UI, 可以輕鬆引⼊ vue 外掛或其它第三庫開發項⽬

4：與其他框架關係

1) 借鑑 angular 的模板和資料繫結技術（核⼼是模板語法和資料繫結）

2) 借鑑 react 的元件化和虛擬 DOM 技術（核⼼是元件化）

Vue其實是整合了2個框架的優勢

5：vue擴充套件外掛

1) vue-cli: vue 腳⼿架

2) vue-resource(axios): ajax 請求

3) vue-router: 路由， vue

4) vuex: 狀態管理

5) vue-lazyload: 圖⽚懶載入

6) vue-scroller: 頁⾯滑動相關

7) mint-ui: 基於 vue 的 UI 元件庫(移動端)

8) element-ui: 基於 vue 的 UI 元件庫(PC 端)

2：VUE基本使⽤

1：基本使⽤

Vue其實就是⼀個js框架，寫的內容和⽅式還是和以前js⼀致。在html中書寫的位置也是和以前js⼀致。只是⽤法和以前的有點出⼊⽽已。

1). 引⼊vue.js（可以引⼊線上，也可以引⼊⾃⼰下載的）

2). 建立Vue例項物件(vm), 指定選項(配置)物件

el : 指定dom標籤容器的選擇器，表⽰管理的範圍

data : 初始化資料（頁⾯可以訪問），以及資料的繫結變數。

3）.在html標籤上使⽤雙向資料的繫結：v-model， v- vue指令，寫在html的開始標籤內

v-model 宣告的變數必須在vue的data中宣告。否則報錯

4). 在頁⾯中使⽤⼤括號表示式{{mes}}來取值顯⽰資料, 取data中的值

<div id="app">

<input type="text" v-model="mes">

<p>Hello {{mes}}</p>

</div>

<script>

var app = new Vue({

el: '#app',

data: {

mes: 'Vue!'

}

})

</script>

注意：vue的管理範圍只能在所選擇的標籤內。

第⼀個vue指令，使⽤v-model實現資料的雙向繫結！

需求：在輸⼊框內輸⼊內容，在標籤上實時的顯⽰上⾯輸⼊的內容

分析：在輸⼊框中使⽤v-model指令獲取vue例項中data中的初始化資料，然後修改輸⼊框中的內容，將輸⼊框內容和data中的內容實現繫結，

然後將最終的資料使⽤⼤括號表示式在另外標籤中取出即可

2：vue開發者⼯具使⽤

在官⽹下載devtools的外掛，然後將這個外掛拖⾄瀏覽器的拓展外掛中就可以使⽤了。

其實就是⼀個⾕歌瀏覽器的外掛，灰⾊的表⽰沒有使⽤vue，綠⾊的則是使⽤了到了vue，

開啟檢查後會多⼀個vue的選項，出現⼀個root就表⽰建立了⼀個VM物件，其實就是⼀個VUE物件。

⼀般情況下，model就說vue物件中的data資料.

當vue例項的資料發⽣變化時，會實時的更新。可以通過瀏覽器觀察。

3：理解vue的MV VM

Model: 模型，資料物件，其實就是vue物件中的data資料。

View: 檢視，指的是頁⾯檢視，給⽤戶看的內容，其實就是vue管理的那⼀⽚區域的html程式碼；

ViewModel: 檢視模型，就是建立的VUE例項/物件，他的核⼼有2個，⼀個是DOM監聽，⼀個是資料繫結。

通過vm物件，實現將記憶體中的model資料，實時的展⽰在⽤戶可以看到的view頁⾯上！！先通過監聽，然後實現資料的繫結。

3：模板語法

1. 模板的理解:

動態的html頁⾯（頁⾯元素的動態，資料的動態）

包含了⼀些JS語法程式碼

1、插值表示式/雙⼤括號表示式｛｛ mes｝｝，在⼤括號表示式（插值表示式）中還可以調⽤⽅法；

2、指令(以v-開頭的⾃定義標籤屬性)，如 v-model, v-if ,v-for, v-else, v-show ----

2. 雙⼤括號表示式

語法: {{exp}}

功能:

1: 向頁⾯輸出資料，從data中讀取資料，然後顯⽰在頁⾯上；

2: 可以調⽤物件的⽅法, 如：將字串變成⼤寫

需求：

1：在vue例項中宣告資料，在指導的標籤中使⽤雙⼤括號表示式取值展⽰

2：在雙括號表示式中還可以調⽤⼀些簡單的⽅法，如全部變成⼤寫。

3. 指令⼀: 強制資料繫結

功能: 將標籤的屬性值從⼀般的⽂本變成⼀個表示式；

如在data資料中定義⼀個圖⽚的imgurl, 然後在img標籤的src屬性中使⽤⼤括號表示式是⽆法顯⽰圖⽚的，

此時可以強制繫結資料，使⽤v-bind:屬性名 = 屬性值（data中的key）

被v-bind修飾的屬性就不在是以前的單純的屬性了，此時是⼀個表示式，表示式中的內容來源於vue中的資料

完整寫法:

v-bind:xxx='yyy' //此時的yyy就不是⼀個簡單的⽂本了，⽽是把yyy作為⼀個表示式，會從vue例項中去查詢yyy對應的值；

簡潔寫法: v-bind可以省略不寫，如果有的⼯具報錯，請將編譯器調整為ES6的語法；

:xxx='yyy'（這樣的效果和上⾯是⼀樣的）

記住：如果具體的值在vue例項中，這個值⼜是html標籤的某個屬性對應的值，如果希望引⽤的話，則需要使⽤強制資料繫結，強制資料繫結不需要⼤括號表示式，只需要data中的key

4. 指令⼆: 繫結事件監聽

功能: 繫結指定事件名的回撥函式

以前繫結時間的語法是onclick = “test()”,vue 的語法規則如下：

完整寫法: 在標籤中使⽤v-on的指令；

v-on:click='xxx'，繫結⽅法的時候可以加括號也可以不加；

<button v-on:click="test">點我試試看</button>

簡潔寫法: 可以直接使⽤@符號

@click='xxx'

具體執⾏的⽅法需要在vue的例項中使⽤methods宣告，

new Vue({

el: '#app',

data: {

content: 'NBA I Love This Game'

},

methods: {

test () {

alert('你的膽⼦很⼤啊')

}

}

})

注意：如果⽅法需要傳參的話，可以直接傳遞data中的資料，也可以⾃⼰定義資料。

<button @click="test2(mes)">點我試試看</button>

methods: {

test(){

alert("你膽⼦太⼤來 ")

},

test2(mes){

alert(mes)

}

},

4：計算屬性和監視

1. 計算屬性

在computed屬性物件中定義計算屬性的⽅法，

在頁⾯中使⽤{{⽅法名}}來顯⽰計算的結果（如果需要）

語法：

<input v-model="屬性值">

Vm:

computed: {

屬性值(){ // 計算屬性中的⼀個⽅法，該⽅法的返回值就是標籤的屬性值，屬性值會顯⽰在頁⾯中,或者屬性值：function()

return xxx; // 返回的具體內容必須是data中宣告的變數。

}

}

注意：

1、當某⼀個標籤的屬性值是通過2個以上的值確定並且是⼀個動態的，此時可以考慮使⽤計算屬性來實現。

2、計算屬性的⽅法名是最終顯⽰結果標籤的屬性值，該⽅法⼀般需要⼀個返回值，該返回值就是最終需要展⽰的結果，

如果需要在頁⾯中顯⽰，可以使⽤⼤括號表示式取值，如果使⽤⼤括號表示式的話，不需要在data中宣告，如果是使⽤v-model展⽰的話，需要在data中宣告。

3、使⽤v-model宣告的資料繫結，必須要在vue的data中進⾏宣告，否則報錯。

4、計算屬性中的值是需要計算得到的，所以不需要在vue的data中進⾏宣告。

5、在函式中可以使⽤Number() ⽅法將字串轉換為數字，如果⽆法轉換則結果為NaN, 也可以直接在屬性中使⽤V-MODEL.number來實現轉化

2. 監視屬性:

上⾯的案例也可以使⽤全域性的監視⽅式實現。

通過vm物件的$watch()⽅法或watch屬性配置來監視指定的屬性

當屬性變化時, 回撥函式⾃動調⽤, 在函式內部進⾏計算，

語法：watch屬性

Vm:

data: {

a: 1,

b: 2

}

watch: {

屬性值: function(value){ // 對可能變化的屬性值進⾏監視，當屬性值發⽣變化時調⽤該⽅法，value是最新的值。

this.a = this.b + value ; // 注意：a,b 都應該是在 data 中出現過，最後將結果顯⽰在屬性值為 a 的標籤中

}

$watch() ⽅法的監監視：

// vm 是vue的例項物件

vm.$watch('屬性值', function(value){ // value 是監視的值發⽣變化的最新值

this.a = this.b+""+value;

})

計算屬性， vue的指令

課堂內容寫2遍，

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<!-- <script src="js/jquery-1.12.4.js"></script> -->

<!-- vue 其實和jquery ⼀樣的，都是js框架，也是⼀個js⽂件 -->

<script src="js/vue.js"></script>

</head>

<body>

<h2>hello vue </h2>

<!-- 簡單的div標籤，被vue所管理的標籤都應該在div內部 -->

<div id="app">

<!-- 需求：在輸⼊框中輸⼊⼀些內容，實時的展⽰在span標籤中

v-model 雙向資料繫結 , 所指向的這個值必須要在data中進⾏宣告

-->

<input name="uname" v-model="uname"><br>

<input name="uname" v-model="uname"><br>

<span>{{uname.toUpperCase()}}</span>

<!-- 需求：從data中獲取圖⽚的地址

src="imgurl"他會被認為這是⼀個簡單的字串，希望他不僅僅是⼀個字串更希望他是⼀個表示式，能將data中的資料拿上來使⽤

vue 中提供了 v-bind ,將屬性中的內容變成表示式,

語法： v-bind:屬性 = “變數” 變數來源於vue例項的data中 ,

在使⽤中，v-bind可以省略不寫，簡寫的⽅式為 :屬性=“變數”

-->

<img v-bind:src="imgurl" :width="wid" :height="hei">

<!-- 繫結事件

v-on:事件名稱 = “⽅法名”

如： v-on:click = “hello()” , 當點選事件發⽣的時候，會訪問hello的⽅法

-->

<button v-on:click="hello()">你敢點麼</button>

<!-- 只要出現input ，就會使⽤v-model

如果繫結的事件⽅法在執⾏的時候需要引數的話，可以直接的傳遞

也可以從vue的例項物件中進⾏獲取，

-->

<input v-on:blur="world('111')" v-model="mes">

</div>

<script>

// js程式碼在哪⾥編寫，現在還是在哪⾥寫

// js 陣列， var arr = new Array(num)

// {} ⼤括號表⽰⼀個物件，配置物件

// 1，管理的範圍 , el

// 2, data 資料，管理標籤中所有的內容，變數，物件等，資料的初始化var vm = new Vue({

el: "#app",

data: {

uname: "",

pwd: "",

imgurl: 'img/bb.jpg',

wid: '300px',

hei: '200px',

mes: ''

},

methods: {

// 所有的⽅法都是定義在這⾥的

hello(){

alert("你還真敢點啊")

},

world(value){

//在⽅法中如果希望使⽤data中的資料的話，可以直接的使⽤,

// 注意：需要在變數前⾯加this

// alert(this.mes) ✔

alert(value)

}

},

});

// $(function(){

// alert("jquery")

// })

</script>

</body> </html>