了解vue部分属性和监听方式

261 阅读2分钟

这是sylu计算机协会的第一次技术征文活动

vue写法

插入式, 你好,{{name}}

new Vue({
el:"#xxx"
data:{
name:"xxx"
}
})

v-model双向绑定,且只能应用在表单类元素(输入类元素中,即为得有value值{input,单选框,多选框,多行输入}) v-bind单向绑定,数据从data流向页面

el和data的写法

el和$mount("XXX")都可指定容器

setTimeout(()=>{
v.$mount("XXX")
},1000)

data的第二种写法

data:function(){
return{
}
}

PS:v-on:click = "XXX" :事件被点击 @click="XXX"

事件修饰符

Vue中的事件修饰符:
1.prevent:阻止默认事件(常用):
2.stop:阻止事件日泡(常用):
3.once:事件只触发一次(常用):
4.capture:使用事件的插获模式:
5,self:只有event.target是当前操作的元素是才触发事件:
6,passive:事件的默认行为立即执行,无需等待事件回调执行完中:

vue里常见的监听方式

1.@click.prevent = "XXX" 捕获阶段由外往内,之后触发冒泡阶段,由内到外

2.@scroll = "xxx"给滚动条加事件

3.@wheel= "wheel"给滚动轮增加事件

给ul加overflow:auto可以增加滚动条

键盘监听事件

@keyup(按下按钮松开) @keydown(按下按钮未松开) e.target.value:target 事件属性可返回事件的目标节点 1.Vue中常用的按键别名:

回车=>enter
删除=>delete(插获“除”和“退格”健)
退出=>esc
空格=>space
换行=>tab
上=>up
下=>down
左=>left
右=>right

2.Vue未提供别名的按健,可以使用按健原好的key值去监听,但注意要转为kebab-case(短横线命名)

3.系统修饰健(用法特殊):ctrl、alt、shift、meta (1),配合keyup使用:按下修饰健的同时,再按下其他健,随后释放其他健,事件才被触发。

(2).合keydown使用:正常触发事件.

4,也可以使用keyCode去指定具体的按健(不推荐)

5,Vue.config.keyCodes.自定义健名 = 健码,可以去定制按键别名

注:tab键绑定用keydown

事件的基本使用:

1,使用v-on:xxx或exxx绑定事件,其中xxx是事件名: 2.事件的问调需要配置在nethods对象中,最终会在vm上 3.methods中配置的函数,不要用箭头函数!否则th1s就不是vm了: 4,methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象: 5.Oclick="deno”和Cc1ick="demo(Sevent)"效果一致,但后者可以传参:

计算属性

计算属性与监视

正则表达,slice(0,3)截取前三位

@click = "XXX()"加括号可以传event以外的值,需要传参数就加括号,不需要则不加

直接都加小括号比较"无脑"

箭头函数在ES6中学习

当fullname被修改时要用set

箭头函数时的this不是vm而是window

读取的get 修改的set 有 ! 取反

监视属性

watch:{
XXX.handler(){
}
}

XXX不加引号的前提是属性名必须满足变量取名的要求,变量取名时不能有 . 和【】