Vue的核心技术

admin 管理员组

文章数量: 887019

Vue的核心技术

1.收集表单数据 使用v-model

<div id="app">
    <input id="username" type="text" v-model.trim="user.username">
</div>
<script>
     new Vue({
         el:"#app",
         data:{
             user:{
                 username:'',
             }
         }
     })
</script>

2.列表渲染

语法格式：v-for指令

v-for="(element,index) in elements" :key="element.id"
或者
v-for="(element,index) of elements" :key="element.id"

2.1遍历数组

<div id="app">
    <li v-for="(product, index) in products" :key="product.id">
</div>
<script>
     new Vue({
         el:"#app",
         data:{
             products : [
 				{id:'111',name:'西瓜',price:20},
 				{id:'222',name:'苹果',price:10},
				{id:'333',name:'香蕉',price:30}
			 ]
         }
     })
</script>

2.2遍历对象 遍历字符串 遍历指定次数

<div id="app">
    <!--遍历对象-->
    <li v-for="(product, index) of products" :key="product.id">
    <!--遍历字符串-->
    <li v-for="char, index of str" :key="index">
    <!--遍历指定次数-->
	<li v-for="number,index of 10" :key="index">
</div>
<script>
     new Vue({
         el:"#app",
         data:{
             products : {
 				id:'111',name:'西瓜',price:20,
             },
             str:'西瓜',
         }
     })
</script>

Vue

MVVM模型：

MVVM -【Model-View-ViewMode】 ： vue实现数据驱动视图和双向数据绑定的核心原理，是响应式编 程模型，避免直接操作DOM , 降低DOM操作的复杂性。

M : model 模型，表示当前页面渲染时候依赖的数据源

V : view 视图，表示当前页面渲染的DOM结构，读取数据对象，有两种语法：指令、 {{数据}}

VM : ViewModel 视图模型，用于双向绑定数据与页面，这里指的是Vue的实例，支撑视图去模型 里读取数据，是MVVM的核心。

计算属性：

计算属性指的是通过一系列运算之后，最终得到一个属性值，这个动态计算出来的属性值可以被模板结构或methods方法使用。

格式：

{{computedSize1}}
<input v-model="computedSize2"/>

computed:{
    computedSize1(){
        return 
    },
    //或者 计算属性高级处理
    computedSize2:{
        set(val){
        },
        get(){
            return 
        }
    }
    
}

只要计算属性中依赖的数据源变化了或者使用结果时，计算属性才会自动重新求值

计算属性是基于变量的值进行缓存的

监听属性

监视指定的属性

形式

var vm =new Vue({
	watch:{//局部监听
        监听属性:function(){
            
        }
    }
});
//全局监听
vm.$watch('监听的属性',function(){
    	
});

监听属性和计算属性的区别：

监听是在数据发生变化时才会触发对应的函数

计算属性在页面中使用了其结果或者依赖的数据发生变化的时候就会触发对应的函数

事件处理：

绑定监听

格式：

v-on:xxx="fun1"
@xxx="fun1/fun3(参数,$event)/fun2(参数)"
methods:{
	fn1(e){ //event
		e.target.style='background-color:red';
	},
	fn2(参数){},
	fn3(n,e){
		e.target.style='background-color:green';
	}
}

默认事件对象形参: event （默认会有的参数）

隐含属性对象: $event （event 对象的特殊变量）

$event: 是指当前触发的是什么事件（鼠标事件，键盘事件等）

$event.target: 则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素

事件修饰符

.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
.keycode : 操作的是某个keycode 值的键
.keyName : 操作的某个按键名的键(少部分，比如space空格,enter回车后，a,b,c这种就没有)

@click.prevent=""
@KeyUp.13=""

Vue中 let _this = this的作用

正常我们要获取vue变量或方法的时候，就使用 this ，但是在一些用到回调函数的时候，this指的就不是vue变量，而是回调函数本身，所以在一开始的时候，先定义 _this=this ，这样在任何位置都可以用下划线this来获取vue变量或方法。

let、const、var的区别

块级作用域： 块作用域由 { } 包括，let 和 const 具有块级作用域，var不存在块级作用域。

