Vue初體驗(二) -Vue的基本使用
2020-10-10 Mac編程之道3.入門實例
3.3.2.vue聲明式渲染
然後我們通過Vue進行渲染：
<body> <div id="app"> <h2>{{name}}，非常帥！！！</h2> </div></body><script src="node_modules/vue/dist/vue.js" ></script><script> // 創建vue實例 var app = new Vue({ el:"#app", // el即element，該vue實例要渲染的頁面元素 data:{ // 渲染頁面需要的數據 name: "峰哥" } });</script>
打開頁面查看效果：
更神奇的在於，當你修改name屬性時，頁面會跟著變化：
3.3.3.雙向綁定 v-model
我們對剛才的案例進行簡單修改：
<body> <div id="app"> <input type="text" v-model="num"> <h2> {{name}}，非常帥！！！有{{num}}位女神為他著迷。 </h2> </div></body><script src="node_modules/vue/dist/vue.js" ></script><script> // 創建vue實例 var app = new Vue({ el: "#app", // el即element，該vue實例要渲染的頁面元素 data: { // 渲染頁面需要的數據 name: "峰哥", num: 5 } });</script>
我們在data添加了新的屬性：num
我們可以觀察到，輸入框的變化引起了data中的num的變化，同時頁面輸出也跟著變化。
- input與num綁定，input的value值變化，影響到了data中的num值
- 頁面{{num}}與數據num綁定，因此num值變化，引起了頁面效果變化。
沒有任何dom操作，這就是雙向綁定的魅力。
3.3.4.事件處理
我們在頁面添加一個按鈕：
<button v-on:click="num++">點我</button>
- 這裡用v-on指令綁定點擊事件，而不是普通的onclick，然後直接操作num
- 普通click是無法直接操作num的。
效果：
4.Vue實例
4.1.創建Vue實例
每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的：
每個Vue實例都需要關聯一段Html模板，Vue會基於此模板進行視圖渲染。
我們可以通過el屬性來指定。
例如一段html模板：
<div id="app"></div>
然後創建Vue實例，關聯這個div
var vm = new Vue({ el:"#app"})
這樣，Vue就可以基於id為app的div元素作為模板進行渲染了。在這個div範圍以外的部分是無法使用vue特性的。
4.3.數據
當Vue實例被創建時，它會嘗試獲取在data中定義的所有屬性，用於視圖的渲染，並且監視data中的屬性變化，當data發生改變，所有相關的視圖都將重新渲染，這就是「響應式「系統。
html
<div id="app"> <input type="text" v-model="name"/></div>
js
var vm = new Vue({ el:"#app", data:{ name:"劉德華" }})
4.4.方法
Vue實例中除了可以定義data屬性，也可以定義方法，並且在Vue實例的作用範圍內使用。
html:
<div id="app"> {{num}} <button v-on:click="add">加</button></div>
js:
var vm = new Vue({ el:"#app", data:{ num: 0 }, methods:{ add:function(){ // this代表的當前vue實例 this.num++; } }})
4.5.生命周期鉤子
4.5.1.生命周期
每個 Vue 實例在被創建時都要經過一系列的初始化過程 ：創建實例，裝載模板，渲染模板等等。Vue為生命周期中的每個狀態都設置了鉤子函數（監聽函數）。每當Vue實例處於不同的生命周期時，對應的函數就會被觸發調用。
生命周期：
4.5.2.鉤子函數
beforeCreated：我們在用Vue時都要進行實例化，因此，該函數就是在Vue實例化是調用，也可以將他理解為初始化函數比較方便一點，在Vue1.0時，這個函數的名字就是init。
created：在創建實例之後進行調用。
beforeMount：頁面加載完成，沒有渲染。如：此時頁面還是{{name}}
mounted：我們可以將他理解為原生js中的window.onload=function({.,.}),或許大家也在用jquery，所以也可以理解為jquery中的$(document).ready(function(){….})，他的功能就是：在dom文檔渲染完畢之後將要執行的函數，該函數在Vue1.0版本中名字為compiled。 此時頁面中的{{name}}已被渲染成峰哥
beforeDestroy：該函數將在銷毀實例前進行調用 。
destroyed：改函數將在銷毀實例時進行調用。
beforeUpdate：組件更新之前。
updated：組件更新之後。
例如：created代表在vue實例創建後；
我們可以在Vue中定義一個created函數，代表這個時期的鉤子函數：
// 創建vue實例 var app = new Vue({ el: "#app", // el即element，該vue實例要渲染的頁面元素 data: { // 渲染頁面需要的數據 name: "峰哥", num: 5 }, methods: { add: function(){ this.num--; } }, created: function () { this.num = 100; } });
4.5.3.this
我們可以看下在vue內部的this變量是誰，我們在created的時候，列印this
methods: { add: function(){ this.num--; console.log(this); } },
5.指令
什麼是指令？
指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的預期值是：單個 JavaScript 表達式。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。
例如我們在入門案例中的v-on，代表綁定事件。
5.1.插值表達式
5.1.1.花括號
格式：
{{表達式}}
說明：
- 該表達式支持JS語法，可以調用js內置函數（必須有返回值）
- 表達式必須有返回結果。例如 1 + 1，沒有結果的表達式不允許使用，如：var a = 1 + 1;
- 可以直接獲取Vue實例中定義的數據或函數
html
<div id="app">{{name}}</div>
var app = new Vue({ el:"#app", data:{ name:"Jack" }})
5.1.3.v-text和v-html
使用v-text和v-html指令來替代{{}}
說明：
- v-text：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會作為普通文本輸出
- v-html：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會被渲染
HTML:
<div id="app"> v-text:<span v-text="hello"></span> <br/> v-html:<span v-html="hello"></span></div>
JS:
var vm = new Vue({ el:"#app", data:{ hello: "<h1>大家好，我是峰哥</h1>" }})
執行結果：
5.2.v-model
剛才的v-text和v-html可以看做是單向綁定，數據影響了視圖渲染，但是反過來就不行。接下來學習的v-model是雙向綁定，視圖（View）和模型（Model）之間會互相影響。
既然是雙向綁定，一定是在視圖中可以修改數據，這樣就限定了視圖的元素類型。目前v-model的可使用元素有：
- input
- select
- textarea
- checkbox
- radio
- components（Vue中的自定義組件）
基本上除了最後一項，其它都是表單的輸入項。
舉例：
html：
<div id="app"> <input type="checkbox" v-model="language" value="Java" />Java<br/> <input type="checkbox" v-model="language" value="PHP" />PHP<br/> <input type="checkbox" v-model="language" value="Swift" />Swift<br/> <h1> 你選擇了：{{language.join(',')}} </h1></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ language: [] } })</script>
執行結果：
5.3.v-on
5.3.1.基本用法
v-on指令用於給頁面元素綁定事件。
語法：
v-on:事件名="js片段或函數名"
<div id="app"> <!--事件中直接寫js片段--> <button v-on:click="num++">增加一個</button><br/> <!--事件指定一個回調函數，必須是Vue實例中定義的函數--> <button v-on:click="decrement">減少一個</button><br/> <h1>有{{num}}個女神迷戀峰哥</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var app = new Vue({ el:"#app", data:{ num:100 }, methods:{ decrement(){ this.num--; } } })</script>
效果：
5.3.3.按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：
<!-- 同上 --><input v-on:keyup.enter="submit"><!-- 縮寫語法 --><input @keyup.enter="submit">
全部的按鍵別名：
- .enter
- .tab
- .delete (捕獲「刪除」和「退格」鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
5.3.4.組合按鈕
可以用如下修飾符來實現僅在按下相應按鍵時才觸發滑鼠或鍵盤事件的監聽器。
- .ctrl
- .alt
- .shift
<!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>
5.4.v-for
遍歷數據渲染頁面是非常常用的需求，Vue中通過v-for指令來實現。
語法：v-for="item in items"
<div id="app"> <ul> <li v-for="user in users"> {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var app = new Vue({ el: "#app", data: { users:[ {name:'柳巖', gender:'女', age: 21}, {name:'峰哥', gender:'男', age: 18}, {name:'範冰冰', gender:'女', age: 24}, {name:'劉亦菲', gender:'女', age: 18}, {name:'古力娜扎', gender:'女', age: 25} ] }, })</script>
執行結果：
5.4.2.數組角標
在遍歷的過程中，如果我們需要知道數組角標，可以指定第二個參數：
語法
v-for="(item,index) in items"
- items：要迭代的數組
- item：迭代得到的數組元素別名
- index：迭代到的當前元素索引，從0開始。
示例
<ul> <li v-for="(user, index) in users"> {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul>
效果：這裡可以看到人名前面有索引
5.4.3.遍歷對象
v-for除了可以迭代數組，也可以迭代對象。語法基本類似
語法：
v-for="value in object"v-for="(value,key) in object"v-for="(value,key,index) in object"
示例：
- 1個參數時，得到的是對象的屬性
- 2個參數時，第一個是屬性，第二個是鍵
- 3個參數時，第三個是索引，從0開始
<div id="app"> <ul> <li v-for="(value, key, index) in user"> {{index + 1}}. {{key}} - {{value}} </li> </ul></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ user:{name:'峰哥', gender:'男', age: 18} } })</script>
效果：
5.5.v-if和v-show
5.5.1.基本使用
v-if，顧名思義，條件判斷。當得到結果為true時，所在的元素才會被渲染。
語法：
v-if="布爾表達式"
示例：
<div id="app"> <button v-on:click="show = !show">點我呀</button> <br> <h1 v-if="show"> 看到我啦？！ </h1> <h1 v-show="show"> 看到我啦？！show </h1></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var app = new Vue({ el: "#app", data: { show: true } })</script>
5.5.4.v-show
另一個用於根據條件展示元素的選項是 v-show 指令。用法大致一樣：
<h1 v-show="ok">Hello!</h1>
示例：
不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
<div id="app"> <!--事件中直接寫js片段--> <button v-on:click="show = !show">點擊切換</button><br/> <h1 v-if="show"> 你好 </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ show:true } }) </script>
5.6.v-bind
html屬性不能使用雙大括號形式綁定，只能使用v-bind指令。
在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。
<div id="app"> <!--可以是數據模型，可以是具有返回值的js代碼塊或者函數--> <div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var app = new Vue({ el: "#app", data: { title: "title", } })</script>
在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。
5.6.1.綁定class樣式
數組語法
我們可以藉助於v-bind指令來實現：
<div id="app"> <div v-bind:class="activeClass"></div> <div v-bind:class="errorClass"></div> <div v-bind:class="[activeClass, errorClass]"></div></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var app = new Vue({ el: "#app", data: { activeClass: 'active', errorClass: ['text-danger', 'text-error'] } })</script>
對象語法
我們可以傳給 v-bind:class 一個對象，以動態地切換 class：
<div v-bind:class="{ active: isActive }"></div>
你可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。如下模板:
上面的語法表示 active 這個 class 存在與否將取決於數據屬性 isActive 的 truthiness（所有的值都是真實的，除了false,0,「」,null,undefined和NaN）。
你可以在對象中傳入更多屬性來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。如下模板:
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
和如下 data：
data: { isActive: true, hasError: false}
結果渲染為：
<div class="static active"></div>
active樣式和text-danger樣式的存在與否，取決於isActive和hasError的值。本例中isActive為true，hasError為false，所以active樣式存在，text-danger不存在。
通常情況下，綁定的數據對象不必內聯定義在模板裡：
<div class="static" v-bind:class="classObject"></div>
數據：
data: { classObject: { active: true, 'text-danger': false }}
效果和之前一樣：
<div class="static active"></div>
5.6.2.綁定style樣式
數組語法
數組語法可以將多個樣式對象應用到同一個元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
data: { baseStyles: {'background-color': 'red'}, overridingStyles: {border: '1px solid black'}}
渲染後的結果：
<div style="background-color: red; border: 1px solid black;"></div>
對象語法
v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
數據：
data: { activeColor: 'red', fontSize: 30}
效果：
<div style="color: red; font-size: 30px;"></div>
5.8.watch
watch可以讓我們監控一個值的變化。從而做出相應的反應。
示例：
<div id="app"> <input type="text" v-model="message"></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ message:"" }, watch:{ message(newVal, oldVal){ console.log(newVal, oldVal); } } })</script>
總結：
關於怎麼Vue的基本使用就介紹到這裡。在這篇文章之前有一篇入門文章。是關於Vue項目搭建的。喜歡的話歡迎大家收藏轉發。同時也順便關注一下我。
相關焦點
-
Vue初體驗 -Vue的安裝和使用
另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。前端框架三巨頭：Vue.js、React.js、AngularJS，vue.js以期輕量易用著稱，vue.js和React.js發展速度最快，AngularJS還是老大。 -
VUE初體驗篇-安裝
vue作為三大前端框架之一，其中平緩的學習曲線，讓好多前端新手非常喜歡，應用也越來越廣泛。雖然其他兩個框架有facebook，和google撐腰，但是vue已然是不可小覷的對手了。無論你去做前端面試還是公司新項目技術選型，vue一定不會跑出你們的備選名單。下面簡單講講做vue開發第一部，安裝！ -
vue.js初入門(一)
（這裡就不介紹怎麼安裝node了，自行百度）這裡我們使用vue-cli腳手架來安裝vue。所以先安裝cli:打開cmd命令行工具，輸入npm安裝命令(我在這裡選擇全局安裝 <-g>)npm install -g vue-cli安裝可能需要一些時間，請耐心等待。 -
Vue教程(路由router-基本使用)
/lib/vue-2.4.0.js&34;app&34;34;, data: {}, methods: {} }) </script></body></html>1234567891011121314151617181920212223 -
Vue-使用vue-video-player組件
在實際開發過程中會有添加視頻的需求在vue項目中添加視頻可以使用vue-video-player組件來實現實現步驟:1.安裝在控制臺輸入: npm install vue-video-player –s -
「Vue.js開發連載二」Vue.js定義
編輯器——vscode微**軟出品的編輯器, 通過vetur插件可以支持vue的語法提示和語法校驗, 他也vue官網推薦的插件, 由於從2.5版本vue已經開始親ts語法, ts又是微軟的開發語言, 所以未來vscode一定是寫 vue體驗最好的編輯器, 建議大家從現在開始就用vscode來寫前端代碼。 -
Vue學習日記(01)：學習理解vue基本理念，寫出第一個小案例
今日學習目標學習vue基本理念寫出第一個「hello world「Vue是什麼？另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。上面引用的是vue官方文檔的解釋，我個人的理解就是，vue更像是一個生態，它通過結合周邊生態構成一個靈活的、漸進式框架。 -
啥都學點：Vue之使用Vue UI可視化創建Vue項目
使用Vue UI之前，先要了解下 Vue CLI，以下為官方介紹：Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供：通過 @vue/cli 搭建交互式的項目腳手架。通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。一個運行時依賴 (@vue/cli-service)，該依賴：可升級；基於 webpack 構建，並帶有合理的默認配置；可以通過項目內的配置文件進行配置；可以通過插件進行擴展。一個豐富的官方插件集合，集成了前端生態中最好的工具。 -
「Vue.js開發連載一」Vue.js簡介
另一方面，在與相關工具和支持庫一起使用時，Vue.js也能完美地驅動複雜的單頁應用。二、Vue能做什麼vue是一個js框架，幫你把DOM操作都綁定到數據操作上，省去了開發者寫操作DOM的代碼，同時給了你一套規範，讓你的代碼更容易維護，可復用性更高，讓開發體驗更好，可以輕鬆做出APP體驗的頁面。 -
Vue的安裝及使用快速入門
vue是一個JavaMVVM庫，是一套用於構建用戶界面的漸進式框架，是初創項目的首選前端框架。它是以數據驅動和組件化的思想構建的，採用自底向上增量開發的設計。它是輕量級的，它有很多獨立的功能或庫，我們會根據我們的項目來選用vue的一些功能。它提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。 -
vue-element-admin簡單使用
什麼是vue-element-admin？vue-element-admin是一款基於Vue和Element-ui的後臺管理的集成解決方案（60%的前後端分離項目都使用它）。官網：https://panjiachen. -
後端開發vue項目推薦 vue-element-admin
這4個階段基本跟前端框架的進展也是吻合的。4個階段如下：l 石器時代後端使用JSP、Freemarker、Velocity等模板引擎，基於內置or自定義標籤。後端直接渲染出前端頁面。缺點有很多：後端一個變量寫不對，整個頁面無法出現。 -
Vue+Axios+Vuex+Vux+Vue-Router全家桶搭建前端框架
其實也不難，秉承效率第一的原則，首先我們必須選擇一個能提高我們工作效率的，所以此時就要對他們有一個簡單的了解，簡單說一下:一、Angular依託於老大哥Google，應用很廣泛，而且相對來說比較成熟穩定一些，然而他有一些比較晦澀難懂的語法，雙向綁定不是容易理解；而且學習成本相對來說比較大，入手不容易，況且很難與現有項目無縫融合，開發成本也就高了；二、再來看看React，出身名門 -
vue高級進階系列——用typescript玩轉vue和vuex
說的簡單點就是對vue的狀態進行統一管理，如下圖介紹了其管理模式：最簡單的使用方法長這樣的：// 如果在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex)const store = new Vuex.Store({ -
SpringBoot+VUE 前後端分離部署（二）
---創建前端VUE交互項目 創建vue項目前，需配置好vue的開發環境nodejs。此處不做環境配置的步驟，以後有需求再處理。這個是我配置好的環境。在瀏覽器上輸入地址訪問，http://localhost:8080這樣就建好前端項目的基本框架結構了 -
vue.js初入門(四模板語法)
文本數據綁定最常見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值：無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。效果：輸出html雙大括號會將數據解釋為純文本，而非 HTML 。 -
使用vue開發小程序
話不多說，我們現在感受一下如何使用mpvue開發小程序。(以下內容參照mpvue文檔完成)、開發環境nodenpm：這裡建議安裝淘寶鏡像微信開發者工具操作順序首先下載vue-clinpm install -g vue-cli使用vue-cli創建一個mpvue項目vue init mpvue/mpvue-quickstart my-project -
給你代碼:ant-desgin-vue使用
ant-desgin是阿里團隊推出的一套設計語言安裝推薦使用vue-cli安裝 npm install -g @vue/cli安裝完畢安裝ant-designnpm install -g ant-design-vue然後就可以使用了使用 import 'ant-design-vue -
vue基本知識點總結——面試必備
③ 銷毀期間的生命周期函數：beforeDestroy()：此時，實例的方法、指令都還可以使用，實例銷毀之前調用。destroyed()：此時，vue實例上的所有指令、綁定、監聽都會被銷毀，子實例也全部被銷毀。6、 vue的生命周期鉤子是如何實現的？答：vue的生命周期鉤子實際上就是一個回調函數。 -
vue中組件的使用(下)
vue中組件的使用（上）中，小編總結了組件的分類和註冊、組件的data選項、組件的props選項的使用，不過這只是組件基本內容的一小部分，在本篇文章中，大家可以了解到組件的模板、監聽子組件的事件、組件插槽、動態組件以及單文件組件的相關內容。