回顾
Vue中最基本的结构
1.引入文件
2.创建Vue实例控制的区域
3.创建VM实例
MVVM
Vue中的指令
- v-cloak
- v-text 默认解决闪烁问题
- v-html
- v-bind 属性绑定机制 缩写是:
- v-on 事件绑定机制 缩写是@
今日目标
- 学习Vue中剩下的指令
- Node.js的环境配置
项目一: 高仿饿了吗
项目二: 点菜系统
事件修饰符:
- .stop 阻止冒泡
- .prevent 阻止默认行为
- .capture 事件捕获
- .self 实现只有点击当前元素时,才会触发事件处理函数
- .once 只执行一次事件处理函数 先后顺序无关紧要
Vue指令之v-model
和双向数据绑定
v-bind M — V
简易计算器案例
在Vue中使用样式
使用class样式
-
数组
-
数组中使用三元表达式
-
数组中嵌套对象
-
直接使用对象
使用内联样式
-
直接在元素上通过
:style
的形式,书写样式对象 -
将样式对象,定义到
data
中,并直接引用到:style
中 -
在
:style
中通过数组,引用多个data
上的样式对象
Vue指令之v-for
和key
属性
-
迭代数组
-
迭代对象中的属性
-
迭代数字
2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。