块级作用域解决了ES5中的两个问题：1. 内层变量可能覆盖外层变量 2.用来计数的循环变量泄露为全局变量

变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是 let 和 const 不会。

重复声明： var可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const 和 let 不允许重复声明变量。

暂时性死区： 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时 性死区。使用var声明的变量不存在暂时性死区。

初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

指针指向： let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向 （可以重新赋值）。但const声明的变量是不允许改变指针的指向。

过滤器：

本质是个函数 必须得有返回值 过滤器中的形参，永远都是“管道符|前面那个值“

定义：

//私有过滤器：
new Vue({
  		//私有的过滤器
        filters:{//过滤函数
            filter1(val){
                //一定要有返回值
            }
        }  
})
//全局过滤器：
 Vue.filter("过滤器名字", (value)=>{
        //过滤逻辑
    })
new Vue({  
})

使用：

v-bind="val|filter1|filter2"    
{{val|filter1|filter2....}}

指令：

以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为 v-if 其中，v- 是Vue的标识，if 是指令 ID

//私有自定义指令:通过组件的 directives 属性，对该组件添加一个局部的指令
directives : {
	'my-directive' : {
		//arg1：el表示绑定了此指令的、原生的dom对象
		//arg2：binding表示一个对象，官方推荐使用：binding
		bind (el, binding) {
		}
	}
}
//全局自定义指令:通过 Vue.directive() 函数注册一个全局的指令 所有Vue实例里有效：
Vue.directive('my-directive',{})

<p v-my-directive>

插件：

Vue插件主要是用于增强Vue，可以把它看作是一个工具库，可以提供很多强大的功能 Vue 插件本质是一个 {}

通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成.

<!--第一步：引入插件，注意要在vue.js之后-->
<script type="text/javascript" src="./js/myPlugin.js"></script>

使用插件

Vue.use()
new Vue({})

组件：

组件是可复用的 Vue 实例，且带有一个名字 *.vue

<!--它包含三部分：模板、逻辑数据、样式-->
<!--
（1）模板：我们都知道组件都有模板，单文件组件也应该有。
以<template>标签包围的就是这个组件的模板。 -->
<template>
<div>
</div>
</template>
<script>
/* (2）逻辑数据：就是<script>包裹的内容。这里面放的是什么，
举个例子就是data、props、methods等
就是组件除了样式和模板之外的都放这里（个人理解）。*/
export default {
name: ""
}
</script>
<style scoped>
/*（3）样式：以<style>包围的内容。就是写css一样理解就行，可以在这里写。
就是在<style>里写css，选择器也有，很好理解。*/
</style>

单页面应用程序SPA

概述

SPA(Single Page Application)：单页面应用程序，是一种前端的开发技术，是现在前、后端分离下的一 种产物。

优缺点：

优点

减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次

并且把大量操作都放到了浏览器中去完成

前、后端完成分离，使服务器只需要提供同一套 JSON 数据接口，就可以同时满足WEB端、桌 面端、手机端等不同的前端设备

而且前端只关注前端、后端只操作数据，各司其职

缺点

首屏加载速度可能会很长 SEO（搜索引擎优化）不友好，

爬虫数据时什么也抓不到

页面复杂度提高、开发难度加大

Vue全家桶有哪些技术：使用vue开发spa

使用 Vue-cli 脚手架工具快速构建项目目录结构、开发环境、部署

使用 Vue-Router 实现路由，实现组件之间的切换

使用 Vuex 实现状态数据的管理

使用 axios 发送 AJAX 和服务器通信

vue-cli目录结构说明

Vue-Cli脚手架文件说明

这个是在vue的入口文件src/main.js里配置的,项目启动之后会最先运行 main.js 文件,main.js里引入了 vue和App组件，也就是App.vue

App.vue

在Vue组件中data必须是一个函数 格式如下：

data(){
    return{
      message:"数据区域"
    }
  }

Vue的生命周期

组件之间通信

通信方式：

props： 自定义属性

vue $emit : 自定义事件

消息订阅与发布(如: pubsub库)

slot

vuex(后面单独讲)

父子关系中父到子之间的通信（props）

格式：

父组件：

:属性名|方法名="父组件的属性|方法"
v-bind:属性名|方法名="父组件的属性|方法"

