Vue（b站黑马）

初识Vue

• VS Code
• Live Server插件

---

第一个页面

导入生产环境：

具体代码：

First.png

---

v指令

v-text

v-text.png

• 只会显示v-text中的内容，不管h2标签中还有什么其他内容都会被覆盖
• {{}}时v-text的简写

---

v-html

innerHTML

---

v-on

为元素绑定事件

v-on.png

• v-on: 与 @是等价的
• click为单击事件，dolt为绑定的事件，要写在methods中
• 不需要操纵DOM元素，而是更改数据即可，改变数据的时候记得加this!

补充

• 方法可以加(参数)
• 事件修饰符，例如：@keyup.enter="..."

---

v-show

v-show.png

---

v-if

切换 显示与隐藏元素

• v-show是操控display
• v-if是操控DOM元素，如果频繁切换的话使用v-show即可

---

v-bind

设置元素的属性

v-bind

• v-bind可以省略，使用:即可
• 推荐使用对象的方式 而不是三元符

---

v-for

v-for

• 对象数组：push()添加一个对象
• 对象数组：shift()从头开始删除一个对象

---

下一门从17节开始学习