目录
创建Vue实例
引入vue.js
创建一个容器让Vue管理
<div id="root">{{name}}</div>
创建Vue实例
new Vue({
el:'#root',
data:{
name:'张三',
}
});
数据绑定
单项数据绑定
<input type="text" v-bind:value="name">
真实dom中value发生变化,Vue中data的name不变,但是Vue中data的name变化,真实dom中的value改变
双向数据绑定
<input type="text" v-model:value="name">
v-model 只能应用表单类元素
v-model:value 可以简写为 v-model
el的两种写法
写在Vue中
el:'#root',
写在Vue外部
v-$mount('#root');
data的两种写法
对象式
data:{
name:'张三',
}
函数式
data:function(){
return{
name:'李四',
}
}
MVVM模型
![](https://i-blog.csdnimg.cn/blog_migrate/fae3838415fd3883cef4b6ad5be1b9f2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2e29e96ec3db567bda8d69ce0469485a.png)
V
View
视图层,向用户展示信息的
VM
ViewModel
在Vue中指Vue实例
是一个同步View 和 Model的对象
M
Model
数据层,可以是我们固定死的数据,也可以是来自服务器请求来的数据。
数据代理
Vue中的数据代理是通过vm对象来代理data对象中属性的操作,借用的是getter和setter方法,能够更加方便的操作data中的数据
事件处理
键盘事件
Vue中常用的按键别名
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊,必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
系统修饰键(用法特殊):ctrl、alt、shift、meta
配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
配合keydown使用:正常触发事件。
也可以使用keyCode去指定具体的按键(不推荐)
Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
事件的基本使用
使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
事件的回调需要配置在methods对象中,最终会在vm上;
methods中配置的函数,不要用箭头函数!否则this就不是vm了;
methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参;$event是键盘鼠
标对象
事件修饰符
prevent:阻止默认事件(常用);
stop:阻止事件冒泡(常用);
@click.stop="showInfo"
once:事件只触发一次(常用);
capture:使用事件的捕获模式;
self:只有event.target是当前操作的元素时才触发事件;
passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
计算属性
定义:要用的属性不存在,要通过已有属性计算得来。
原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行?
初次读取时会执行一次。
当依赖的数据发生改变时会被再次调用。
优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
备注:
计算属性最终会出现在vm上,直接读取使用即可。
如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。