2. 程式人生 > >Vue.js框架路由練習

Vue.js框架路由練習

阿新 • • 發佈：2019-02-04
/*定義元件*/ const home = { template: '#home', props:{ info:Array, pic:Array, icon:Array } } const info = { template: '#info' } const
goumai = { template: '#goumai' } const wode = { template:'#wode' } /*定義路由*/ const myroutes = [{ path: '/home', component: home }, { path: '/info'
, component: info }, { path: '/goumai', component: goumai }, { path: '/wode', component: wode }] /*建立VueRouter例項，然後傳'routes'配置*/ const
myr = new VueRouter({ routes: myroutes }) /*建立Vue和掛載根例項*/ const app = new Vue({ router: myr, data:{ info:[ {imgsrc:'http://img.alicdn.com/bao/uploaded/i2/TB16ybkRpXXXXXeXXXXXXXXXXXX_!!0-item_pic.jpg',info:'西麥燕麥片380克/袋裝 原味純麥片早餐 成人即食免煮衝飲無蔗糖',nav:'咖啡/麥片/衝飲',toUrl:'http://item.taobao.com/item.htm?id=534003771051'}, {imgsrc:'http://img.alicdn.com/bao/uploaded/i2/TB1SLSiRFXXXXaMXVXXXXXXXXXX_!!0-item_pic.jpg',info:'安全褲防走光女夏中高腰冰絲無痕莫代爾平角打底保險褲大碼不卷邊',nav:'女士內衣/男士內衣/家居服',toUrl:'http://item.taobao.com/item.htm?id=550539721556'}, {imgsrc:'http://img.alicdn.com/bao/uploaded/i4/TB1cYYHQVXXXXakXXXXXXXXXXXX_!!0-item_pic.jpg',info:'情侶裝夏裝韓版百搭2017新款體恤寬鬆半袖學生短袖T恤女潮上衣服',nav:'女裝/女士精品',toUrl:'http://item.taobao.com/item.htm?id=549327457300'} ], pic:[ {picUrl:'../img/券買買_淘寶天貓優惠券_files/555737bbad955.jpg'}, {picUrl:'../img/券買買_淘寶天貓優惠券_files/594781cc80d85.jpg'} ], icon:[ {iurl:'../img/券買買_淘寶天貓優惠券_files/5695f4aeb8a3f.png',name:'女裝'}, {iurl:'../img/券買買_淘寶天貓優惠券_files/5695ff4d7bd96.png',name:'男裝'}, {iurl:'../img/券買買_淘寶天貓優惠券_files/5695ff6d5b989.png',name:'內衣'}, {iurl:'../img/券買買_淘寶天貓優惠券_files/5695ff9b2eebd.png',name:'鞋子'}, {iurl:'../img/券買買_淘寶天貓優惠券_files/5695ffd10d9e3.png',name:'玩具'}, {iurl:'../img/券買買_淘寶天貓優惠券_files/569600f2bb151.png',name:'盆栽'}, {iurl:'../img/券買買_淘寶天貓優惠券_files/569600f2bb151.png',name:'首飾'}, {iurl:'../img/券買買_淘寶天貓優惠券_files/5805f0ba98f4f.png',name:'美食'}, ] }, methods: { show: function(num) { if(num == 0) { myr.push('home') } else if(num == 1) { myr.push('info') } else if(num == 2) { myr.push('goumai') }else{ myr.push('wode') } } } }).$mount('#app') window.onload = app.show(0)

相關推薦

Vue.js框架路由練習

