VUE基本语法(学习笔记)

什么是VUE:
渐进式的Javascript框架 MVVM(Model,View,ViewModel)模式
Vue的基本使用
引用vue.js 准备要挂载的标签 创建vue对象,进行挂载
在这里插入图片描述

el:

指定相应的挂载对象 可以使用id,class,标签(建议使用id挂载) 挂载后代表这个标签被vue接管

data:

vue对象准备的数据 这个数据发生变化后,用到它的view部分值也改变

methods

vue中对象的方法 在html中 {{方法()}} 在js vue对象.方法() 方法中的this就是指这个vue对象

VUE表达式

做四则运算(+,-,*,/) 三目运算符
表达式中可以写加减乘除(如果有字符串,加法会拼接,其它的正常运行
在这里插入图片描述
在这里插入图片描述

VUE的指令

v-text,v-html :展示相应的数据
text和html的差别是html会解析标签元素
在这里插入图片描述
v-for :循环 (可以遍历数组,对象,数字,字符串)
在这里插入图片描述在这里插入图片描述
v-bind: 绑定属性
在这里插入图片描述
v-model: 数组双向绑定(input,select,textarea)它会监听用户的输入事件以更新数据
在这里插入图片描述在这里插入图片描述

v-show:(只是看不到,它其它还在)显示也隐藏
在这里插入图片描述在这里插入图片描述
v-if: 判断
在这里插入图片描述
if条件不满足的话,这个元素都不会出现在这里插入图片描述
v-on: 注册事件
在这里插入图片描述

在这里插入图片描述

VUE组件:

先创建组件后挂载 template(模块)中,有且只有一个根 取名用小写(如果是驼峰 myTag -> my-tag)
全局组件:
在这里插入图片描述在这里插入图片描述
局部组件:只能在当前被挂载的元素中使用
在这里插入图片描述

  • 1
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值