Vue(黑马 教小朋友)【笔记】

初识Vue

• VS Code
• Live Server插件

---

第一个页面

导入生产环境：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

具体代码：

---

v指令

v-text

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

---

v-html

innerHTML

---

v-on

为元素绑定事件

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

补充

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

---

v-show

---

v-if

切换 显示与隐藏元素

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

---

v-bind

设置元素的属性

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

---

v-for

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

---

v-model 双向数据绑定

• 数组的splice 删除

---

axios

• 导包:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
• axios.get(地址?key=value...).then(function(res){},function(err){})
• axios.post(地址,{key:value...}).then...
• 注意this对象指的是谁，应该是按function来说，第一层function的this都是全局的，如果局部的要用，可以将this先赋值给其他变量