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