子组件：

//方式一：只指定名称
export default{
	props:['属性名|方法名']
}
//方式二: 指定名称和类型
export default{
	props:{
	  属性名:属性类型
	}
}
//方式三: 指定名称/类型/必要性/默认值
export default{
	props:{
	  type:属性类型
      required:boolean;//是否必要
      default:''//默认值
	}
}

父子关系中子到父的功能【$emit】

在父组件自定义一个处理接受变化状态的逻辑

//父组件
<Header @todoChange="addTodo"/>

methods:{
	addTodo(todo){
		this.todos.unshift(todo)
	}
}
//绑定方式一： 通过 v-on 绑定
<Header @todoChange="addTodo"/>
//绑定方式二： 通过 $on() 绑定
<Header ref="header"/>

//ref引用:
//vue提供 ref 指定唯一标识,用来辅助开发者在不依赖于jQuery的情况下，获取dom元素或组件的引用。
   
mounted () { //vue钩子函数，挂载的时候执行一次
	this.$refs.header.$on('todoChange', (todo)=> {
    //表示给TodoHeader组件绑定一个事件todoChang1
	this.addTodo(todo)
	})
}

在子组件中如若相关的状态改变时，就触发父组件的逻辑处理事件。

//触发父组件的事件
this.$emit('todoChange',todo);

pubsub-js

组件间通信： pubsub ，消息订阅与发布(PubSubJS 库)

优点：

父子通信 、逐层通信、兄弟组件通信 等等都可以，没有"位置"上的限制，摆脱逐层传递的限制，直接进 行跨组件传递信息(例如函数的调用)

理解：

订阅消息：相当于绑定事件监听(并执行函数体)

PubSub.subscribe('订阅名', (msg, data) => {
//在这里执行真正的业务逻辑
})

发布消息：相当于触发事件

PubSub.publish('订阅名', data)

组件之间的通信slot（插槽）：

插槽（Slot）是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

插槽就是子组件中的提供给父组件使用的一个占位符，用slot标签表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

此方式用于父组件向子组件传递 标签数据 ，解决数据和标签一起改变的情形，某个组件反复的用到

注意：插槽只能使用在 components中 或 template 上

插槽有三种：

默认插槽

子组件：

<!--子组件：在哪里使用就在那里添加<slot></slot>-->
<template>
<!--子组件-->
	<div>
		<h1>今天天气状况：</h1>
		<slot></slot><!--相当于一个占位符-->
        
        <slot name='default'>
		<!--插槽中的默认内容，官方讲：后备内容 没有提供内容则使用默认的，有提供就使用提供的-->
		【这是插槽中的默认内容......】
		</slot>
	</div>
</template>
<script>
	export default {
		name: 'child'
	}
</script>

父组件

<child>
    <!--在子组件<slot></Slot>的内容-->
	<div style="margin-top: 30px">多云，最高气温34度，最低气温28度，微风</div>
</child>

具名插槽

子组件：

<slot name="名称"></slot>

父组件：

<!--
父组件指定名称：
常规： v-slot:插槽名或slot="插槽名"，例如： v-slot:default slot="default"
简写： #插槽名 , 例如： #default
-->
<child>
    <template v-slot:default 或者 slot="default"或者#default>
    	<!--在子组件<slot></Slot>的内容-->
		<div style="margin-top: 30px">多云，最高气温34度，最低气温28度，微风</div>
    </template>
</child>

<child>
    <!--在子组件<slot></Slot>的内容-->
	<div style="margin-top: 30px">多云，最高气温34度，最低气温28度，微风</div>
</child>

注意:

这个标签是个 虚拟的标签 ，只起到包裹的作用，不会被渲染为任何实质性的元
素。

作用域插槽

作用域插槽就是实现在子组件自行决定自己要显示什么内容

子组件：

<slot name="third" 自定义的属性='属性或对象'></slot>
或者
<slot name="third" :自定义的属性='data中的属性或对象'></slot>

父组件：

<template #third="scope"><!--scope不是固定的，官方建议scope，表示从子组件传递过来的数据对象-->
	<p>作用域插槽传递过来的数据对象：{{scope}}</p>
	<p>作用域插槽传递过来的数据对象值：{{scope.msg}}</p>
