1.{{}}
{{}}中必须写js表达式
{{}}可以自动读取到data中的所有属性
data中的数据发生改变,模板中用到该数据的地方会自动更新
表达式:一个表达式会生成一个值
1)a
2)a+b
3)demo(1),函数调用,没有return就是undefined
4)三元表达式
x === y ? 'a' : 'b'
2.v-bind指令(指令都是v-开头)
v-bind后面的引号,里面的东西当作表达式
v-bind:可以简写成:
<a v-bind:href="link">链接</a>
注:
{{}},插值语法,对应,标签体。
v-,指令语法,对应,标签(属性,内容,事件等)。
3.数据绑定
vue中有两种数据绑定方式:
1)单向绑定(v-bind):数据只能从data流向页面。
2)双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
注:
1)双向绑定一般在表单类元素上(如input,select等)
2)v-model:value可以简写成v-model,因为v-model默认收集value值
<input v-model:value="值">
<input v-model="值">
4. MVVM模型
MVVM模型:
1.M:模型(Model):data中的数据
2.V:视图(View):模板代码
3.VM:视图模型(ViewModel):Vue实例
1)data中所有的属性,最后都出现在了vm身上
2)vm身上所有的属性,及Vue原型上所有属性,在Vue模板中都可以直接使用
5.事件
v-on:click=""或者@click=""绑定事件,click是事件名
事件的回调配置在methods对象中,methods中的函数,this指向的是vue实例或者组件实例对象
methods中配置的函数,不能用箭头函数,否则this会乱
@click="demo($event,x)",可以传参
6.事件修饰符
前三个常用些
可以链式书写,比如.stop.prevent
1)prevent阻止默认行为(比如a标签,链接跳转)@click.prevent
2)stop阻止事件冒泡(比如子元素加上.stop,父元素点击事件不会触发)
3)once事件只触发一次(比如methods函数,点第一次有效,后面再点没用了)
4)capture使用事件的捕获模式(比如父元素加上.capture,则先执行父元素,再执行子元素)
5)self只有event.target是当前操作的元素时,才触发事件(比如点击子元素,父元素加上了self不触发)
6)passive事件的默认行为立即执行,无需等待事件回调执行完毕(比如@wheel的methods中,循环很多次,先执行滚动再去执行methods中的循环)移动端用的多些
7.键盘事件
keyup抬起(常用),keydown按下
1)按键别名
上下左右:up/down/left/right
回车enter,删除delete(删除键/退格键),esc,space,tab(特殊,必须配合keydown)
2)未提供别名
可以用按键原始的key,特殊的比如CapsLock,要写成caps-lock
<input type="text" @keyup.a="show">
methods:{
show(e){
console.log(e.key,e.keyCode);
//console.log(e.target.value);
},
},
3)系统修饰键,用法特殊( ctrl,alt,shift,meta(win/command) )
keyup:按住这个键,再按下其它键盘,松开其他键
keydown:正常触发
可以连续写,比如@keyup.ctrl.b(ctrl和b一起)
8.计算
<template>
<input type="text" v-model="first">
<input type="text" v-model="second">
<div>{{sum}}</div>
<div>{{sum}}</div>
<div>{{sum}}</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
first: '1',
second: '2',
}
},
//比methods更方便调试,因为vue-devtool可以看到data和computed数据
computed:{
sum:{
//有人读取sum,get就调用,且返回值作为sum的值
//缓存效果:初次/依赖变化才调用
get(){
//输出1次
console.log('get调用');
//1-2
return this.first + '-' + this.second;
},
//set可以不写
//当sum被修改时,set调用
//想真正修改sum,需要改掉依赖
set(value){
console.log('set调用');
let arr = value.split('-');
this.first = arr[0];
this.second = arr[1];
}
}
},
}
</script>
<style scoped>
</style>