Vue.js的基本使用 学习笔记
生活随笔
收集整理的這篇文章主要介紹了
Vue.js的基本使用 学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
VUE的基本使用 學習筆記
一、 簡介
二、 安裝
三 、 創建項目
創建一個基于webpack模板的項目
vue init webpack myVue 之后需要進行一些配置 ， 默認情況下直接回車即可測試運行
npm run dev 在瀏覽器中訪問 localhost:8080| 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><!--js代碼--><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 調試神器
安裝 ：
從git 上獲取資源后安裝：
從git上獲取資源
git地址： https://github.com/vuejs/vue-devtools解壓后 cmd進入到解壓目錄 安裝所需的依賴模塊
npm install // 如果覺得速度太慢 可以將npm 升級成為 cnpm 執行cnpm install編譯項目文件
npm run build五、 模板語法
數據綁定：
文本：
數據綁定最常見的形式就是使用 {{…}}（雙大括號）的文本插值：
<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>屬性：
以下實例判斷 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 } })
指令 ：
指令用于在表達式值改變時 ， 將某些行為應用到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 事件：
<a v-on:click="doSomething">修飾符 ：
修飾符是以半角句號 . 指明的特殊后綴，用于指出一個指定應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件調用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>用戶輸入：
在 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 監聽事件 ， 并對用戶的輸入做出響應
以下實例在用戶點擊按鈕后對字符串進行翻轉操作：
{{ message }}
反轉字符串 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>過濾器可以串聯 ：
{{ message | filterA | filterB }}過濾器也是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 塊。可以鏈式的多次使用：
<div id="app"><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div> </div><script> new Vue({el: '#app',data: {type: 'C'} }) </script>v-show ： 我們也可以使用 v-show 指令來根據條件展示元素：
<h1 v-show="ok">Hello!</h1>循環語句：
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 迭代整數
<div id="app"><ul><li v-for="n in 10">{{ n }}</li></ul> </div>七、 vue計算屬性
計算屬性在處理一些復雜邏輯時是很有用的。
<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 setter
computed屬性在默認只有gettter ， 不過在需要時你也可以提供一個setter ：
var vm = new Vue({el: '#app',data: {name: 'Google',url: 'http://www.google.com'},computed: {site: {// getterget: function () {return this.name + ' ' + this.url},// setterset: function (newValue) {var names = newValue.split(' ')this.name = names[0]this.url = names[names.length - 1]}}} }) // 調用 setter， vm.name 和 vm.url 也會被對應更新 vm.site = '菜鳥教程 http://www.runoob.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);從實例運行結果看在運行 vm.site = '菜鳥教程 http://www.runoob.com'; 時，setter 會被調用， vm.name 和 vm.url 也會被對應更新。八、 監聽屬性
我們可以通過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>九、 樣式綁定
class 屬性綁定
我們可以為v-bind：class 設置一個對象 ， 從而動態的切換class ：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active {width: 100px;height: 100px;background: green; } </style> </head> <body> <div id="app"><div v-bind:class="{ active: isActive }"></div> </div><script> new Vue({el: '#app',data: {isActive: true} }) </script>我們也可以直接綁定數據里的一個對象：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active {width: 100px;height: 100px;background: green; } .text-danger {background: red; } </style> </head> <body> <div id="app"><div v-bind:class="classObject"></div> </div><script> new Vue({el: '#app',data: {classObject: {active: true,'text-danger': true}} }) </script> </body>數組語法：
我們可以把一個數組傳給 v-bind:class ，實例如下：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active {width: 100px;height: 100px;background: green; } .text-danger {background: red; } </style> </head> <body> <div id="app"><div v-bind:class="[activeClass, errorClass]"></div> </div><script> new Vue({el: '#app',data: {activeClass: 'active',errorClass: 'text-danger'} }) </script>十、 vue.js style (內聯樣式)
我們可以在 v-bind:style 直接設置樣式：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div> </div><script> new Vue({el: '#app',data: {activeColor: 'green',fontSize: 30} }) </script>綁定一個樣式對象
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><div v-bind:style="styleObject">菜鳥教程</div> </div><script> new Vue({el: '#app',data: {styleObject: {color: 'green',fontSize: '30px'}} }) </script>十一 、 事件處理器
v-on 事件監聽 ：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><button v-on:click="counter += 1">增加 1</button><p>這個按鈕被點擊了 {{ counter }} 次。</p> </div><script> new Vue({el: '#app',data: {counter: 0} }) </script> </body>可以接收一個定義的方法來調用
<div id="app"><!-- `greet` 是在下面定義的方法名 --><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><!-- click 事件只能點擊一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>按鍵修飾符 ：
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.ctrl.alt.shift.meta<p><!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div>十二、 表單
輸入框：
實例中演示了 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 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >.number
如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：
<input v-model.number="age" type="number">.trim
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim="msg">十二、 組件
注冊一個全局組件的語法格式如下 ：
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
父組件的數據需要通過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是一個對象而不是一個字符串數組時 ， 它包含驗證要求：
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}}} })自定義事件
我們可以使用v-on 綁定自定義事件 ， 每個vue實例都實現了事件接口（Events interface）， 即：
使用$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-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>鉤子
鉤子函數參數
鉤子函數參數有 ：
有時候我們不需要其他鉤子函數，我們可以簡寫函數，如下格式：
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>十四 、 路由
安裝路由依賴：
npm 安裝 npm install vue-router 也可以使用CDN 的模式 引入 vue-router 依賴 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>簡單實例：
一下實例中 我們將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` 屬性指定鏈接. --><!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --><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的基本使用 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python （五） 高级特性
- 下一篇： 30秒实现Vue吸顶效果