初识Vue,以及基本的一些用法

本文介绍了如何引入Vue并创建实例,然后讲解了v-model用于双向数据绑定,v-if和v-show的条件渲染,v-bind和v-on处理属性与事件,以及v-for的循环遍历。这些是Vue开发中的基本概念和常用指令。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、vue的引入,创建vue实例,我的第一个vue页面

  1. vue的引入:利用script标签里的src进行引入即可

  1. 创建vue实例:

  1. 我的第一个vue页面
    1. 利用模板语法在标签名中创建一个可变量,通过改变这个变量来实现页面数据的实时变化

二、常见的一些vue指令

  1. v-model
    1. 利用v-model来实时获取input框里的内容
    2. v-model有两个修饰符
      1. .number  把内容转化为数字
      2. .trim 把内容开头和结尾的空格删除

  1. v-if和v-show(都是通过布尔值进行判断的)
    1. v-if是直接删除DOM元素
    2. v-show是通过控制display属性实现
  2. v-html和v-text
    1. v-html是将return返回的对象进行解析,如果有DOM标签就将DOM标签追加到目标节点中
    2. v-text和v-html一样,不过v-text是直接将内容追加到目标节点,不会进行DOM标签的解析

  1. v-bind
    1. 该指令主要用于响应式更新HTML属性,一般将bind绑定在元素节点的属性上
    2. 常见用法:---v-bind:属性名   可以简写为   :属性名

  1. 利用v-bind进行样式的绑定
    1. 类名的绑定
      1. 直接写类名
      2. 利用数组
      3. 利用对象
        1. 这里的false是指复选框的状态,当我们选中,对象中类名进行转化,从而实现对样式的选择

  1. v-on
    1. v-on可以进行事件的绑定
    2. 书写方法:v-on:click="btn"   简写为:@click="btn"
    3. 并且所有的vue实例中可以调用的方法都需要写在methods中

  1. v-for
    1. v-for可以对返回的对象进行遍历操作
    2. 写法:v-for="变量名 in 返回的对象名"

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值