Vue(b站黑马)

初识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()从头开始删除一个对象

下一门从17节开始学习

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue官方文档以下内容作为本人日常学习使用,不作为参考 一、Vue环境搭建以及vue-cli的使用 Vue多页面应...
    好一只帅卤蛋阅读 4,155评论 0 1
  • 注意: 1、所谓指令,其实就是元素的属性 2、所有的指令,前提是在js中声明了是Vue对象 3、参数 1、静态参数...
    张浩琦阅读 2,910评论 0 0
  • Vue基本使用 Vue 是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式...
    东邪_黄药师阅读 3,184评论 0 1
  • 为什么要学习流行框架 企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱;企业中,使用框架,能够提高开发的...
    wanminglei阅读 3,833评论 0 0
  • 1.什么是vue,为什么要使用vue,vue的优势 2.vue基本模板 3.数据单向绑定 4.数据双向绑定 5.常...
    煤球快到碗里来阅读 2,435评论 0 0

友情链接更多精彩内容