给字符串补足位数
padStart(2,‘0’)
padEnd(,’’)
监听固定按键
.enter
.tab
.delete
(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
也可使用键盘码
自定义全局按键修饰符的方法
Vue.config.keyCodes.f2 = 113;
//@keyup.enter="add()"
Vue中所有的指令在调用时,都以v-开头
方法:
参数1:指令名称,定义时指令名称不需要加v-,调用时才加上
参数2:是一个对象,对象身上有指令相关的函数,函数在特定阶段执行相关操作
钩子函数内的参数,(
第一个为el,原生dom对象,
第二个为指令传入的参数如:v-focus(200) )
Vue.directive('focus',{
bind: function(el){ //当指令绑定元素上,执行bind函数,只执行一次
// el.focus() 无效,因为此时dom还没有解析完成,绑定先行
},
inserted: function(){ //当元素插入DOM中时,执行该函数,只触发一次
el.focus(); //插入dom时调用
},
updated: function(){ //当Vnode更新时,执行updated ,可能触发多次
}
})
在实例中直接添加directives对象即可
directives: {
'fontweight': {
bind: function(el,binding){
el.style.fontWeight = bingding.value;
},
inserted: function(el,b){
}
}
}
如果只需要对bing和update钩子,可以简写如下
directives: {//等同于同时写了bind和updated两个钩子
'fontsize': function(el,binding){
el.style.fontsize = parseInt(binding.value)+'px';
}
模块化:从代码逻辑的角度进行划分;方便代码分层开发,保证每个功能模块的职能单一
组件化:从UI界面的角度进行划分;前端的组件化方便UI组件的重用
VUE组件:为了拆分Vue实例的代码量,能够以不同的组件,来划分不同的功能模块
1.第一种
Vue.component('组件名称',{
template: "这里放标签"
})
第二种(字面量类型的模板组件)
Vue.component('组件名称',{
template: ‘#这里放id’
})
然后在实例控制区域之外定义template标签,直接在里面写结构
使用方法都是直接:<组件名称>组件名称>
注意:这里的组件名称如果使用驼峰命名法的话,那么在html结构中要使用-分隔开,而不能使用驼峰
components属性定义内部私有组件
components:{
'com1':{
template:''
}
组件里的data要定义为一个函数,且函数要返回一个对象
data:function(){
return { }
}
//可以简写为
data(){
return {}
},
使用方法和实例中的是一样的
问:为什么组件中的data 必须是一个函数呢?
为了不让复用的组件之间的数据相互影响,所以使用函数来创建,且返回一个内部对象,这样子每次创建一个复用的组件时,之间的数据是相互独立的。
如登陆和注册窗口场景
方法1:使用v-if属性和v-else属性。
<login v-if="flag">login>
<register v-else="flag">register>
<script>
Vue.component('login', {
template: '登录组件
'
})
Vue.component('register', {
template: '注册组件
'
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
script>
方法2:使用component标签的is属性
定义一个变量名comName,用注册点击事件来更改展示组件的名称
<a href="" @click.prevent="comName='login'">登录a>
<a href="" @click.prevent="comName='register'">注册a>
<component *:is*="comName">component>
默认情况下子组件无法直接访问父组件中的data数据和methods方法
通过属性绑定的形式v-bind自定义属性可以传递给子属性
props属性是唯一一个数组类型的,专门用来存储父组件传递来的数据,且该数据是只读的,无法重新赋值,
实际可修改,但是会报错
<com1 v-bind:parentmsg=“msg”>com1>
com1: {
template: '<h1>子组件h1>' ,
props: ['parentmsg'],//将父组件传递过来的属性在props数组中定义一下才能使用该数据
}
实质:$emit()子组件向父组件传参
<com1 v-on:func=“show”></com1>
//调用方法
com1: {
template: '子组件
' ,
methods: {
myclick(){
//重点在这个$emit方法
this.$emit('func',第二个参数开始为父组件传参)//相当于子组件向父组件传参
}
}
}
使用ref获取
$this.refs
123
this.$refs.myh3.in