vue-router路由mixin混入vue-resourceaxios计算属性watchmoment.jsvuexvue-cli数据双向绑定搭建vue环境vue实例配置启动项
Posted 苦海123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-router路由mixin混入vue-resourceaxios计算属性watchmoment.jsvuexvue-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或errorCallback
return 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;
// 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.新建一个文件夹并命名为：vuecliproject
2.进入vuecliproject文件夹，鼠标右键以git的形式打开终端
3.在终端输入：webpack init 初始化一个package.json文件（没有全局安装webpack可：npm install webpack --save,安装webpack，此时自动初始化一个package.json文件）
4.终端继续输入：npm install vue-cli --save 安装vue-cli
5.终端继续输入：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-resourceaxios计算属性watchmoment.jsvuexvue-cli数据双向绑定搭建vue环境vue实例配置启动项的主要内容，如果未能解决你的问题，请参考以下文章