初识Vue
- VS Code
- Live Server插件
第一个页面
导入生产环境:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
具体代码:
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()从头开始删除一个对象