文章目录
Vue
HelloWorld
MVVM模型
Model:模型,数据对象
View:视图,模板页面
ViewModel:视图模型,本质上就是Vue实例
Vue Devtools
拖拽安装包到谷歌扩展程序,f12内即可调试
v-once v-html v-bind v-on
函数和计算属性
1、函数没有缓存,计算属性有缓存
2、函数只支持单向,计算属性默认只有getter,可以写setter
初始化:Once M两次,Once C一次,Once Get一次;
修改总分3 :Once Set一次,Once M两次,Once C一次,Once Get一次;
监听器 watch
然后也可以通过vm实例进行调用,效果相同
Class 绑定 v-bind
Style 绑定 v-bind
v-if v-else-if v-if & v-show
列表渲染 v-for
迭代数组
语法:v-for="(alias, index) in array"
迭代对象
语法:v-for="(value, key, index) in object"
:key特殊属性,vue会基于key的变化重新排练元素顺序,并且移除key不存在的元素
v-on 事件处理
事件处理方法
事件修饰符
.stop 阻止单击事件继续传播 event.stopPropagation()
.prevent 阻止事件默认行为 event.preventDefault()
.once 点击事件只触发一次
按键修饰符
格式:v-on:keyup.按键名 或 @keyup.按键名
常用按键名:.enter .tab .delete .esc .space .up .down .left .right
单向绑定和双向绑定
v-model用于表单数据双向绑定,针对以下类型:
text文本、textarea多行文本、radio单选按钮、checkbox多选按钮、select下拉框
举例如下: