vue-devtools
1.在vue中配置，是否允许使用vue-devtools检测代码
- Vue.config.devtools = "true" //默认是true,生产时为false
- Vue.config.productionTip = "false" //组织vue启动时生成消息提醒
2.全局配置自定义键盘事件keycode
Vue.config.keyCodes = {
a:65
}
<input type="text" @keydown.a="print">
3.简写
- 事件的简写 v-on:click --->>> @click
- 属性的简写 v-bind:src --->>> :src
4.过滤filters
第三方库
- loadash
- 日期格式化 data-fns 第二个文档
- 货币格式化 accomnting.js
自定义过滤器
- 全局过滤器
- 局部过滤器
5.axios API获取数据的https://api.github.com/users/zhusiming
- get方法
方式1:
axios.get("server.php?name=lili&age=10")
方式2:
axios.get("server.php",{
params:{
name:lili,
age:19
}
})
.then(resp=>{
console.log(resp.data)
}).catch(err=>{
consolo.log("请求失败！")
})
- post方式
方法一: axios.post("server.php","name=lili&age=10")
方法二: axios.post("server.php",transformRequerst)
vue-resource
- 跨域问题jsonp
this.http.jsonp("http://baidu.com",{
params:{
wd:a
},
jsonp:cd //百度使用的jsonp格式为cd，(正常的使用是callback方法)
})
6.computed和methods的区别
- computed它走的是缓存,也就是它依赖的data数据中的messageb发生变化的时候，他所有设计到messageb的值都会变化computed是属性调用:{{computedTest}}，而methods是函数调用:必须要加上()来调用，如{{methodTest()}}
- 1.计算属性是根据他得依赖进行更新的，只有在相关的依赖发生改变的时候才能更新
- 2.计算属性是缓存的，只有相关依赖没有改变，多次访问计算属性得到的值是之前缓存的值，不会多次执行
- 3.计算属性有set和get方法，但是实际的赋值是通过改变缓存来赋值的
7.vue实例的属性和方法
一：属性
vm.属性名 获取data中的属性 如vm.meg
vm.$el
- 获vue实例关联的元素 vm.$el 获取的书dom元素
- 用法
el.style = "corlor:red"
vm.$data
- 获取数据对象data
vm.$options
- 获取vue实例中的方法
- 用法
1.vm.
options.age; 3.vm.$options.show();
vm.$refs
- 获取dom元素
- 用法
1.在dom上绑定ref：
你好
2.取值：vm.refs.hello.style = "red" 二：方法
- 一.$mount()
- 1.手动挂载 vm.$mount("#app")
- 2.初始化挂载
new vue({
data:{
mes:"欢迎来到vue"
}
}).$mount("#app")
- 二.$nextTick(callback)方法:在dom更新完成之后，在执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的dom
data：{
name:"汤姆"
}
//修改数据
vm.name = "tom"
//这里因为DOM还没有更新完，vue实现响应式并不是数据发生改变后dom立即变化（需要按照一定的策略进行更新，需要时间），所以打出的还是汤姆
consolo.log(vm.$refs.title.texContent) ----------->>> 打出的还是汤姆
vm.$nextTick(function(){
consolo.log(vm.$refs.title.texContent) ----------->>> 打出的是tom
})
- 三:
1.$set(obj,key,val)
this.user.age = "20"//这是普通的方式为对象添加属性时,vue无法实时监控到（也就是添加不上）
this.$set(this.user,"age",20) 这种方法可以实现
也等同于这种 vue.set(this.user,"age",20)
2.$delete(obj,key)
this.$delete(this.user,"age")
3.$watch(data,callback,[options])
方式一：
vm.$watch("age",function(oldV,NewV){
console.log('计数器值的变化 :' + NewV + ' 变为 ' + oldV + '!');
})
方式二：
watch:{
//监听数据
kilometers:function(val){
this.kilometers = val;
this.meters = val*1000;
},
meters:function(val){
this.kilometers = val/1000;
this.meters = val;
},
age:(newval,oldval)=>{
consolo.log(newval,oldval)
},
//这里监听对象
user:{
handler:(newval,oldval)=>{
consolo.log(newval,oldval) //这里是引用类型 所以拿到的数据是相同的
},
deep:true //深度监听对象的变化
}
}
8.自定义指令
全局自定义指令
Vue.directive()
<h3 v-hello>{{mes}}</h3>
Vue.directive("hello",{
bind(el,binding){
consolo.log("指令所绑定的dom对象:"+ el);
el.style.color="red";
consolo.log("获取dom元素的信息:"+ binding)
alter("指令第一次绑定到元素上时调用,只调用一次，可执行初始化的操作")
},
inserted(){
alert("被绑定元素插入到dom中时调用")
},
update(){
alert("被绑定元素所在模板更新时调用")
},
componentUpdated(){
alert("被绑元素所在模板完成一次更新周期时调用")
},
unbind(){
alert("指令与元素解绑时调用，只调用一次")
}
})
局部自定义指令
9.过度和动画
- 单元素动画
v-enter必须放在css的最后面，否则初始化的时候不出现
结合第三方库animate.css使用
enter-active-class="fateLeft" :进入的动画
leave-active-class="fateright" :离开的动画
<transition enter-active-class="animated fateLeft" leave-active-class="animated fateright">
<p v-show="true">变化的标签</p>
</transition>
- 多元素动画
<transition-group enter-active-class="animated fateLeft" leave-active-class="animated fateright">
<p v-show="true" :key="1>变化的标签</p>
p v-show="true" :key="2">变化的标签</p>
<transition-group>
10.组件 1.组件名字要带 - 并且所有单词为小写 2.实例的vue对象vm也是一个组件 Root跟组件
创建组件（全局组件）
- 方法一：先创建组建的构造器，然后由组件构造器创建组件
var mycomponet = Vue.extend({
template:"<h2>你好世界！！</h2>"
})
Vue.component("my-hello",mycomponet)
- 方法二:直接创建组件
Vue.component("my-world",{
template:"<h2>你好世界！！</h2>"
})
局部组件
new Vue({ el:"#app", components:{ 'my-world':"
我是局部组件
" } })组件的模板
<template id = "wbs">
<h2>我是模板的组件</h2>
<ul>
<li v-for="(val,index) in arr">{{val}}</li>
</ul>
</template>
new Vue({
el:"#app",
components:{
'my-world':{
template:"#wbs",
data(){
return {
arr:["wq4","wer","wqerqwe"]
}
}
}
}
})
动态组件
<component :is="flag"></component>
keep-alive用法:不用每次都重新创建组件，可以缓存下来component组件（dom不更新，数据缓存到本地）
<keep-alive>
<component :is="flag"></component>
</keep-alive>
11.组件之间的传值
（1）.父传子
父级传值:v:bind:codeList="dataList" 子级接收:props:[codeList]
(2).子传父级
子级传值
@click="btnSubmit"
btnSubmit(){
this.$emit("parentNum","我是传过来的值","我是传过来的第二个值")
}
父级接收
<Contianer v-on:parentNum="UpdataTitle($event)" v-bind:title="title"/>
method(){
UpdataTitle(Newtitle,second){
this.title = Newtitle;
this.val = second;
},
}
(3).单项数据流（传递）
父组件可以传递给子组件数据，反过来则不可以
解决方法：使用.sync，需要显示的触发一个更新事件：
<my-hello :name.sync="name"></my-hello>
子向父传值：$emit("update:name","我是更改的值")
(4).非父子组件之间如何通信
a.全局声明cont Event = new Vue();
b.发送数据 Event.$emit("事件名称"，数据)
c.接收 Event.$on(事件名称,data=>{
consolo.log(data)
})
12.slot内容分发
slot原意：位置，槽
作用：用来获取组件总的原内容
用法：
1.单slot 那里取值就在那里写这个组件
如<slot></slot>
或者组件里面的值是空的，可以直接提醒：<slot>如果没有内容，则显示该内容</slot>
2.具名slot
<my-hello>
<ul slot="s1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<ol slot="s2">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ol>
</my-hello>
<slot name="s1"></slot>
<slot name="s2"></slot>
13给自定义的组件添加事件
自定义的组件是不能直接触发methods中的定义好的方法的，必须在点击事件的时候，添加事件修饰符
@click.native = 'send()'
14使用less
- 1.需要安装less 和 less-loader
- 2.在webpack的配置信息中配置
- 3.使用：
在style中指定lang="less"
<style lang="less">
</style>
