VUE+webpack
一，什么是vue?
基本概念：
- vue:目前最火的前端框架(也可以进行手机APP的开发，需要借助weex)
- react：最流行的前端框架（React除了开发网站，还可以开发手机app）
- vue------------angular----------react一起称为前端三大主流框架
- vue是用于构建用户界面的（veu有配套的第三方类库）
为什么学习流行框架：
- 提高开发效率：可以解决一些兼容性的问题，前端模板引擎，能够减少一些不必要dom操作
- 在vue中不再操作dom元素，解放双手，让程序员更多的去关注业务逻辑
框架和库的区别：
- 框架：是一套完整的解决方案，对项目的侵入性很大，项目若需要更替框架，择需要重新架构整个项目
- 库：提供某一个小功能，对项目的入侵性小，如果无法完成某些需求，可以很容易切换
node(后端)中的MVC与前端中的mvvm之间的区别
- mvc是后端的分层开发的概念，分为三个部分其中router，controller，model（操作数据库CRUD就是增删改查）
- mvvm是前端的视图层的概念，主要关注于视图层的分离
- m:保存到每个页面的数据
- v:每个页面的html结构
- vm：他是一个页面的调度者，分割了m和
1.基本代码
#1.安装vue，引入vue
#2.将来new的vue实列，会控制这个元素的所有内容
<div id="app">
<p>{{msg}}</p>
</div>
#3.创建一个vue的实列,当我们安装完之后，在浏览器的内存中，就多了一个vue的构造函数（就可以new出来）
<script>
var vm=new Vue({
//表示当前我们new的这个实列，要控制页面上的哪个区域
el:'#app',
//控制数据
data:{
msg:'欢迎学习vue'
msg2:'<h1>欢迎学习vue</h1>'
mytitle:'这是一个自定义的属性'
},
//控制事件，定义当前vue实列的所有可用的方法
#在vm实列中想要获取data中的数据，或者调用method中的方法，必须通过 this.数据属性名 或 this.方法名 这里的this就表示我们new出来的vm实列对象
methods:{
show(){
alert("我是一个事件")
}
},
filters:{},//过滤器
directives:{},//自定义
components:{}//组件
})
</script>
2.指令学习
1，v-cloak,v-text,v-html的基本使用
-
v-cloak
#可以解决插值表达式闪烁的问题 <p v-clock>{{msg}}</p> <style> [v-clock]{ display:none; } </style> -
v-text
#和v-clock作用相同， <p v-text="msg"></p> //两者区别 1，插值表达式前后可以放任何内容 2，v-text会替换元素中的原本的内容，插值表达式不会 -
v-html
#输出时不会带标签 <p v-text="msg2"></p>
2,v-bind(绑定属性)
-
v-bind绑定属性 (只能实现数据单行绑定 从vm---->v)
#后面可以任意拼接，如123 <input type="button" value="按钮" v-bind:title="mytitle+'123'"> #简写形式':' <input type="button" value="按钮" :title="mytitle+'123'"> -
v-on（绑定事件）
#method找show方法 <input type="button" value="按钮" v-on:click="show'"> #缩写形式“@” #如果给事件加了小括号就可以传参了 <input type="button" value="按钮" @click="show'"> <input type="button" value="按钮" @click="show（）'"> -
v-model(双向数据绑定)
#可以实现“表单”的双向数据绑定，，，只能运用到表单元素中。列select,checkbox,textarea <input type="button" value="按钮" v-model="msg'"> -
v-for(for循环)
#i是下标值,item和i自己可以任意定义 #:key=“”可以防止出现问题进行数据绑定（key值是数字类型） //遍历数组 <p v-for="(item,i) in list" :key="item.id"> <input >索引值： {{item}}---下标值：{{i}} </P> data:{ list:[1,2,3,4,5] } //遍历对象 <p v-for="(value,key,i) in user"></P> data:{ user:{ id：1， name:"名字"， gender:'男' } } #注意事项 //还可以遍历一个方法search是一个方法(通过执行for循环，把所有符合搜索关键的数据，保存到类表中) <p v-for="item in search(keywords)" :key="item.id"></P> -
v-if和v-show
#相当于删除（性能消耗比较高，元素频繁的切换最好不要使用） <h3 v-if="flag">v-if控制的元素</h3> #相当于display:none（） <h3 v-show="flag">v-show控制的元素</h3> #data中 flag:true -
padStart(用于时间的补足) 字符串的方法不是字符串的要先.tostring（）
#padStart(补充的位数,用什么来补充)-----在前面补充 obj.toSring().padStart(2,'0') #padEnd(补充的位数,用什么来补充)-----在后面补充 obj.toSring().padStart(2,'0') -
定时器
var vm=new Vue({ //表示当前我们new的这个实列，要控制页面上的哪个区域 el:'#app', //控制数据 data:{ intervalId:null }, //控制事件，定义当前vue实列的所有可用的方法 #在vm实列中想要获取data中的数据，或者调用method中的方法，必须通过 this.数据属性名 或 this.方法名 这里的this就表示我们new出来的vm实列对象 methods:{ action(){ this.intervalId=setInterval(()=>{ if(this.intervalId!=null) return; 执行的代码段... },500) } //清除定时器 stop(){ clearInterval(this.intervalId) this.intervalId=null } } })
3.事件修饰符
- @click.stop="" ------阻止事件冒泡
- @click.prevent='' ----- 阻止默认行为 如
- @click.capture="" -----捕获触发机制（即先出发父级元素的事件，再触发子元素的事件，给父元素加此属性）
- @click.self=""------只有点击自己才能触发事件
- @click.prevent.once=""-------只触发一次
4.vue中使用样式
class方式：
#方法一直接传递一个数组
<h1 :class="['第二个class类名','第二个class类名']"></h1>
#方法二(三元表达式？：)
#flag没有加单引号，说明他是vm中定义的data中的数据flag:true（flag为true会应用到页面。否之不会）
<h1 :class="['第二个class类名','第二个class类名',flag?'active':'']"></h1>
#方法三(在数组中使用对象的方式，提高代码的可读性)
<h1 :class="['第二个class类名','第二个class类名',{'active':flag}></h1>
#方法四
<h1 :class="{类名：true，类名：true}"></h1>
等价于下面
<h1 :class="classobj"></h1>
var vm=new Vue({
el:'#app',
data:{
classobj:{类名：true，类名：true}
},
内联样式：（style）
#font-weight带有“-”所以要用引号引起来（同理可以写成在vm中定义）
<h1 :style="{color:"red","font-weight":"200"}"></h1>
#方法二应用多个
<h1 :style="[styleobj1,styleobj1]"></h1>
5,过滤器
- 可以用作常见的文本格式化，可以用在两个地方：mustachc插值和v-bind表达式。过滤器应该被添加在javascript表达式的尾部，由“管道”符指示
- 可以替换或者匹配内容
-
全局过滤器：过滤器调用时候的格式{{ name | 过滤器名称（“过滤器参数 ”） }}
#定义过滤器的语法 //“|”就是管道符 //第一个参数已经被固定死了，永远都是过滤器，通道符前面传过来的数据 Vue.filter('过滤器的名称'，function（msg，过滤器参数）{ 获取的是一个传过来的数据 }) -
私有过滤器
#在methods下中定义 //filters可以定义多个过滤器 dataFormate就是其中一个过滤器 //过滤器采用就近原则，如果全局和私有重名，就会调用私有的 filters:{ dataFormate:function(){} }
6.自定义/钩子/生命周期
-
自定义
1.x #自定义按键修饰符（使用：列/按回车时，绑定事件） //系统修饰键，按键修饰符有很多可以查文档 @keyup.键盘码或按键修饰符 @keyup.enter="add()" #自定义全局按键修饰符(下面113是键盘码) Vue.config.keyCodes.f2=113---------->@keyup.f2="add()" 2.x -
自定义全局指令（v-bind类似）
#使用Vue.directive()定义全局指令 //参数1：指令的名称，注意在定义的时候前面可以不加v-前缀,但调用时必须加v- //参数2：是一个对象，是和指令相关的函数 // Vue.directive('focus'，{ ----------->调用时是v-focus //钩子函数 bind:function(el){ ---------当绑定到元素上时会自动执行此函数 （一次） //第一个参数永远都是el，这个el就是原生的js对象 //一个元素只有插入DOM中之后，才能获取焦点 #一般只有样式的才会写在这里 el.style.css.color="red" }, inserted：function(el){ el.focus() #一般js方法会写在这里 }--------当插入到DOM中时。，执行此函数（执行一次） updated:function(){} --------当vnode更新时（执行多次 ） }) -
钩子函数
#自定义指令的时候，如何拿到参数值 <h1 :class="classobj" v-color="'blue'"></h1> bind:function(el,binding){ //第一个参数永远都是el，这个el就是原生的js对象 //一个元素只有插入DOM中之后，才能获取焦点 #一般只有样式的才会写在这里 el.style.css.color=binding.value }, #私有的指令 //在method中 directive：{ //和过滤器同理 bind:{ } } 生命周期
7.生命周期
-
生命周期钩子=生命周期函数=生命周期事件
#这是第一步 beforeCreat(){} //这是遇到的第一个生命周期函数，实列完全创建出来之前，执行他 //在这个函数创建的时候，data和method还没有被初始化 #这是第二步 created(){} //这是遇到的第二个生命周期函数，在这个函数中，data和method已经被初始化好了 #这是第三步 // 这里表示vue开始编辑模板 //把vue的代码中的那些命令进行执行，最终在内存中生成一个编译好的最终模板字符串 //然后把这个模板渲染到内存的dom中 //此时只是渲染到内存中，但并没有渲染到页面 #这是第四步 beforeMonent(){ } //这是遇到的第三个生命周期函数，表示模板已经 在内存中渲染完成，但并没有渲染页面 //页面中的元素还没有真正被替换过来 #这是第五步 mounted(){} //这是第四个生命周期函数，已经渲染到页面 //这是生命周期的最后一个函数，没有操作的话，就会在内存中一动不动 -
运行阶段的钩子函数
#第一个 beforeUpdate(){} //只要界面上有数据更新就会执行这个函数， //执行此函数时，页面中现实的数据还是旧的，data中的数据是最新的，页面尚未和最新的保持同步 #第二个 updated(){} //界面中和data中的数据都是最新的 -
销毁钩子函数
#第一个 beforeDestroy(){} //此时从运行阶段进入销毁阶段 //实列身上的data,method以及过滤器都可用，还没有执行销毁过程 #第二个 destroy(){} //组件已经被完全销毁了，实列身上的data和方法都不可以使用了
8.VUE-resource（获取数据）
-
用于数据的请求，还可以使用"axios"的第三方包实现数据请求
-
首先需要安装vue-resource(先有vue)，然后导入
#get请求的列子method中定义此方法 //.then返回的数据result中的数据在result.body中 //url是请求的服务器地址 { this.$http.get(url,option).then(success(result)) } //emulateJSON:time设置表单提交格式为，普通表单格式 this.$http.post(url,{},{emulateJSON:time}).then
//设置全局作用域 #如果我们通过全局配置了，请求了数据接口根域名，则，每次单独发起http请求的时候，请求的url路径，应该以相对路径开头，前面不能带/，否则不会启用根路径拼接 1.Vue.http.options.root='viruxkjv.com/'(请求的地址相对路径)
//全局启用emulateJSON选项 Vue.http.options.emulateJSON=true;
9.动画
1. 元素的显示隐藏
```javascript
#不带过度效果的动画
data:{
flag:false
}
<input type="button" value="显示隐藏" @clic="flag=!flag">
<h3 v-if="flag">这是一个需要做动画的元素</h3>
#vue提供的动画
//第一步
//使用transition,把需要被动画的元素控制起来(name是用来控制不同的transition块)
<transition name="v">
<h3 v-if="flag">这是一个需要做动画的元素</h3>
</transition>
//第二步
自定义两组样式，来控制transition内部元素实现动画
<style>
.v-enter,
.v-leave-to{
opacity:0px
}
.v-enter-active,
.v-leave-active{
transition:all 0.4s ease;
}
9.1.使用animate.css
#方法一
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
</transition>
#方法二 设置时间:duration（enter：200，leave:400）
<transition enter-active-class=" bounceIn" leave-active-class="bounceOut" :duration="200">
<h3 v-if="flag" calss="animated">这是一个需要做动画的元素</h3>
</transition>
9.2.使用钩子函数实现半场动画
#javaScript钩子
//html中
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="" v-show="flag"></div>
</transition>
//注意：动画钩子函数的第一个参数：·el·,表示要执行动画的哪个DOM元素，是个原生js对象
//可以认为，el,是dodocument.getelementById('')方式获取的原生js对象
methods:{
//动画之前的初始样式，动画未开始
beforeEnter(el){el.style.transform="translate(0,0)"},
//动画开始之后的样子
enter(el,done){
#el.offsetWidth没有实际作用，但如果不写没有过渡效果(只要是和offset相关的都可以)
el.offsetWidth
el.style.transform="translate(150px,150px)"
#元素会立即消失，不会出现等一会的结果
//done()就是afterEnter的引用
done()
},
//动画结束之后
afterEnter(){}
}
9.3列表动画
//在列表过度的时候，若果过度的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup
<style>
.v-enter,
.v-leave-to{
opacity:0px;
transform:translateY(80px);
}
.v-enter-active,
.v-leave-active{
transition:all 0.4s ease;
}
//下面两个属性配合使用，会让列表渐渐消失的结果
.v-move{
transition:all 0.6s ease
}
.v-leave-active{
position:absolute;
}
</style>
#appear，tag为设置渲染出来是什么元素,不设置为默认的span
//html，加入appear属性可以实现页面初始出现的动画效果
<transitionGroup appear tag="ul">
<li v-for="item:list" :key="item.id"
</li>
</transitionGroup>
10.组件
-
什么是组件？组件的出现是为了拆分vue实列的代码量的，能够让我们以不同的组件，来划分不同的功能，需要什么组件直接去调用就行
- 模块化：是从代码逻辑的角度划分
- 组件化：是从UI界面的角度划分的
-
组件的创建方式1
//html中 <my-com1></my-com1> //js中 #1.1 var com1=Vue.extend({ //通过template属性，指定组件要展现的HTML结构 template:'<h3>这是veu.extend创建出来的</h3>' }) #1.2 //Vue.component('组件名'，创建出来的组件模板对象)，组件名在定义时用的驼峰命名，到HTML中需要使用’-‘，列my-con1,如果没有用驼峰，那么直接是mycon1 Vue.component('myCon1',com1)----------<my-com1></my-com1> Vue.component('mycon1',com1)----------<mycom1></mycom1> || || Vue.component('myCon1',Vue.extend({ template:'<h3>这是veu.extend创建出来的</h3>' })) -
组件的创建方式2
注意：无论是哪种方式创建出来的组件，组建的template属性，只能有一个根元素包裹，如
div//html <mycom2></mycom2> //js Vue.component('mycon2',{ template:'<h3>这是veu.component创建出来的</h3>' ) -
组建的创建方式3
//html中 <template id="temp1"> <div>//这是包裹 <h1> 这是通过template元素，这个方式，代码只能提示和高亮 </h1> </div> </div> //js中 Vue.component('mycon3',{ template:'#temp1' )
10.1.私有组件
//html
<login></login>
//js----下方也可利用创建方式3抽离出去
components:{
login:{
template:'<h3>这是私有组件</h3>'
}
}
10.2.组件中的data
- 组件中可以有自己的data数据
- 组件中的data和实列中的data,不一样，实列中的data可以是一个对象，组件中的data必须是一个方法
- 组件中的data除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行
<script>
//组件
Vue.component('mycom1',{
tempalte:'<h3>这是全局组件{{msg}}</h3>',
data:function(){
return {
msg:'这是组件自己的数据'
}
}
methods:{}
})
//创建vue实列，得到viewMoodel
var vm=new vue({
el:'#app',
data:{},
methods:{}
})
</script>
10.3.组件切换
- HTML中
#方法1（缺点只能是两个切换）
<div class="app">
<a href='' @click.prevent="flage=true">登录</a>
<a href="" @click.prevent="flage=true">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
#方法2（vue提供）
<a href='' @click.prevent="conName=‘login'">登录</a>
<a href="" @click.prevent="conName=‘register'">注册</
//component是一个占位符。:is属性，可以用来指定要显示的组件名称
<component :is="'conName'"></component>
-
js中
Vue.component('login',{ template:"登录组件" }) Vue.component('register',{ template:"登录组件" }) //创建vue实列，得到viewMoodel var vm=new vue({ el:'#app', data:{ conName:''//当前component中:is绑定的组件名称 flag:true }, methods:{} })
10.4父组件向子组件传值
- 父组件，可以在引用子组件的时候。通过（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用
<div id="app">
<com1 v-bind:parentmsg="msg"></com1>
</div>
//创建vue实列，得到viewMoodel
var vm=new vue({
el:'#app',
data:{
msg:'我是父组件'
},
methods:{},
components:{
com1:{
//子组件中的data数据，是子组件自己所有，通过ajax，请求回来的数据，都可以放在这里（可读可写）
data(){
return{}
},
template:"我是子组件{{parentmsg}}",
props:['parentmsg'],
//把父组件传递过来的parentmsg属性，先在props数组中，定义一下，才能使用这个数据
//注意：组件中的所有props中的数据，都是通过，父组件传递给子组件的（只可读）
directives:{},
filters:{},
components:{},
menthod:{
}
}
}
})
- 子组件传递事件
<div id="app">
//父组件向子组件 传递 方法，采用事件绑定机制v-on，当我们自定义一个属性之后
<com2 v-on:func="show"></com2>
</div>
<template id="tmp1">
<div>
<h1>这是子组件</h1>
<input type="button" @click="myclick">
</div>
<template>
//js
<script>
var com2={
template:'#tmp1',
method:{
myclick(){
//emit愿意 发射调用
this.$emit('func')
}
}
}
//创建vue实列，得到viewMoodel
var vm=new vue({
el:'#app',
data:{
conName:''//当前component中:is绑定的组件名称
flag:true
},
methods:{
show(){
console.log("我是父组件的方法"),
}
}
components:{
com2
}
})
</script>
//传参数的情况
show(data,data2)------------this.$emit('func',参数1内容，参数2内容)
10.5.ref获取DOM和组件引用
ref
//html
<h3 id="myh3" ref="myh3">获取DOM</H3>
//js
methods:{
getElement(){
console.log(this.$refs.myh3.innerText)
//原生：document.getElementById('myh3').innerText
//ref就是单词 reference; 值类型和引用类型 reference
}
}
11.路由
- 后端路由：所有超链接都是url地址，所有url地址都对应服务器上的资源
- 后端路由：对于单页面应用程序来说，主要通过url中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：http请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现
11.1vue-router路由安装
//安装方式1(会自动安装)
<script src='/path/to/vue.js'></script>
<script src='/path/to/vue-router.js'></script>
//安装方式2
//如果在模块化的工程中使用它（如：webpack）,必须通过Vue.use()（手动安装）明确安装路由功能
npm install vue-router
import Vue form 'vue'
import VueRouter form 'vue-router'
Vue.use(VueRouter)
11.1.1获取数据
11.2.使用
在创建一个路由对象之后，导入vue-router包之后，window全局对象中，就有了一个 构造函数，叫做VueRouter, 在 new 路由对象的时候，可以为构造函数，传递一个配置对象
<div id="app">
//必须带#（这种方式麻烦，官方提供router-link）
<a href="#/login">登录</a>
//router-link控制跳转(tag="span"---改变标签属性)
<router-link to ="/login">登录</router-link>
//vue-router提供的，专门用来当占位符的
<router-view></router-view>
</div>
<script>
#组件模板对象
var login={
template:'登录组件模板对象'
}
#组件应用名称
// Vue.component('login',{
//template:'登录组件应用名称'
// })
#配置路由
var routerObj = new VueRouter({
//route//这个配置对象中的route表示【路由匹配规则】的意思
routes:[
//每个路由规则，都是一个对像，必须有两个属性
//属性1：是path,表示监听的哪个路由链接地址
//属性2：是component,表示path对应的component（组件必须是组件模板对象 不能是组件应用名称）
{path:'/login',component:login}
]
})
//创建vue实列，得到viewMoodel
var vm=new vue({
el:'#app',
data:{},
methods:{}
router:routerObj//将路由规则注册到vm实列上，用来监听url地址改变
)
</script>
11.3.重定向
初始化界面展示哪一页面
routes:[
//这里的redirect和node中完全不同
{path:'/',redirect:'/login'}
]
11.4.默认高亮的方式
#方式1 style默认属性
默认a标签有一个<router-link>属性默认属性`router-link-active`css样式
#方式2 路由构造选项`linkActiveClass`
routes:[],
linkActiveClass:'myactive'-----配置完这个会在标签上多出这个类
11.5.路由切换动画
#第一步（）包裹
-----mode表示过度效果
<transition mode="out-in">
<router-view></router-view>
</transition>
#第二部
style中写入类
11.6.路由传参
- query方式传参
//在路由中，使用查询字符串，给路由传递参数，则不需要修改，路由规则的path属性
var login={
template:'登录组件模板对象{{$route.query.id}}'
//组件中的生命周期钩子函数
created(){
console.log(this.$route.query.id)----获取到的id
}
}
-
params方式传参
//html <router-link to ="/login/12">登录</router-link> //js routes:[ {path:'/login:id',component:login} ] //组件对象中 created(){ console.log(this.$route.params.id)----获取到的id }
11.7路由嵌套
组件中包含路由跳转：
#html
<template>
<router-link to ="/count/login/">登录</router-link>
</template>
routes:[
{path:'/count',
component:login,
//子路由 前面不加斜线，否则永远以根路径进行请求
children:[
path:'login'
]
}
]
11.8.使用命名视图
//放置对应name的组件
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
var header ={
template:'头部区域'
}
var leftBox={
template:'左侧区域'
}
var mainBox={
template:'主体区域'
}
var router = new VueRouter({
//route//这个配置对象中的route表示【路由匹配规则】的意思
routes:[
{path:'/',components:{
'default':header,
'left':leftBox,
'main':mainBox
}
}
]
})
//创建vue实列，得到viewMoodel
var vm=new vue({
el:'#app',
data:{},
methods:{}
router//将路由规则注册到vm实列上，用来监听url地址改变
)
11.9.监听事件/监听路由
- keyup事件监听输入框
@keyup="getfullname"
<input type="text " v-model="firstname">
- watch监听文本框数据改变
var vm = new Vue({
data:{
firstname='',
lastname='',
fullname=''
}
#方法1
watch:{//使用这个属性，可以监听data中的指定数据的变化，然后触发watch指定函数
//监听属性名 有横线必须加引号 'first-name'，没有横线可以不加
//下面是监听firstname改变
firstname:function(){
this.fullname=this.firstname+'-'+this.lastname
}
}
#方法2
watch:{
'first-name':function(newvalue,oldvalue){
this.fullname=newvalue+'-'+this.lastname
}
}
})
-
监听路由
watch监听路由改变
$route.path
watch:{
'$route.path':function(newVal,oldVal){
if(newVal==='/login'){
console.log("登录界面")
}else if(oldVal==='/register'){
console.log("注册界面")
}
}
}
-
computed属性
这个属性和
methods同级 ，computed中可以定义一些属性，这些属性，叫做【计算属性】，计算属性的本质。就是一个方法，只不过，我们在使用时是把他们的名称当作属性来使用
//把data上面的fullname删掉,在computed定义
#注意1：计算属性，在引用的时候，一定不要加（），当普通属性使用就行
#注意2：任何data中的属性发生改变，就会重新计算
#注意3：计算的结果会被缓存起来，方便下次使用
computed:{
'fullname':function(){
return this.firstname+'-'+this.la
}
}
- watch , computed , methods对比
- ·
computed会被缓存起来，当作属性使用，简单操作 methods方式表示一个具体操作，主要写业务逻辑watch是computed和methods结合体
- ·
11.10.nrm工具使用
-
安装：npm i nrm -g--------全局安装包
-
使用：nrm ls可以查看镜像列表，看当前使用的是哪个镜像
-
使用：nrm use
镜像名切换不同的镜像源地址注意 ：nrm只是提供了几个常用的安装包地址，他只是改变下载报的URL地址 安装时还是用
npm
二，其他知识点
-
1. 箭头函数作用 - 改变this指向 2. 定时器 this的指向问题 3. switch（this.opt）{ case'+': this.result=parseInt(this.n1)+parseInt(this.n2) break; case'-': this.result=parseInt(this.n1)-parseInt(this.n2) break; } 4. some(function(item,i){}):遍历返回一个boolean，（可以随时终止），返回true时就终止 findIndex(function(item,i){})找索引 5. foreach适用于只是进行集合或数组遍历，for则在较复杂的循环中效率更高。 6. indexOf() 如果要检索的字符串值没有出现，则该方法返回 -1。 7. foreEach some filter findIndex这些都属于数组的新方法（遍历）使用方式有点区别-------------ES6的新方法 8. jquery中搜索 :contains 9. replace(参数1，参数2) 第一个参数除了写字符串之外，还可以写正则 10. new Data()---------当前事件，当传入参数，就是参数的时刻 11. 模板字符串`${y}-${m}-${d}`字符串拼接（tab键上面的的符号包裹起来``）
网页报Cannot get
npm remove request
npm install requset
三，辅助小工具
1，vuedevtools
- 本地安装包放在一个文件夹中（不需要随便删掉）
- 浏览器中更多工具—>扩展程序—>勾选开发者模式--->然后可以选者扩展（选择文件）---->勾选允许访问文档
- day2--17
四，第三方类库
- mintui
- mui
