vue基础 组合式和响应式 && 模板语法 && 计算属性

模板语法 | Vue.js

根据文档

组合式和响应式

响应式

响应api单网页实例式

组合式

组合式api单网页实例

模板语法

文本插值 {{msg}}

最基本的数据绑定形式是文本插值,它使用的是“Mustache”语法 (即双大括号):




Attribute 属性绑定

简写因为 v-bind 非常常用,我们提供了特定的简写语法:




布尔型 Attribute

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同:template

当 isButtonDisabled 为真值或一个空字符串 (即 

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象:js

const mm = ref({
  id: 100,
  class: 'ad',
  align: 'center'
})

通过不带参数的 v-bind,你可以将它们绑定到单个元素上:template

 

ppppp

ppppp

vue基础 组合式和响应式 && 模板语法 && 计算属性_第1张图片

使用 JavaScript 表达式

至此,我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式:template

 
   

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}

这些表达式都会被作为 JavaScript ,以当前组件实例为作用域解析执行。

在 Vue 模板内,JavaScript 表达式可以被使用在如下场景上:

  • 在文本插值中 (双大括号)
  • 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
  • 
    
    

    a

调用函数

可以在绑定的表达式中使用一个组件暴露的方法:template





动态参数

--注意,参数表达式有一些约束,
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
 



计算属性

计算属性是循环的方法,通过computed(fn) 来实现自动响应式,此函数必须返回一个值





Class 与 Style 绑定

你可能感兴趣的:(Web前端,vue.js,前端,javascript)