當(dāng)前位置：
首頁 >
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
發(fā)布時(shí)間：2025/3/15
37
豆豆
生活随笔
收集整理的這篇文章主要介紹了
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
路由vue-router介紹:
// 1.前端路由核心：錨點(diǎn)值的改變，根據(jù)不同的錨點(diǎn)值，渲染指定dom位置的不同數(shù)據(jù)。// 2.vue中，模板數(shù)據(jù)不是通過ajax請(qǐng)求的，而是調(diào)用函數(shù)獲取到模板內(nèi)容// 3.vue-router使用方式：// 1.下載路由組件 ： npm i vue-router -S// 2.在路由router.js文件中引入vue-router組件 ： import Router from 'vue-router'-----（引入前確保引入：import Vue from 'vue'）// 3.在路由router.js文件中安裝插件,掛載屬性 ：Vue.use(Router)// 4.在路由router.js文件中創(chuàng)建路由對(duì)象，并配置路由規(guī)則后導(dǎo)出路由router.js文件：export default new Router({routers:[path:'/',name:'vue組件中配置屬性name的值',component:導(dǎo)入的組件名]})// 5.將路由router.js文件導(dǎo)入main.js文件中,并在vue實(shí)例中使用：new Vue({router,render: h => h(App)})，注意，在main.js 文件中接收router時(shí)，先導(dǎo)入router。// 7.在app.vue中留坑，實(shí)現(xiàn)組件渲染：<router-view></router-view> 或者 <router-view/>// 4.router-link的使用：// <router-link :to="{name:'路由文件中路由name屬性的值'}"></router-link> 或者 this.$router.push({path:''})-----路由跳轉(zhuǎn)標(biāo)簽，相當(dāng)于a標(biāo)簽，有name屬性，改變錨點(diǎn)值，正常跳轉(zhuǎn)，利于維護(hù)// <router-link to='路徑'>----------沒有name屬性，改變錨點(diǎn)值，不會(huì)正常跳轉(zhuǎn)，后面必須是具體路徑// <router-link :to="{name:'music',query:{id:index}}"></router-link>-----router-link 中query:{id:index}是路徑?后面?zhèn)鞯膮?shù)，在跳轉(zhuǎn)的新頁面created屬性中通過this.$router.query可以拿到值// 編程式路由-----------通過js函數(shù)來實(shí)現(xiàn)頁面的跳轉(zhuǎn) // this.$router.go(1)----------根據(jù)瀏覽器記錄前進(jìn)后退，-1表示上一次瀏覽記錄，1表示下一次瀏覽記錄// this.$router.push('/url')----------直接跳轉(zhuǎn)到某個(gè)頁面顯示 // this.$router.push({name:'路由配置中name屬性的值'}) // this.$router.push({name:'music',query:{id:2,name:2},params:{name:3}}) // this.$router是具備功能的對(duì)象，而this.$route是不具備功能的，它支持只讀。// 重定向路由：{path:'/',redirect:'/home'}---這種不方便維護(hù)，我們還是給它加上name屬性，便于后期維護(hù)：{path:'/',redirect:{name:'路由中name屬性的值'}}// 404頁面處理：當(dāng)輸入的地址找不到時(shí)，這時(shí)可以在路由處理的最后一個(gè)配置{path:'*',component:引入的404頁面組件}// 多視圖路由----------此時(shí)在一個(gè)跟元素里面可以放多個(gè)坑，在路由文件配置中component變成components并且后面接的是一個(gè)對(duì)象，對(duì)象里面是路由匹配的組件：// <router-view name='naem1'>// <router-view name='naem2'>// <router-view> --------------------{naem:'head',path:'/',components:{name1:對(duì)應(yīng)組件,name2:對(duì)應(yīng)組件,default:對(duì)應(yīng)組件}},當(dāng)留的坑里面沒有設(shè)置name屬性時(shí)，路由,components中配置名用default。// 嵌套路由---------路由嵌套路由，用單頁應(yīng)用實(shí)現(xiàn)多頁應(yīng)用，在一個(gè)引入的組件中繼續(xù)留坑引入組件，頁面中只有子組件發(fā)生變化：// 視圖包含視圖：// <router-link :to="{name:'homemusic'}">音樂</router-link>// <router-link :to="{name:'homemovie'}">電影</router-link><hr>// <router-view></router-view>// 父子級(jí)關(guān)系路由：// {// name:'homepage',// path:'/homepage',// component:HomePage,//要渲染的父組件// children:[//父組件中包含的子組件用children:[]屬性，具體參考案例vuetest// { name: 'homemusic', path: 'testmusici', component: Tmu },// { name: 'homemovie', path: 'testmovie', component: Tmo }// ]// }// 動(dòng)態(tài)路由匹配----------路由冒號(hào)后面的路由是動(dòng)態(tài)變化，不同的界面路由不同。// 命名路由和命名視圖// 命名路由：------給路由定義不同的名字，根據(jù)名字進(jìn)行匹配// 命名視圖：------給不同的router-view定義名字，通過名字進(jìn)行對(duì)應(yīng)組件的渲染// 1.安裝：// 1.直接下載：查看dist目錄，dist目錄下的文件是最新穩(wěn)定版，不會(huì)同步更新到dev分支上的最新代碼。// 2.CDN：引用網(wǎng)絡(luò)資源。// 3.npm安裝:npm install vue-router// 2.使用：var Vue = require('vue)// var VueRouter = require('vue-router) 或者 import VueRouter from 'vue-router'// Vue.use(VueRouter)// 3.前端路由和后端路由是不一樣的。// 前端路由：路由地址是根據(jù)不同的URL地址展現(xiàn)不同的內(nèi)容和頁面，在做單頁面應(yīng)用，大部分頁面結(jié)構(gòu)不變，只改變部分內(nèi)容的使用前端路由。優(yōu)點(diǎn)：用戶體驗(yàn)好，速度快。缺點(diǎn)：不利于SEO，沒有合理利用緩存，單頁面無法記住之前滾動(dòng)的位置原生路由實(shí)現(xiàn)原理：
<body><div id="content"></div><script type="text/javascript">//監(jiān)視錨點(diǎn)值的改變做出匹配并設(shè)置內(nèi)容到對(duì)應(yīng)的元素：window.addEventListener('hashchange', function() {var text = '';switch (location.hash) {case '':text = '主頁';break;case '#/movie':text = '電影頁面';break;}document.getElementById('content').innerHTML = text;})</script></body>混入：
混入定義了一部分可復(fù)用的方法或計(jì)算屬性，混入對(duì)象可以包含任意組件選項(xiàng)。組件使用混入對(duì)象后，該組件將可以使用混入對(duì)象的方法或?qū)傩?#xff0c;如：
<script>// 1.定義一個(gè)混入對(duì)象：var myMixin = {data: {sayhello: 'hello'},methods: {say() {console.log($this.data.sayhello);}}};// 2.使用extend方法繼承這個(gè)混入對(duì)象：var Component = Vue.extend({mixins: [myMixin] //mixins 用來混入一個(gè)混入對(duì)象});//3.實(shí)例化一個(gè)組件:var mycom = new Component();//4.在另一個(gè)實(shí)例中使用myMixin:var vm = new Vue({mxins: [myMixin],data: {names: 'jack'}});</script>vue-resource簡介：
// 1.Vue-resource和jQuery中ajax一樣，是一個(gè)異步請(qǐng)求插件，官方已經(jīng)停止維護(hù)了，尤雨溪推薦使用axios,vue-resource使用步驟：// 1.引用文件：網(wǎng)絡(luò)文件：<script src='https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js'></script> 或者 下載到本地：<script src='vue-resource.min.js'></script> 或者 npm install vue-resource --save（推薦） // 2.引入：import VueResource from 'vue-resource'// 3.掛載使用vue-resource： Vue.use(VueResource) ,確保引入vue和app.vue的情況下。// 2.vue-resource的請(qǐng)求API是按照REST風(fēng)格設(shè)計(jì)的，它提供了7種請(qǐng)求API：// 1.get(url,[options])// 2.head(url,[options])// 3.delete(url,[options])// 4.jsonp(url,[body],[options])// 5.post(url,[body],[options])// 6.put(url,[body],[options])// 7.patch(url,[body],[options])//全局?jǐn)r截器 interceptors:-------如果一個(gè)頁面中有多個(gè)請(qǐng)求，此時(shí)需要做一個(gè)loading效果，這時(shí)可以使用interceptors做統(tǒng)一處理。Vue.http.interceptors.push((request,next)=> {// 請(qǐng)求發(fā)送前處理邏輯：next((response) =>{// 請(qǐng)求發(fā)送后處理邏輯：// 根據(jù)請(qǐng)求狀態(tài)，response參數(shù)會(huì)返回給successCallback或errorCallbackreturn response})}) //實(shí)例：注意引入vue和vue-resource：<body><div id="box"><input type="button" @click="get()" value="獲取數(shù)據(jù)"></div><script>window.onload = function(){var vm = new Vue({el:'#box',data:{},methods:{get:function(){//發(fā)送get請(qǐng)求this.$http.get('/try/ajax/ajax_info.txt').then(function(res){console.log(res.body); },function(){console.log('請(qǐng)求失敗處理');});}}});}</script></body>axios(ajax)插件介紹：
// 1.axios插件：--------也是異步請(qǐng)求插件，跨三端的框架，使用步驟：// 1.引用文件：網(wǎng)絡(luò)文件：<script src='https://unpkg.com/axios/dist/axios.min.js'></script> 或者 npm install axios --save（推薦）// 2.引入：import Axios from 'axios' ,確保vue和app.vue的引入。// 3.給Vue原型掛載axios屬性： Vue.prototype.$axios = Axios;當(dāng)然axios是直接暴露在root的，直接可以使用axios.API使用。// 4.提供的API：// 1.$axios.request(options)// 2.$axios.get(url[,options])// 3.$axios.delete(url[,options])// 4.$axios.head(url[,options])// 5.$axios.options(url[,options])// 6.$axios.post(url[,data[,options]])// 7.$axios.put(url[,data[,options]])// 8.$axios.natch(url[,options])// 2.合并請(qǐng)求：this.$axios.all([請(qǐng)求1，請(qǐng)求2])--------將兩個(gè)請(qǐng)求合并發(fā)送，只要有一個(gè)失敗，就算失敗，全體成功才算成功，這里的請(qǐng)求并非路徑，而是通過this.$axios.post或者get的方式請(qǐng)求。// 3.axios()中傳遞對(duì)象配置進(jìn)行請(qǐng)求：axios({method:'post',url:'url',data:{key1:value1,key2:value2}});// 4.攔截器：過濾，在一次請(qǐng)求中添油加醋：// this.axios.interceptors.request.use(function(config){config.headers={}})// 5.token類似cookie，且三端都可通用。//實(shí)例：<div id="app"></div><script>new Vue({el: '#app',data () {return {info: null}},mounted () {axios//鏈?zhǔn)秸{(diào)用.get('url').then(function(response){console.log(response);}).catch(function (error) {console.log(error);});}})</script>計(jì)算屬性watch使用：
// 1.引用型數(shù)據(jù)和它的屬性是無法被直接監(jiān)視的，需要深度監(jiān)視，watch可以對(duì)單個(gè)變量進(jìn)行監(jiān)視，也可以深度監(jiān)視。// 2.computed可以監(jiān)視多個(gè)值， 并且制定返回?cái)?shù)據(jù)，并且可以顯示在頁面上。// 3.watch使用：watch: {persons: {handler: function(val, oldVal) {console.log('值改變了')};deep: true}}//watch定義在vue實(shí)例之外：第一個(gè)參數(shù)表示要監(jiān)聽的變量，第二個(gè)為處理函數(shù)vm.$watch('message',function(newvalue,oldvalue){console.log(oldvalue+'變成了:'+newvalue);})//vue不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新根級(jí)響應(yīng)式屬性，但是可以通過全局Vue.set和Vue.delete方法:Vue.set(target,key,value);Vue.delete(target,key);moment.js介紹：
// 1.moment.js是操作時(shí)間的js內(nèi)庫。// 2.多種安裝方式，這里推薦npm安裝：npm install moment --save ,當(dāng)然可以直接下載下來后直接引入文件。// 3.日期格式化：// moment().format('YYYY-MM-DD HH:mm:ss')---------動(dòng)態(tài)的顯示當(dāng)前時(shí)間,里面的參數(shù)可以控制時(shí)間的格式，具體參考官網(wǎng)。// moment("20120201","YYYYMMDD").fromNow()--------動(dòng)態(tài)的顯示過去某個(gè)時(shí)間具當(dāng)前的時(shí)間過去了多久// 更多參考官網(wǎng)vuex簡介：
// 1.Vuex:是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的全局狀態(tài)管理模式，每一個(gè)組件里面的data變量都稱作狀態(tài)。為了方便管理其中一些變量，此時(shí)需要把里面部分變量抽出來放到Vuex里面去管理。// 在構(gòu)建一個(gè)中大型的單頁面應(yīng)用程序時(shí)，vuex可以更好的幫助我們?cè)诮M件外部統(tǒng)一管理狀態(tài)。// 2.Vuex的核心概念：// State:唯一的數(shù)據(jù)源，數(shù)據(jù)載體，存數(shù)據(jù)的。必須定義State，它是至關(guān)重要的，每一個(gè)組件data里面的變量都稱作State，Mutations是唯一可以改變State的狀態(tài)的東西。// Getters：通過Getters可以派生出一些新的狀態(tài)，獲取數(shù)據(jù)// Mutations：更改vuex的store中的狀態(tài)的唯一方法是提交mutation// Actions：Action提交的是mutation，而不是直接變更狀態(tài)，Action可以包含任意異步操作。// commit:用來提交數(shù)據(jù)的修改。// Modules：面對(duì)復(fù)雜的應(yīng)用程序，當(dāng)管理的狀態(tài)比較多時(shí)，我們需要將vuex的store對(duì)象分割成模塊(modules)// 3.使用步驟： 1.下載vuex：npm install vuex -S// 2.引入vuex: import vuex from 'vue';-----確保引入vue和app.vue的情況下。// 3.掛載vuex：app.use(vuex)// 4.創(chuàng)建一個(gè)stroe: let store = new Vuex.Store({// state:{}----用來存數(shù)據(jù)// });實(shí)現(xiàn)雙向數(shù)據(jù)綁定：
<body><input type="text" id='input1'><br><span id='span1'></span><script>var input1 = document.getElementById('input1');var span1 = document.getElementById('span1');var obj1 = {password: 123};//Object.defineProperty()用來給一個(gè)對(duì)象擴(kuò)展新的屬性，在控制臺(tái)console里面輸入obj1,即可查看新擴(kuò)展的屬性,參數(shù)一--------需要擴(kuò)展的對(duì)象// 參數(shù)二--------需要擴(kuò)展的屬性// 參數(shù)三--------對(duì)擴(kuò)展屬性的描述Object.defineProperty(obj1, 'userNames', { //這里的兩個(gè)函數(shù)是defineProperty底層提供API，如果obj1重新賦值，那么set函數(shù)就會(huì)觸發(fā),如果獲取obj1中的值，那么get函數(shù)就會(huì)觸發(fā)(即：當(dāng)obj1發(fā)生改變時(shí)，會(huì)自動(dòng)觸發(fā)set和get)// value:'jack',get: function() {console.log('get init');},set: function(val) {console.log('set init');// //實(shí)現(xiàn)雙向數(shù)據(jù)綁定：span1.innerText = val;input1.value = val;}});input1.addEventListener('keyup', function(e) {obj1.userNames = e.target.value; //把e.target.value獲取鍵盤抬起監(jiān)聽到的字符賦值給obj1.userNames供Object.defineProperty中set函數(shù)使用來實(shí)現(xiàn)雙向數(shù)據(jù)綁定});</script></body>搭建vue環(huán)境：
// 1.不使用腳手架Vue環(huán)境搭建有兩種方式：//1.官網(wǎng)拷貝： <script src='https://unpkg.com/vue/dist/vue.js'></script>//2.npm安裝： cnpm i vue --save 或者 npm install --global vue// 2.腳手架工具vue-cli構(gòu)建SPA應(yīng)用，在cmd面板自動(dòng)創(chuàng)建一個(gè)項(xiàng)目的架子結(jié)構(gòu)，我們只需要在對(duì)應(yīng)的文件寫代碼即可：步驟(在node和npm的環(huán)境下)：// 1.全局安裝vue-cli ： npm install -g vue-cli -----當(dāng)安裝完后，可使用命令 ： Vue --version 檢查版本以確保安裝成功// 2.初始化一個(gè)webpack簡單模式下的demo : vue init webpack-simple demo 或者 初始化一個(gè)webpack完整的demo2 : vue init webpack myproject --------demo和myproject是項(xiàng)目文件夾名稱// 3.完成上面的操作后，會(huì)在cmd控制面板彈出：Project name (默認(rèn)文件名) 項(xiàng)目名字----------自定義項(xiàng)目的名字，名稱一定要小寫，否則不會(huì)通過。// Project description 項(xiàng)目描述文字---------描述這個(gè)項(xiàng)目// Author 作者--------------------創(chuàng)建項(xiàng)目的作者// 注意：這里有幾個(gè)選項(xiàng)，不是很重要，直接回車或者選擇No，安裝常用的依賴 : vue-router 等，下面有一項(xiàng)三個(gè)選擇的詢問：是否安裝依賴？// 建議使用npm或者稍后去項(xiàng)目下檢查是否有node-modules,沒有則去命令行鍵入命令：npm install安裝依賴的包，之后命令行執(zhí)行下一步// 項(xiàng)目創(chuàng)建成功提示：Documentation can be found at https://vue.js-templates.github.io/webpack// 運(yùn)行項(xiàng)目執(zhí)行命令：npm run dev -------這里要注意的是：服務(wù)的名稱可能并非dev，可到package.json文件script中"start": "npm run dev"查看服務(wù)名稱。// 運(yùn)行成功提示：You application is running here: http://localhost:8080 -------- 此時(shí)可以到瀏覽器輸入這個(gè)地址查看創(chuàng)建的vue項(xiàng)目 // 注意：vuetest文件夾中有案例，HelloWorld.vue是案例文檔。vue-cli搭建環(huán)境：
vue-cli可快速搭建大型單頁面應(yīng)用，具體步驟如：
1.新建一個(gè)文件夾并命名為：vuecliproject2.進(jìn)入vuecliproject文件夾，鼠標(biāo)右鍵以git的形式打開終端3.在終端輸入：webpack init 初始化一個(gè)package.json文件（沒有全局安裝webpack可：npm install webpack --save,安裝webpack，此時(shí)自動(dòng)初始化一個(gè)package.json文件）4.終端繼續(xù)輸入：npm install vue-cli --save 安裝vue-cli5.終端繼續(xù)輸入：vue init webpack testvuecli 初始化一個(gè)vue-cli的測試項(xiàng)目，這里需要安裝依賴，根據(jù)自己需求進(jìn)行即可6.終端cd進(jìn)入到testvuecli目錄下繼續(xù)執(zhí)行：npm install 下載依賴7.終端繼續(xù)輸入：npm run dev 此時(shí)如果出現(xiàn)：Your application is running here: http://localhost:8080，則可以到瀏覽器輸入 http://localhost:8080 訪問到vue頁面注意：如果這里報(bào)錯(cuò)，請(qǐng)全局安裝webpack后并在終端繼續(xù)通過輸入：npm install ,再次輸入:npm run dev啟動(dòng)。（本應(yīng)用構(gòu)建應(yīng)該在全局安裝webpack和vue-cli等工具基礎(chǔ)上）vue實(shí)例分析：
// 1.頁面入口代碼分析：new Vue({el:'#app',//設(shè)置app的監(jiān)聽區(qū)域router,//用到的路由template:'<App/>',//模板components:{APP}//組件});// ===========過去寫法擴(kuò)展============//new Vue({router,render:function(h){//render是底層提供的一個(gè)API，可以代替template和 components，簡寫如下：return h (App);}// render:h=>h(App)簡寫}).$mount('#app')//通過$mount('#app')掛載到#app中和el是一樣的。// 2.組件代碼分析：// 1.template中必須有一個(gè)跟元素，也就是有一個(gè)div把要復(fù)制來的代碼包裹起來。<template><div></div></template>// 2.導(dǎo)入文件:import './css/style.css' //導(dǎo)入css文件，只需要在import后面跟地址即可。// 3.assets文件和static文件的區(qū)別：// 1.都是存放靜態(tài)資源的.// 2.assets存放的圖片在打包的過程中會(huì)被打包到一起,會(huì)轉(zhuǎn)化為base64位的。// 3.static存放的圖片不會(huì)轉(zhuǎn)化為base64位的,// 4.模擬mock數(shù)據(jù)：// mock數(shù)據(jù)：可以代替接口的json數(shù)據(jù)，供測試用，大大提高開發(fā)效率。package.json文件配置啟動(dòng)項(xiàng)：
// 1.webpack-dev-server存在目錄：node_module/.bin/webpack-dev-server// 2.終端鍵入命令啟動(dòng)命令：node_module/bin/webpack-dev-server --inline --hot --open，這樣就可以使一個(gè)vue文件在index.html文件中渲染出來，每次使用終端是非常不方便的，而且有的時(shí)候也不能打開終端，所以這里我們可以利用package.json執(zhí)行代碼來啟動(dòng)這行命令，執(zhí)行代碼：{"scripts":{"dev":"..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open", //------開發(fā)命令簡化"build":"webpack" //----打包代碼到生產(chǎn)環(huán)境目錄}}提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海
總結(jié)
以上是生活随笔為你收集整理的vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Express框架简介、express使
- 下一篇： vue概述、vue文件特点、vue核心思