vue3 基础语法

vue3 基础语法

创建应用
  • Vue.createApp( )
    创建一个应用 ,任何的 Vue 相关的内容,都应该在此部分编写。
  • const vm = app.mount()
    vm 就是获取应用的根组件,通过 vm 可以获得 vue 里的任何数据、属性和方法
  • vm.$data
    获取数据对应内容

  • data(){}
    data 方法,用于在 Vue 中声明数据

  • methods:{}
    methods 属性,用于编写 Vue 中的方法

  • computed:{}
    计算属性,根据数据,自动进行计算,经常用于数值计算。

    方法和计算属性的区别:- 当计算属性依赖的内容发生变更时,才会重新执行,得到新的结果。-方法是只要页面重新渲染,就会重新计算,得到新的内容

  • watch:{}

    • 属性说明:
      (1) 监听属性,属性变化时,制动执行里边的函数。
      (2) 可以根据变量的改变,作异步操作和页面样式的改变。

    • 参数说明
      current:现在参数的值
      prev:以前参数的值

computed 和 method 都能实现的功能,建议使用 computed , 因为有缓存。computed 和 watcher 都能实现的功能,建议使用 computed , 因为更加简洁。

VUE 生命周期函数

声明周期函数指,在某一时刻会自动执行的函数。(声明周期函数也叫钩子函数)

  • 1.beforeCreate()
    在初始化 / 实例创建 之前执行的函数
  • 2.created()
    在初始化 / 实例创建 之后执行的函数
  • 3.beforeMount()
    在组件内容被渲染到页面之前自动执行的函数
    注意:此时无法找到任何模板 DOM 节点
  • 4.mounted()
    在组件内容被渲染到页面之后自动执行的函数
  • 5.beforeUpdate()
    在数据将要变化之前自动执行的函数
  • 6.updated()
    在数据发生变化之后自动执行的函数
  • 7.beforeUnmount()
    在 VUE 实例销毁之前自动执行的函数
  • 8.unmounted()
    在 VUE 实例销毁之后自动执行的函数
样式绑定语法
用字符串绑定动态样式

方法:在 data()方法里,定义一个变量,然后用 v-bind 在模板中绑定属性
案例;
<div :class="classString">Hello World</div>

用对象绑定动态样式

方法:在 data( )里声明一个对象,例如叫 classObject。
案例:classObject:{red:true,green:true}

用数组绑定动态样式

方法:在 data( )方法里,定义一个数组,数组中有的值,为模板中绑定的样式
案例:classArray:[‘red’,‘green’]

行内样式动态绑定
  • 字符串形式
    方法:直接在 data( )方法里,声明一个 CSS 样式的字符串,然后在模板中进行绑定。
    data()中编写案例: styleString :'color:yellow'
    模板中绑定案例:<div :style="styleString">
  • 对象形式
    方法:在 data()方法里,声明一个变量,变量是一个对象。然后在模板中进行绑定。
    data()中编写案例:styleObject:{color:'orange'}
    模板中绑定案例:<div :style="styleObject">

注意事项:建议在工作中使用对象的形式,来编写模板中的行内样式动态绑定。因为这样更加直观,字符串拼接也不容易出错。

常用模板语法
  • 插值表达式{{xxx}}
    在模板中输出变量,在插值表达式中是可以写 JavaScript 表达式的。例如:{{1+2}},但不能写语句。

  • 基础指令

    • v-html:转义输出变量的 HTML 标签
    • v-bind:绑定 HTML 标签中的属性值
    • v-once:读取一次变量值,不随变量 改变而改变
    • v-if:模板中进行判断,根据变量负责 DOM 的展示与否。如果 v-if 的值为 false 时,将直接移除 DOM 元素
    • v-show:模板中进行判断,根据变量负责 DOM 的展示与否。动过样式进行展示,为 false 时, display:none
    • v-on:阻止默认行为 - @click.prevent,在模板中绑定事件,例如 v-on:click=“handleClick”,$event 传递原生事件:handleClick(num,$event)
    • ref ref 是获取 Dom 节点组件引用的一个语法,模板语法:<div ref="count">,程序写法:this.$refs.count
  • 指令简写方法

    • v-bind 简写 :原写法:<div v-bind:title="message">,简写法:<div :title="message">,动态属性绑定: <div :[xxx]="message"> ,xxx 是在 data 里定义的变量

    • v-on 简写:原写法:<div v-on:click=“handleClick”>,简写法:<div v-@click=“handleClick”>,动态事件绑定: <div @[xxx]="handleClick"> ,xxx 是在 data 里定义的变量

列表循环渲染
  • v-for:可以直接在模板中使用 v-for 来循环打印数组和对象,Vue 要求循环时在模板中增加 key 值,避免重复渲染.
  • 变更数组的方法
    • push(): 从数组尾部添加内容
    • unshift(): 从数组头部添加内容
    • pop(): 从数组末尾删除内容
    • shift(): 从数组头部删除内容
    • sort(): 对数组进行排序
    • reverse(): 对数组进行取反
    • splice(): 从数组中山取具体的内容
  • 特殊用法 v-for=“item in 10” 从 1 循环到 10
    注意事项: 循环和判断不能写在一个标签上,否则是没办法进行判断的。
事件绑定
  • 事件绑定修饰符
    • @click.stop:停止事件冒泡
    • @click.self:停止向下传递
    • @click.prevent:阻止默认行为
    • @click.capture:捕获模式修饰符
    • @click.once:事件只绑定一次
    • @scroll.passive:提升滚动性能
  • 按键绑定修饰符
    • @keydown:按键就可以触发事件
    • @keydown.enter:按下回车键时触发
    • @keydown.tab:按下 tab 键时触发
    • @keydown.delete:按下删除键时触发
    • @keydown.esc:按下 ESC 键时触发
    • @keydown.up:按下上键时触发
    • @keydown.down:按下下键时触发
  • 鼠标修饰符
    • @click.left:点击鼠标左键触发
    • @click.right:点击鼠标右键触发
    • @click.middle:点击鼠标中键触发
  • 精确修饰符
    • @click.ctrl.exact:按 ctrl 和鼠标键时才会触发
双向绑定
v-model

双向绑定的最基本用法
<input v-model="message" />
<textarea v-model="message" />
<input type="checkbox" v-model="message" />

修饰符
  • v-model.lazy
    当失去焦点时才会触发双向绑定
  • v-model.number
    自动转变为 number 类型
  • v-model.trim
    去掉字符串前后的空格
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶落风尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值