</template>

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名

<!-- 动态插槽 dynamicSlotName是data定义的属性-->
<template #[dynamicSlotName]>
	<p>动态插槽</p>
</template>

Vue-Router

vue-router是vue.js官方给出的路由解决方案，它只能结合vue项目使用，能够轻松的管理SPA项目中组 件的切换。

VueRouter() : 用于创建路由器的构建函数路由配置

new VueRouter({
// 多个配置项
})

路由配置

routes: [
	{ // 一般路由
		path: '/about',
		component: About
	},
	{ // 自动跳转路由
		path: '/',
		redirect: '/about'
	}
]

注册路由器

import router from './router' //指向index.js（路由模块文件）文件夹即可
	new Vue({
		router //注册
})

使用路由组件标签

使用 标签来声明路由链接,声明路由占位符。

<router-link to="/path">用来生成路由链接</router-link>
	作用: 用来替换我们在切换路由时使用a标签切换路由
	好处: 就是可以自动给路由路径加入#不需要手动加入
<router-view>用来显示当前路由</router-view>

安装：

npm install vue-router@3.5.2

嵌套路由

多级路由用到了 children 属性, routes 中的属性成为一级路由，一级路由中 children 属性成为二级 路由，以此类推。

注意事项：

路由配置，一级路由必须写 / ,二级路由不能写 /

跳转多级路由时,to=“路由路径” 要写全路径，如: to=“/home/news”

配置嵌套路由

