路由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='/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='/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可以对单个变量进行监视，也可以深度监视。// puted可以监视多个值， 并且制定返回数据，并且可以显示在页面上。// 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("0201","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='/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@联系笔者删除。
笔者：苦海
vue-router路由 mixin混入 vue-resource axios 计算属性watch moment.js vuex vue-cli 数据双向绑定 搭建vue环境 vue实例 配置启动项
如果觉得《vue-router路由 mixin混入 vue-resource axios 计算属性watch moment.js vuex 》对你有帮助，请点赞、收藏，并留下你的观点哦！
