當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue.js的基本使用学习笔记

發布時間：2024/4/30 vue 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue.js的基本使用学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

VUE的基本使用學習筆記

一、簡介

Vue.js（讀音 /vju?/, 類似于 view）是一套構建用戶界面的漸進式框架。

Vue 只關注視圖層，采用自底向上增量開發的設計。

Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue 學習起來非常簡單，本教程基于 Vue 2.9.3 版本測試。

二、安裝

三、創建項目

創建一個基于webpack模板的項目

vue init webpack myVue 之后需要進行一些配置，默認情況下直接回車即可

測試運行

npm run dev 在瀏覽器中訪問 localhost:8080

vue 目錄結構

目錄\文件說明

build	項目構建(webpack)相關代碼
config	配置目錄，包括端口號等。我們初學可以使用默認的。
node_modules	npm加載的項目依賴模塊
src	這是我們要開發的目錄，基本上要做的事情都在這個目錄里面，里面包含了幾個目錄及文件： 1. assets ：放置一些圖片如logo等 2. components : 里面放了一些組件文件，可以不用 3. App.vue : 項目的入口文件，我們可以將組件直接寫在這里。 4. main.js : 項目的核心文件
static	靜態資源文件，如圖片、字體等
test	初始測試目錄，可以刪除
.xxx 文件	這是一些配置文件
index.html	首頁入口文件，你可以添加一些mate信息或統計代碼啥的
package.json	項目配置文件
README.md	項目的說明文檔 markdown 格式

4. vue文件結構（以App.vue為例）

<template><div id="app"><img src="./assets/logo.png"><hello></hello></div></template><script>// 導入組件import Hello from './components/Hello'export default {name: 'app',components: {Hello}}</script><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style> 1. 嘗試修改vue文件中的內容，發現一般情況下，修改vue文件之后，瀏覽器中的界面會自動刷新

四、安裝vue 調試神器

vue-devtools是一款基于chrome游覽器的插件，用于調試vue應用，這可以極大地提高我們的調試效率。接下來我們就介紹一下vue-devtools的安裝。

安裝：

從chrom 商店下載，后直接安裝，非常的簡單

從git 上獲取資源后安裝：

從git上獲取資源

git地址： https://github.com/vuejs/vue-devtools

解壓后 cmd進入到解壓目錄安裝所需的依賴模塊

npm install // 如果覺得速度太慢可以將npm 升級成為 cnpm 執行cnpm install

編譯項目文件

npm run build

添加到Chrome的擴展程序中：

測試安裝效果：

在瀏覽器中訪問vue編寫的頁面，打開F12會看到有vue一欄

五、模板語法

Vue.js 使用了基于 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。

Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統

結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。

數據綁定：

文本：

數據綁定最常見的形式就是使用 {{…}}（雙大括號）的文本插值：

<div id="app"><p>{{ message }}</p> </div> <script> new Vue({el: '#app',data: {message: 'hello world'} }) </script>

html :

使用 v-html 指令用于輸出 html 代碼：

<div id="app"><div v-html="message"></div> </div><script> new Vue({el: '#app',data: {message: '<h1> hello world</h1>'} }) </script>

屬性：

HTML 屬性中的值應使用 v-bind 指令。

以下實例判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：

<div id="app"><label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1"><br><br><div v-bind:class="{'class1': class1}">directiva v-bind:class</div> </div><script> new Vue({el: '#app',data:{class1: false} }); </script>

表達式：

Vue.js 都提供了完全的 JavaScript 表達式支持。

{{5+5}}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(”).reverse().join(”) }} hello world new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } })

指令：

指令是帶有v- 前綴的特殊屬性。

指令用于在表達式值改變時，將某些行為應用到DOM上。

<div id="app"><p v-if="seen">現在你看到我了</p> </div><script> new Vue({el: '#app',data: {seen: true} }) </script>

參數：

參數在指令后以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：

<div id="app"><pre><a v-bind:href="url">hello world</a></pre> </div><script> new Vue({el: '#app',data: {url: 'http://www.runoob.com'} }) </script> 在這里 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。

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

修飾符：

修飾符是以半角句號 . 指明的特殊后綴，用于指出一個指定應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件調用 event.preventDefault()：

用戶輸入：