export default new VueRouter({
routes :[
	{
		path: '/home',
		component: Home,
		children:[
			{
				path:'news', //二级路由不能写 /
				component: News
			},
			{
				path: '/home/message', //或者使用全路径
				component: Message
			},
			{
				path: '', // 默认显示
				redirect: '/home/news'
			}
		]
	}
]

给路由取别名

可以给路由配置name属性，传递参数的时候会用到，添加name属性后跳转就不用写全路径，可以直接写路由的name

{
	name:'about', //给路由取别名
	component: About,
	path:'/about'
}

<router-link :to="{name:'about'}"></router-link>

数据传递

params 传参 一 显示参数

params 传参 一 不显示参数

query 传参 一 显示参数

标签上自定义 props 属性

1.params 传参 一 显示参数

声明式

该方式是通过的 to 属性实现,该方法的参数可以是一个字符串路径，或者一个描述地 址的对象：

<router-link :to="/child/5">传值</router-link>

使用该方式传值的时候，需要子路由提前配置好参数，例如：

{
	name: 'child'
	path:'/child/:id',
	component: Child
}

取值

<p>接收到的值：{{this.$route.params.id}}</p>

编程式

this.$router.push ：父路由编程式传参(一般通过事件触发)

this.$router.push({
	path:'/child/6'
})

使用该方式传值的时候，同样需要子路由提前配置好参数.

2. params 传参 一 不显示参数

1. 声明式

   该方式是通过的 to 属性实现，与方式一不同的是，这里是通过路由的别名 name 进行传值的，所以需要设置路由的别名。

{
	name:'child',
	component: Child,
	path:'/child' // 不显示参数.
},

<router-link :to="{name:'child',params: {id:50}}">声明式-不显示参数</router-link>

2. 编程式

   this.$router.push 使用该方式传值的时候，同样需要子路由提前配置好参数，不过不能再使用 :/id 来传递参数了，因为父路由中，已经使用 params 来携带参数了

this.$router.push({
	name:'child',
	params:{
		id:60
	}
})

注意：上述这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候，传递的值会丢失

3.query 传参（显示参数）

1. 声明式

   该方式也是通过 组件的 to 属性实现，不过使用该方式传值的时候，需要子路由提前配置 好路由别名（ name 属性）。

{
	name:'child',
	component: Child,
	path:'/child'
},

<router-link :to="{name:'child',query: {id:50}}">query声明式-显示参数</router-link>

在子路由中可以通过下面代码来获取传递的参数值:

<p>query方式接收到的值：{{this.$route.query.id}}</p>

2. 编程式

   {
   	name:'child',
   	component: Child,
   	path:'/child' // 不显示参数
   },
   

   <router-link :to="{name:'child',query: {id:60}}">query声明式-显示参数</router-link>
   <br/>
   <button @click="passData3">query编程式-显示参数</button><br/>
   

   passData3(){
   this.$router.push({
   	name:'child',
   	query:{
   		id:60
   	}
    })
   }
   

4.自定义属性【props】

<router-view :msg="msg"></router-view>

data(){
return {
	msg:'hello vue-router!'
	}
},

export default {
	name: 'About',
	props:['msg']
}

总结

vue-router使用步骤：

定义路由组件: src下面router文件夹，创建index.js

注册路由: 在main.js中注册路由模板

使用路由：和

​ 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

注意：被选中的router-link将自动添加一个class属性值.router-link-active。

导航路径，要填写的是你在 router/index.js 文件里配置的 path 值，如果要导航到默认首 页，只需要写成 to=“/”

还可以配合 使用，keep-alive可以缓存数据

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

【只是父子之间的数据传递没必要使用vuex,小型项目官方都不推荐使用vuex,只会增加项目的负担,大型 的项目并且是多个组件共享的用vuex更好】

vuex它能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。 这样不管你在何处改变状 态， 都会通知使用该状态的组件做出相应修改。即Vuex采用集中式存储管理应用的所有组件的状态，这 里的 关键在于集中式存储管理。 这意味着本来需要共享状态的更新是需要组件之间的通讯，而现在有了 Vuex，组件就都和store通讯了。

安装：

npm install vuex@3.6.2

创建Store

import Vue from 'vue'
import Vuex from 'vuex' //引入状态管理工具vuex
//使用
Vue.use(Vuex)
const store=new Vuex.Store({
	//定义装填
	state:{ //相当于我们以前写在vue中的data用来保存数据的，这里是共享数据
	//动态路由的数组
	keepAlive : [],
	//全局域名
	domainName:'hello vuex!'
	}
})
export default store

注册Store

import Vue from 'vue'
import App from './App'
import store from './vuex/store' //引入
Vue.config.productionTip = false
	new Vue({
	render:h=>h(App),
	store //注册
}).$mount("#app")

使用

this.$store.state.名字

状态自管理应用

state ： 驱动应用的数据源

view ： 以声明方式将 state 映射到视图

actions ：响应在 view 上的用户输入导致的状态变化

以下是一个表示“单向数据流”理念的简单示意：

vuex 核心概念和API

state

存储数据，存储状态，页面状态管理容器对象。集中存储Vue components中 data 对象的零散数据， 全 局唯一 ，以进行统一的状态管理。在根实例中注册了store 后，用 this.$store.state 来访问；对应 vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对 应的更新。

const store = new Vuex.store({
state:{
	name:'jack' //初始化数据
	},
})
//页面调用：this.$store.state

mutations

状态改变操作方法。mutations 是Vuex修改state的唯一推荐方法，其他修改方式在严格模式下将会报 错。该方法只 能进行同步操作，比如对该数据的修改、增加、删除等等，且方法名只能全局唯一。

const mutations = {
	/*
	*arg1:state是当前VueX对象中的state
	*arg2:payload是该方法在被调用时传递参数使用的
	*/
	xxx(state,payload) {
	// 更新state 的某个属性
	}
}
//页面通过this.$storemit调用

actions

操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个 同名方法，按照注册的顺序依次触发。 注意：Action 提交的是 mutation，而不是直接改变state，只有 mutation能改变state。

/*
*Actions 中的方法有两个默认参数
*arg1:context 上下文(相当于箭头函数中的this)对象
*arg2:payload 挂载参数
*/
const actions = {
	action名 (context, payload) {
		context.commit('mutation名', payload)
	}
//或者使用{commit}简写
	action名 ({commit}, payload) {
		commit('mutation名', payload)
	}
}
//页面通过 this.$store.dispatch('action名')

getters

Vuex允许我们在store中定义"getter" ，用于对state中存储的数据进行过滤操作。 就像vue生命周期中的computed一样，getter的返回值 会根据它的依赖被缓存起来，且只有当它的依赖 值发生了改变才会被重新计算

const getters = {
	xxx (state) {
		return ...
	}
}
//页面通过 this.$store.getters.xxx

modules

将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

1. 包含多个module
2. 一个module 是一个store 的配置对象
3. 与一个组件(包含有共享数据)对应

const store = new Vuex.Store({
	models:{
		a:{
			state:{},
			getters:{},
			....
		}，
		b:{
			state:{},
			getters:{},
			....
		}，
	}
})
//页面通过 this.$store.state.a

vuex的数据传递流程

当组件进行数据修改的时候我们需要调用 Dispatch 来触发 Actions 里面的方法。

actions 里面的每个方法中都会有一个 commit 方法，当方法执行的时候会通过 commit 来触发 mutations 里面的方法进行数据的修改。

mutations 里面的每个函数都会有一个 state 参数，这样就可以在 mutations 里面进行 state 的数据 修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变。

Ajax：

axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

语法：

{
	// `url` 是用于请求的服务器 URL
	url: '/user',
	// `method` 是创建请求时使用的方法
	method: 'get', // default
	// `params` 是即将与请求一起发送的 URL 参数(相当于我们以前get请求带参数)
	params: {
		ID: 12345
	},
	// `data` 是作为请求主体被发送的数据 (相当于我们以前post请求带参数)
	// 只适用于这些请求方法 'PUT', 'POST', 和'PATCH'
	data: {
		firstName: 'Fred'
	},
	......
}

在使用别名方法时， url 、 method 、 data 这些属性都不必在配置中指定。

axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])

