什么是vue?
VUE+webpackjavascript
一，什么是vue?
基本概念：css
- vue:目前最火的前端框架(也能够进行手机APP的开发，须要借助weex)
- react：最流行的前端框架（React除了开发网站，还能够开发手机app）
- vue------------angular----------react一块儿称为前端三大主流框架
- vue是用于构建用户界面的（veu有配套的第三方类库）
为何学习流行框架：html
- 提升开发效率：能够解决一些兼容性的问题，前端模板引擎，可以减小一些没必要要dom操做
- 在vue中再也不操做dom元素，解放双手，让程序员更多的去关注业务逻辑
框架和库的区别：前端
- 框架：是一套完整的解决方案，对项目的侵入性很大，项目若须要更替框架，择须要从新架构整个项目
- 库：提供某一个小功能，对项目的入侵性小，若是没法完成某些需求，能够很容易切换
node(后端)中的MVC与前端中的mvvm之间的区别vue
- 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的基本使用java
-
v-cloaknode
#能够解决插值表达式闪烁的问题 <p v-clock>{{msg}}</p> <style> [v-clock]{ display:none; } </style> 复制代码 -
v-textreact
#和v-clock做用相同， <p v-text="msg"></p> //二者区别 1，插值表达式先后能够听任何内容 2，v-text会替换元素中的本来的内容，插值表达式不会 复制代码 -
v-htmljquery
#输出时不会带标签 <p v-text="msg2"></p> 复制代码
2,v-bind(绑定属性)webpack
-
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
相关文章
- 1. 什么是vue？
- 2. VUE是什么
- 3. vue是什么
- 4. 什么是vue？为什么用vue？
- 5. Vue Loader是什么
- 6. 什么是VUE-CLI
- 7. vue-cli是什么？
- 8. 什么是Vue-CLI?
- 9. 什么是vue-cli
- 10. Vue Vuex 是什么
- 更多相关文章...
- • Hibernate是什么 - Hibernate教程
- • MyBatis是什么 - MyBatis教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • ☆技术问答集锦（13）Java Instrument原理
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 什么是vue？
- 2. VUE是什么
- 3. vue是什么
- 4. 什么是vue？为什么用vue？
- 5. Vue Loader是什么
- 6. 什么是VUE-CLI
- 7. vue-cli是什么？
- 8. 什么是Vue-CLI?
- 9. 什么是vue-cli
- 10. Vue Vuex 是什么