1.钩子函数mounted
表示页面一加载进来就执行函数里面的内容(和window.onload类似)
注意:mounted钩子函数的名字不能随便取,不能写在methods中,
钩子函数是页面一加载完毕就执行该函数
使用方法:
1.给dom元素加ref属性
2.通过this.$refs.ref的值 来获取要操作的dom
mounted(){
// document.getElementById('inputId').focus()
//通过this.$refs.ref的值来获取dom
//this.$refs.inputRefId
this.$refs.inputRefId.focus()
console.log(this.$refs)//对象
console.log(this.$refs.inputRefId)//获取到dom元素
},
2.全局自定义指令Vue.directive()局部自定义指令
1.全局自定义指令
自定义指令通过Vue.directive('自定义指令的名称',{inserted:function(el,binding){}})创建,它有两个参数,一个是自定义指令的名字,可以随便取,但是全部小写,另一个是一个对象,表示自定义指令的配置项
Inserted(el,binding)钩子函数,表示自定义指令插入到标签中的时候就执行,它有两个参数,el表示使用自定义指令的元素,,binding表示自定义指令的信息
用法:
用法1:直接在标签中插入v-自定义属性的名称
1.在要操作的元素添加v-自定义属性的名称
2.使用el操作元素,el代表自定义指令绑定的
用法2:在标签中插入v-自定义属性的名称="data中的属性名"
1.在要操作的元素添加v-自定义属性的名称
2.使用el操作元素,el代表自定义指令绑定的
color是在data中定义的属性,,color:"red"
2.局部自定义指令
局部自定义指令通过在组件内部使用directives属性创建,放自定义指令的容器directives是一个对象,每个自定义指令也是一个对象,里面有Inserted(el,binding)钩子函数
3.全局过滤器和局部过滤器
1.全局过滤器的定义方式:
通过Vue.filter("",function(管道符号|左边参数的值,其他参数1,其他参数2){})方法创建过滤器,第一个参数是过滤器的名字,第二个参数是过滤器的处理函数,在处理函数中,第一个参数是默认参数,是要过滤的数据,其他的参数可以自行设置
注意:需要在要过滤的数据结构上面加 管道符 | 过滤器的名称
2.局部过滤器的定义方式
局部过滤器通过在组件内部使用filters属性创建,放过滤器的容器filters是一个对象,每个过滤器是一个函数,需要return
4.computed计算属性
创建计算属性通过computed关键字,它是一个对象
开发时,能用computed实现的时候,就用computed实现,需要执行异步操作的时候,就要用到watch
computed:{
//这里的fullName是一个计算属性,它是一个函数,但是这个函数可以当成属性来使用,就是不用在data中定义fullName属性,可以直接被使用在操作dom
fullName(){
return this.firstName+this.lastName
}
},
没有再data中设置fullName属性,但是它可以直接被当成一个属性来使用
5.watch监听器
watch监听器用来监听data中数据的值，只要监听的数据一变化，它就能执行相应的函数
创建监听器通过watch属性，它是一个对象
1.监听data中普通属性,里面的函数名是data中你要监听的属性的名称
2.监听data中的属性是对象,里面的函数名是固定的,handler
6.使用filter()方法实现搜索功能
value表示数组中的每一项
搜索功能:
思路:设置搜索的内容是searchdata,判断user数组中的品牌名称name是否有searchdata,如果有,返回带有关键字的列表
这里使用了filter方法返回一个新数组,然后使用indexOf判断name中是否有关键字
computed:{
newlist(){
方法1 ES5
var that=this
function ishave(value){
return value.name.indexOf(that.searchdata) !== -1
}
var templist=this.user.filter(ishave)
return templist
2.方法2使用ES6箭头函数
return this.user.filter(value => value.name.indexOf(this.searchdata) !== -1)
},
}
7.axios
1.get请求
方法1
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
方法2
axios.get('/user', {
params: { //参数
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
8.组件化和模块化
模块化和组件化概念的解读
• 什么是模块化：是从代码的角度分析问题；把可复用的代码，抽离为单独的模块；
• CommonJS 模块化规范；
• 模块化的好处：提高了代码的复用率，提供模块作用域的概念，防止全局变量污染；方便了程序员之间 代码互相调用；
• 什么是组件化：组件化是从页面UI的角度进行分析问题的；把页面中可复用的UI结构，抽离为单独的组件；
• 组件化的好处：方便了UI结构的重用；随着项目开发的深入，手中可用的组件会越来越多；elementUI
9.全局组件和私有组件
1.全局组件在使用的时候才确定关系
定义组件的语法
• Vue.component('组件的名称', { 组件的配置对象 })
2.私有组件,在定义的时候就确定了关系
使用的时候,以<my-com2></my-com2>的形式放到vm1控制的#app的区域,放到其他区域会报错
