Vue之基础语法

安之__
发布于 2024-1-13 11:45
浏览
1收藏

模板语法

插值语法

{{插值表达式}},能读到data里对应的值。{{ }}里的必须是JS表达式,不是JS语句(代码)。{{1+1}},{{Date.now()}},{{a?1 : 2}}都可得到结果。

区分:js表达式和js代码(语句)

左侧可用 const x = 来接。
Vue之基础语法-鸿蒙开发者社区

Vue之基础语法-鸿蒙开发者社区

js表达式是特殊的js代码,会产生一个值。

拼接字符串:默认做了拼接。Vue之基础语法-鸿蒙开发者社区

指令语法

错误写法:Vue之基础语法-鸿蒙开发者社区

正确写法:Vue之基础语法-鸿蒙开发者社区会把url当js表达式执行。

v-bind后面的会当js指令执行。

错误写法:(当data里没有hello变量)Vue之基础语法-鸿蒙开发者社区

区别

Vue之基础语法-鸿蒙开发者社区

标签体:Vue之基础语法-鸿蒙开发者社区

多层级结构

Vue之基础语法-鸿蒙开发者社区

4. 数据绑定

单向bind

v-bind !Vue之基础语法-鸿蒙开发者社区

Vue之基础语法-鸿蒙开发者社区

双向model

用v-model

Vue之基础语法-鸿蒙开发者社区

Vue之基础语法-鸿蒙开发者社区

字符串在修改时也要加“”

不是所有元素都能用v-model。

Vue之基础语法-鸿蒙开发者社区

不能输入就没有value值,不能捕获用户的输入,就不能影响数据的变化,就没有意义。

v-model的简写:Vue之基础语法-鸿蒙开发者社区

总结:

Vue之基础语法-鸿蒙开发者社区

5.MVVM模型

Vue之基础语法-鸿蒙开发者社区

Vue之基础语法-鸿蒙开发者社区

所以接收vue实例,以后一般用vm = Vue之基础语法-鸿蒙开发者社区

这个↑vm有的,都能在模板里直接用:Vue之基础语法-鸿蒙开发者社区

总结:Vue之基础语法-鸿蒙开发者社区

6.数据代理

Object.defineProperty方法

这个方法传3个参数:Vue之基础语法-鸿蒙开发者社区

例子:Vue之基础语法-鸿蒙开发者社区

注意:

  1. 用它添加的属性不可枚举(遍历)。用Vue之基础语法-鸿蒙开发者社区得到person对象的所有属性名称。

除非Vue之基础语法-鸿蒙开发者社区

  1. 不能在console被修改Vue之基础语法-鸿蒙开发者社区

Vue之基础语法-鸿蒙开发者社区

  1. 不可被删除。

Vue之基础语法-鸿蒙开发者社区

正常情况:Vue之基础语法-鸿蒙开发者社区

  1. 双向绑定

    https://www.bilibili.com/video/BV1Zy4y1K7SH?t=611.0&p=11

Vue之基础语法-鸿蒙开发者社区

该方法让number和age之间建立了联系。

例子:Vue之基础语法-鸿蒙开发者社区

标签
1
收藏 1
回复
举报
回复
    相关推荐