/*定義元件*/ const home = { template: '#home', props:{ info:Array,

Vue.js框架--路由模組化（二十六）

主要操作技能：   1>建立資料夾\router.js檔案      2>寫入相關路由配置 router.js import Vue from 'vue' //0. 使用路由 import VueRouter from 'vue-

Vue.js框架--路由程式設計式的導航 和History 模式（十九）

主要操作技能： 一、程式設計式的導航        除了使用 <router-link> 建立 a 標籤來定義導航連結，    我們還可以藉助 router 的例項方法，通過編寫程式碼來實現   點選 <router-link :to="..."&g

Vue.js框架練習之購物車

<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head&

vue.js框架搭建

img bsp lin 依賴 logs 查看版本 local router run 安裝腳手架 前提條件：已安裝node（4.0版本以上），npm a、全局安裝 vue-cli npm install -g vue-cli 安裝成功後可以通過命令行查看版本號，如圖 b

Vue.js——框架

bin 數據 使用 操作 style src 定義 rec brush 一.什麽是VUE vue 是一個構建用戶界面的javascript框架 特點：輕量，高效 特性：雙向數據綁定，數據驅動視圖 二.vue的使用 1.引入vue.js <script src=v

Vue.js框架 v-model指令

Vue.js v-model v-model.number v-model.lazy v-model.trim v-model 指令在表單 <input> 及 <textarea> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有

Vue.js指令小練習003 todolist

需求： 分析： 文字框輸入的內容可以新增到ul上 未√的選擇框的總數為未完成總數 任務總數等於li條數 點選li會出現文字框可被編輯 打√的選擇框內容顏色變淡出現刪除線並且不可被編輯 點選完成打√的li會被刪除掉 程式碼： <!

Vue.js指令小練習002 列表點選計算價格

需求如下： 分析： 點選li改變背景色加等於總價，再次點選還原背景色減等於總價。 程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

Vue.js指令小練習001 列表點選變色

需求： 分析： 給li繫結一個背景色樣式，當你點選這個li的時候，這個li背景色的樣式生效，其他的li背景色樣式不生效 程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8

Vue.js框架學習筆記之三

Vue.js中的表單 可以用v-model指令在表單 <input>及 <textarea>元素上建立雙向資料繫結,它會根據控制元件型別自動選取正確的方法來更新元素。 v-model 會忽略所有表單元素的 value、checked、select

Vue.js框架學習筆記之二

Vue.js中的樣式繫結 class和style是HTML元素的屬性，用於設定元素的樣式，我們可以通過v-bind來設定樣式屬性,可繫結一個數據屬性或者物件。 v-bind:class="..." v-bind:style="..." class例項： <!DOCTYPE

vue.js通過路由跳轉傳參，重新整理頁面引數丟失

問題：vue.js路由跳轉，跳轉頁面重新整理後引數丟失，沒有資料，怎麼解決？？ 出現的情況：從新聞列表頁面進入某一條新聞得詳情頁，需要在路由跳轉時給詳情頁面傳送該條新聞得ID，然後詳情頁獲取ID想後臺請求資料將內容展示，還有商品詳情頁等等~ 下面寫了一個小例子，是模擬專案的新聞列表和詳情頁，

Vue.js框架--使用反單引號(ES6 引入了模板字元)（二十九）

     在使用vue程式設計中，元件裡面繫結的事件如果有傳入事件名稱字串/字串引數，這個時候光用單雙引號會出現string is  undefined，這個時候我們就需要用到反單引號，那麼反單引號如何輸出?   作用是什麼? &n

Vue.js框架--Vuex實現元件裡資料持久化（二十八）

主要操作技能：      Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式      新聞頁面每次切換路由時，再次訪問就會請求資料；那麼如何直接從vuex中持久化資料呢？      

Vue.js框架--Vuex實現不同元件計數器資料共享（二十七）

主要操作技能：  官網：https://vuex.vuejs.org/zh/ 一、Vuex 解決不同元件資料共享，資料持久化。     1.安裝 cnpm install vuex --save      &nbs

Vue.js框架--Ui框架的Element UI 按需引入（二十五）

主要操作技能：  1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart  藉助 babel-plugin-component，我們可以只引入需要的元件，以達到減小專案體積的目的

Vue.js框架--Ui框架的Element UI（二十四）

主要操作技能：    1>去官網檢視http://element-cn.eleme.io/2.4/#/zh-CN/component/quickstart      2>安裝:  cnpm i element-u

Vue.js之路由系統

Vue.js生態之vue-router vue-router是什麼? vue-router是Vue的路由系統，定位資源的，我們可以不進行整頁重新整理去切換頁面內容。 vue-router的安裝與基本配置 vue-router.js 可以下載 也可以用cdn，基本配置資訊看如下程式碼 // ht

web前端技術內容詳解之Vue.js框架

Vue.js是一個漸進式框架，只需要具備基本的HTML/CSS/JavaScript基礎就可以快速上手。在用Vue.js構建大型應用時推薦使用NPM安裝，但是需要注意npm的版本需要大於3.0。在通過npm安裝專案後，我們需要對其目錄進行解析：（1）Build：專案構建（webpack）相關程式碼;（2）co