【WAY TO VUE 3】Vue基础

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下拉框
举例如下：