在 input 輸入框中我們可以使用 v-model 指令來實現雙向數據綁定:

<div id="app"><p>{{ message }}</p><input v-model="message"> </div><script> new Vue({el: '#app',data: {message: 'Runoob!'} }) </script>

按鈕的事件我們可以使用v-on 監聽事件，并對用戶的輸入做出響應

以下實例在用戶點擊按鈕后對字符串進行翻轉操作：

反轉字符串 new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })

過濾器：

vue.js 允許你定義自己的過濾器，被用作一些不常用的文格式化操作。由”管道符”指示，格式如下：

<div id="app">{{ message | capitalize }} </div><script> new Vue({el: '#app',data: {message: 'runoob'},filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}} }) </script>

過濾器可以串聯：

過濾器也是javaScript函數，因此可以接收參數：

{{ message | filterA('arg1', arg2) }} 這里message 作為過濾器的第一個參數，字符串‘arg1’將傳給過濾器作為第二個參數， arg2 表達式的值將被求值然后傳給過濾器作為第三個參數。

縮寫：

v-bind縮寫：

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

v-on 縮寫：

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

六、 vue.js 條件與循環

條件判斷：

v-if : 用于條件判斷

<div id="app"><p v-if="seen">現在你看到我了</p><template v-if="ok"><h1>hello world</h1><p>學的不僅是技術，更是夢想！</p><p>哈哈哈，打字辛苦啊！！！</p></template> </div><script> new Vue({el: '#app',data: {seen: true,ok: true} }) </script>

v-else : 可以用 v-else 指令給 v-if 添加一個 “else” 塊：

<div id="app"><div v-if="Math.random() > 0.5">Sorry</div><div v-else>Not sorry</div> </div><script> new Vue({el: '#app' }) </script>

v-else-if : v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊?？梢枣準降亩啻问褂?#xff1a;

v-show ：我們也可以使用 v-show 指令來根據條件展示元素：

<h1 v-show="ok">Hello!</h1>

循環語句：

v-for 指令需要以 site in sites 形式的特殊語法， sites 是源數據數組并且 site 是數組元素迭代的別名。

v-for 可以綁定數據到數組來渲染一個列表：

<div id="app"><ol><li v-for="site in sites">{{ site.name }}</li></ol> </div><script> new Vue({el: '#app',data: {sites: [{ name: 'Runoob' },{ name: 'Google' },{ name: 'Taobao' }]} }) </script>

v-for 迭代對象：

<div id="app"><ul><li v-for="value in object">{{ value }}</li></ul> </div><script> new Vue({el: '#app',data: {object: {name: '菜鳥教程',url: 'http://www.runoob.com',slogan: '學的不僅是技術，更是夢想！'}} }) </script>迭代對象時默認迭代的是對象數據中的value ，想使用key的話，可以指定第二個參數： <div id="app"><ul><li v-for="(value, key) in object">{{ key }} : {{ value }}</li></ul> </div>如果想要使用索引，可以指定第三個參數： <div id="app"><ul><li v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}</li></ul> </div>

v-for 迭代整數

七、 vue計算屬性

計算屬性關鍵詞: computed。

計算屬性在處理一些復雜邏輯時是很有用的。

<div id="app"><p>原始字符串: {{ message }}</p><p>計算后反轉字符串: {{ reversedMessage }}</p> </div><script> var vm = new Vue({el: '#app',data: {message: 'Runoob!'},computed: {// 計算屬性的 getterreversedMessage: function () {// `this` 指向 vm 實例return this.message.split('').reverse().join('')}} }) </script> 提供的函數將用作屬性 vm.reversedMessage 的 getter 。

computed VS methods

我們可以使用methods來代替computed ，效果是一樣的，但是computed是基于他的依賴緩存，只有相關依賴發生改變時才會重新取值，而是用methods ，在重新渲染的時候，函數總是會被重新調用執行。

可以說是 computed性能更好，但是如果你不希望使用緩存，你可以使用methods 。

computed setter

computed屬性在默認只有gettter ，不過在需要時你也可以提供一個setter ：

八、監聽屬性

我們可以通過watch來響應數據的變化。

<div id = "computed_props">千米 : <input type = "text" v-model = "kilometers">米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script type = "text/javascript">var vm = new Vue({el: '#computed_props',data: {kilometers : 0,meters:0},methods: {},computed :{},watch : {kilometers:function(val) {this.kilometers = val;this.meters = val * 1000;},meters : function (val) {this.kilometers = val/ 1000;this.meters = val;}}}); </script>

九、樣式綁定

vue.js class

class 與style 是html 元素的屬性，用于設計元素的樣式，我們可以用v-bind來設置樣式屬性。

class 屬性綁定

我們可以為v-bind：class 設置一個對象，從而動態的切換class ：

我們也可以直接綁定數據里的一個對象：

數組語法：

我們可以把一個數組傳給 v-bind:class ，實例如下：

十、 vue.js style (內聯樣式)

我們可以在 v-bind:style 直接設置樣式：

綁定一個樣式對象

十一、事件處理器

v-on 事件監聽：

可以接收一個定義的方法來調用

<div id="app"><button v-on:click="greet">Greet</button> </div><script> var app = new Vue({el: '#app',data: {name: 'Vue.js'},// 在 `methods` 對象中定義方法methods: {greet: function (event) {// `this` 在方法里指當前 Vue 實例alert('Hello ' + this.name + '!')// `event` 是原生 DOM 事件if (event) {alert(event.target.tagName)}}} }) // 也可以用 JavaScript 直接調用方法 app.greet() // -> 'Hello Vue.js!' </script>

事件修飾符：

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節

<a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.stop.prevent="doThat"></a>  <form v-on:submit.prevent></form>  <div v-on:click.capture="doThis">...</div>  <div v-on:click.self="doThat">...</div> <a v-on:click.once="doThis"></a>

按鍵修飾符：

Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<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.ctrl.alt.shift.meta<p><input @keyup.alt.67="clear"><div @click.ctrl="doSomething">Do something</div>

十二、表單

可以用 v-model 指令在表單控件元素上創建雙向數據綁定

v-model 會根據控件類型自動選取正確的方法來更新元素。

輸入框：

實例中演示了 input 和 textarea 元素中使用 v-model 實現雙向數據綁定：

<div id="app"><p>input 元素：</p><input v-model="message" placeholder="編輯我……"><p>消息是: {{ message }}</p><p>textarea 元素：</p><p style="white-space: pre">{{ message2 }}</p><textarea v-model="message2" placeholder="多行文本輸入……"></textarea> </div><script> new Vue({el: '#app',data: {message: 'Runoob',message2: '菜鳥教程\r\nhttp://www.runoob.com'} }) </script>

復選框：

復選框如果是一個為邏輯值，如果是多個則綁定到同一個數組：

<div id="app"><p>單個復選框：</p><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label><p>多個復選框：</p><input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"><label for="runoob">Runoob</label><input type="checkbox" id="google" value="Google" v-model="checkedNames"><label for="google">Google</label><input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"><label for="taobao">taobao</label><br><span>選擇的值為: {{ checkedNames }}</span> </div><script> new Vue({el: '#app',data: {checked : false,checkedNames: []} }) </script>

select 列表：

以下實例中演示了下拉列表的雙向數據綁定：

<div id="app"><select v-model="selected" name="fruit"><option value="">選擇一個網站</option><option value="www.runoob.com">Runoob</option><option value="www.google.com">Google</option></select><div id="output">選擇的網站是: {{selected}}</div> </div><script> new Vue({el: '#app',data: {selected: '' } }) </script>

修飾符：

.lazy

在默認情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：

<input v-model.lazy="msg" >

.number

如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：

這通常很有用，因為在 type=”number” 時 HTML 中輸入的值也總是會返回字符串類型。

.trim

如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：

十二、組件

組件 components是vue最強大的功能之一。

組件可以擴展HTML元素，封裝可重用的代碼

組件系統讓我們可以使用可服用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹。

注冊一個全局組件的語法格式如下：

Vue.component(tagName, options) tagName 為組件名， options為配置選項，我們可以用一下方式來調用組件： <tagName></tagName>

全局組件：

所有的實例都可以用全局組件。

注冊一個全局組件并使用

<div id="app"><runoob></runoob> </div><script> // 注冊 Vue.component('runoob', {template: '<h1>自定義組件!</h1>' }) // 創建根實例 new Vue({el: '#app' }) </script>

局部組件 :

我們也可以在實例選項中注冊局部組件，這樣組件只能在這個實例中使用：

<div id="app"><runoob></runoob> </div><script> var Child = {template: '<h1>自定義組件!</h1>' }// 創建根實例 new Vue({el: '#app',components: {// <runoob> 將只在父模板可用'runoob': Child} }) </script>

Prop

prop 是父組件用來傳遞數據的一個自定義屬性。

父組件的數據需要通過props把數據傳給子組件，子組件需要顯示的用props選項聲明“prop”

<div id="app"><child message="hello!"></child> </div><script> // 注冊 Vue.component('child', {// 聲明 propsprops: ['message'],// 同樣也可以在 vm 實例中像 "this.message" 這樣使用template: '<span>{{ message }}</span>' }) // 創建根實例 new Vue({el: '#app' }) </script>

動態Prop

類似于用v-bind綁定HTML特性到一個表達式，可以使用v-bind動態綁定props的值到父組件的數據中，每當父組件的數據變化時，改變化也會傳到給子組件。

<div id="app"><div><input v-model="parentMsg"><br><child v-bind:message="parentMsg"></child></div> </div><script> // 注冊 Vue.component('child', {// 聲明 propsprops: ['message'],// 同樣也可以在 vm 實例中像 "this.message" 這樣使用template: '<span>{{ message }}</span>' }) // 創建根實例 new Vue({el: '#app',data: {parentMsg: '父組件內容'} }) </script>

以下實例中將 v-bind 指令將 todo 傳到每一個重復的組件中：

<div id="app"><ol><todo-item v-for="item in sites" v-bind:todo="item"></todo-item></ol> </div><script> Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>' }) new Vue({el: '#app',data: {sites: [{ text: 'Runoob' },{ text: 'Google' },{ text: 'Taobao' }]} }) </script>

prop驗證

組件可以為prop指定驗證要求

prop是一個對象而不是一個字符串數組時，它包含驗證要求：

Vue.component('example', {props: {// 基礎類型檢測（`null` 意思是任何類型都可以）propA: Number,// 多種類型propB: [String, Number],// 必傳且是字符串propC: {type: String,required: true},// 數字，有默認值propD: {type: Number,default: 100},// 數組／對象的默認值應當由一個工廠函數返回propE: {type: Object,default: function () {return { message: 'hello' }}},// 自定義驗證函數propF: {validator: function (value) {return value > 10}}} })

type可以使下面的原生構造器：

String

Number

Boolean

Function

Object

Array

type也可以使一個自定義構造器，使用instanceof檢測

自定義事件

父組件是使用props傳遞數據給子組件，但如果子組件要把數據傳遞回去，就需要使用自定義事件。

我們可以使用v-on 綁定自定義事件，每個vue實例都實現了事件接口（Events interface），即：

使用$on(eventName)監聽事件

使用$emit（eventName）觸發事件

<div id="app"><div id="counter-event-example"><p>{{ total }}</p><button-counter v-on:increment="incrementTotal"></button-counter><button-counter v-on:increment="incrementTotal"></button-counter></div> </div><script> Vue.component('button-counter', {template: '<button v-on:click="incrementHandler">{{ counter }}</button>',data: function () {return {counter: 0}},methods: {incrementHandler: function () {this.counter += 1this.$emit('increment')}}, }) new Vue({el: '#counter-event-example',data: {total: 0},methods: {incrementTotal: function () {this.total += 1}} }) </script>

如果你想在某個組件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on 。例如：

<my-component v-on:click.native="doTheThing"></my-component>

父組件給子組件傳值的時候，如果想傳入一個變量，寫法如下：

// 注冊 Vue.component('child', {// 聲明 propsprops: ['message'],// 同樣也可以在 vm 實例中像 "this.message" 這樣使用template: '<span>{{ message }}</span>' }) // 創建根實例 new Vue({el: '#app',data:{message:"hello",} })

十三、自定義指令

除了默認設置的核心指令（如： v-mldel v-show） , Vue也允許注冊自定義指令。

下面我們注冊一個全局指令v-focus , 該指令的功能是在頁面加載時，元素獲得焦點：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><p>頁面載入時，input 元素自動獲取焦點：</p><input v-focus> </div><script> // 注冊一個全局自定義指令 v-focus Vue.directive('focus', {// 當綁定元素插入到 DOM 中。inserted: function (el) {// 聚焦元素el.focus()} }) // 創建根實例 new Vue({el: '#app' }) </script> </body> </html>

我們也可以在實例使用 directives 選項來注冊局部指令，這樣指令只能在這個實例中使用：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><p>頁面載入時，input 元素自動獲取焦點：</p><input v-focus> </div><script> // 創建根實例 new Vue({el: '#app',directives: {// 注冊一個局部的自定義指令 v-focusfocus: {// 指令的定義inserted: function (el) {// 聚焦元素el.focus()}}} }) </script> </body> </html>

鉤子

鉤子函數

指令定義函數提供了幾個鉤子函數（可選）：

bind : 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個綁定時執行一次的初始化操作。

inserted ：被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于document 中）。

update ：被綁定的元素所在的模板更新時調用，而無論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新

componentUpdated : 被綁定的元素在模板完成一次更新時調用。

unbind ：只調用一次，指令與元素解綁時調用。

鉤子函數參數

鉤子函數參數有：

el : 指令所綁定的元素，可以用來直接操作dom

binding ：一個對象，可以包含以下屬性：

name : 指令名，不包括v- 后綴

value ：指令綁定的值

oldValue ：指令綁定的前一個值，，僅在update 和componentUpdate鉤子中使用。無論值是否改變都可以使用。

expression ：綁定值的字符串形式。

arg ：傳給指令的參數

modifiers ：一個包含修飾符的對象

vnode : vue編譯生成的虛擬節點。

oldVnode ：上一個虛擬節點，僅在update 和 componentUpdated 鉤子中使用。

有時候我們不需要其他鉤子函數，我們可以簡寫函數，如下格式：

Vue.directive('runoob', function (el, binding) {// 設置指令的背景顏色el.style.backgroundColor = binding.value.color })

指令函數可接受所有合法的 JavaScript 表達式，以下實例傳入了 JavaScript 對象：

<div id="app"><div v-runoob="{ color: 'green', text: '菜鳥教程!' }"></div> </div><script> Vue.directive('runoob', function (el, binding) {// 簡寫方式設置文本及背景顏色el.innerHTML = binding.value.textel.style.backgroundColor = binding.value.color }) new Vue({el: '#app' }) </script>

十四、路由

路由允許我們通過不同的url 訪問不同的內容

通過vue.js 可以實現多視圖的單頁面web應用

路由需要載入vue-router 庫

安裝路由依賴：

npm 安裝 npm install vue-router 也可以使用CDN 的模式引入 vue-router 依賴 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

簡單實例：

vue.js + vue-router 可以很簡單的實現單頁應用。

一下實例中我們將vue-router 加進來，然后配置組件和路由映射，再告訴vuo-router 在哪里渲染他們，代碼如下所示

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script></head><body><div id="app"><h1>Hello App!</h1><p><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><router-view></router-view></div><script>// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)// 1. 定義（路由）組件。// 可以從其他文件 import 進來const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定義路由// 每個路由應該映射一個組件。其中"component" 可以是// 通過 Vue.extend() 創建的組件構造器，// 或者，只是一個組件配置對象。// 我們晚點再討論嵌套路由。const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }]// 3. 創建 router 實例，然后傳 `routes` 配置// 你還可以傳別的配置參數, 不過先這么簡單著吧。const router = new VueRouter({routes // （縮寫）相當于 routes: routes})// 4. 創建和掛載根實例。// 記得要通過 router 配置參數注入路由，// 從而讓整個應用都有路由功能const app = new Vue({router}).$mount('#app')// 現在，應用已經啟動了！</script></body></html>

總結

以上是生活随笔為你收集整理的Vue.js的基本使用学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

vue

Vue.js的基本使用 学习笔记

VUE的基本使用 學習筆記

一、 簡介

二、 安裝

三 、 創建項目

四 、 安裝vue 調試神器

五、 模板語法

六 、 vue.js 條件與循環

七、 vue計算屬性

八、 監聽屬性

九、 樣式綁定

十、 vue.js style (內聯樣式)

十一 、 事件處理器

十二、 表單

十二、 組件

十三 、 自定義指令

十四 、 路由

總結