安装：

npm install axios --save

使用：

第一步：axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型 上进行绑定，所以在main.js中：

/*引入axios*/
import axios from 'axios'
/*并且将axios挂到vue.prototype.$http这个原型*/
Vue.prototype.$http = axios

第二步：在App.vue中引入axios

import axios from 'axios'

普通写法：默认为get请求方式

//普通写法：默认请求方式是get
axios({url:aurl,method:'get'}).then((response)=>{
	console.info('请求成功')
},()=>{
	console.info('请求失败')
})

axios使用别名的写法：

axios.get(aurl).then((response)=>{
	console.debug('请求成功')
},()=>{
	console.info('请求失败')
})

使用this.$http

使用 this.$http 就不需要import axios了

this.$http.get(aurl).then((response)=>{
	console.debug('请求成功')
},()=>{
	console.info('请求失败')
})

Webpack

介绍

webpack是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程 序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每 一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

模块化开发

编译typescript，ES6等高级js语法

css预编译

安装webpack

全局安装：

运行CMD，安装命令如下所示，其中， -g是全局安装，并移除安装了 webpack和webpack-cli

npm install webpack webpack-cli –g

npm install webpack@3.6.0 -g 指定版本

1）分模块去定义js 在js中要导出将来要被打包的方法module.exports

2）定义main.js入口主文件 在此文件中，要导入模块文件 可以在main.js中使用导入的方法

3）使用webpack命令打包js

rom ‘axios’

**普通写法**：默认为get请求方式

```js
//普通写法：默认请求方式是get
axios({url:aurl,method:'get'}).then((response)=>{
	console.info('请求成功')
},()=>{
	console.info('请求失败')
})

axios使用别名的写法：

axios.get(aurl).then((response)=>{
	console.debug('请求成功')
},()=>{
	console.info('请求失败')
})

使用this.$http

使用 this.$http 就不需要import axios了

this.$http.get(aurl).then((response)=>{
	console.debug('请求成功')
},()=>{
	console.info('请求失败')
})

Webpack

介绍

webpack是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程 序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每 一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

模块化开发

编译typescript，ES6等高级js语法

css预编译

安装webpack

全局安装：

运行CMD，安装命令如下所示，其中， -g是全局安装，并移除安装了 webpack和webpack-cli

npm install webpack webpack-cli –g

npm install webpack@3.6.0 -g 指定版本

1）分模块去定义js 在js中要导出将来要被打包的方法module.exports

2）定义main.js入口主文件 在此文件中，要导入模块文件 可以在main.js中使用导入的方法

3）使用webpack命令打包js

4）在HTML上引用打包生成的js文件

本文标签： 核心技术 Vue