Vue.js入门-2-模板语法

模板语法

插值

文本

数据绑定最常见的就是Mustache语法(双大括号)文本插值。可以进行响应式绑定

Message: { {  msg  } }

使用v-once指令,可以一次性的插值,当数据改变时不会更新

这个将不会改变: { {  msg  } }

原始HTML

使用v-html,被插入的内容都会当做HTML处理。但容易导致XSS攻击

Using mustaches: { { rawHtml } }

Using v-html directive:

特性

Mustache语法不能再属性里使用。在属性中需要使用v-bind

使用JavaScript表达式

对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

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

每个绑定都只能包含单个表达式,所以**下面的例子都不会生效**。


{ {  var a = 1  } }


{ {  if (ok) {  return message  } } }

> 模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。

...
...

修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

...

缩写

Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:


...


...


...


...

计算属性和观察者

计算属性

模板中绑定表达式只用于简单的操作。如果需要进行逻辑操作,应当使用计算属性 computed

Original message: "{ { message } }"

Computed reversed message: "{ { reversedMessage } }"

%MINIFYHTML2106ddfaaa9950d448b39e6182ff3e6b6%

结果:

Original message: “Hello”

Computed reversed message: “olleH”

> vm.reversedMessage 依赖于 vm.message,因此当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新。

计算属性缓存 vs 方法

Reversed message: "{ { reversedMessage() } }"

%MINIFYHTML2106ddfaaa9950d448b39e6182ff3e6b7%

**方法**和**计算属性**两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。

计算属性只有在它的相关依赖发生改变时才会重新求值。

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。

{ { fullName } }
%MINIFYHTML2106ddfaaa9950d448b39e6182ff3e6b8%

当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 `watch`,通常更好的做法是使用计算属性而不是命令式的 `watch` 回调。

var vm = new Vue({ 
  el: '#demo',
  data: { 
    firstName: 'Foo',
    lastName: 'Bar'
   },
  computed: { 
    fullName: function () { 
      return this.firstName + ' ' + this.lastName
     }
   }
 })

计算属性的 setter

计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

computed: { 
  fullName: { 
    // getter
    get: function () { 
      return this.firstName + ' ' + this.lastName
     },
    // setter
    set: function (newValue) { 
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
     }
   }
 }

现在再运行 `vm.fullName = ‘John Doe’` 时,`setter` 会被调用,`vm.firstName` 和 `vm.lastName` 也会相应地被更新。

侦听器

当你想要在数据变化时,执行异步操作或开销较大的操作,这是很有用的。例如Ajax

Ask a yes/no question:

{ { answer } }

%MINIFYHTML2106ddfaaa9950d448b39e6182ff3e6b9%%MINIFYHTML2106ddfaaa9950d448b39e6182ff3e6b10%%MINIFYHTML2106ddfaaa9950d448b39e6182ff3e6b11%

在这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

Class 与 Style 绑定

绑定 HTML Class

对象语法

可以传给 `v-bind:class`一个对象,以动态切换class。下面语法表示如果`isActive`为真,则就给`div`的`class`赋值`active`。

绑定class与原有class不冲突。可以传多个值来切换多个class

和如下 data: data: { isActive: true, hasError: false } 结果渲染为:
如果 hasError 的值为 true,class 列表将变为 "static active text-danger"。

绑定的数据对象不必内联定义在模板里:

data: { classObject: { active: true, 'text-danger': false } }

也可以在这里绑定一个返回对象的计算属性。

data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }

数组语法

我们可以把一个数组传给 `v-bind:class`,以应用一个 class 列表:

data: { activeClass: 'active', errorClass: 'text-danger' } 渲染为:

也可以根据条件来进行切换。使用三元运算符

也可以将对象绑定和数组绑定混用

绑定内联样式

对象语法

`v-bind:style` 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。

data: { activeColor: 'red', fontSize: 30 }

通常直接绑定到一个样式对象更加清晰。

{ { message } }

%MINIFYHTML2106ddfaaa9950d448b39e6182ff3e6b12%

数组语法

`v-bind:style` 的数组语法可以将多个样式对象应用到同一个元素上:

自动添加前缀

当`v-bind:style`使用需要特定前缀的CSS属性时,如`transform`。Vue会自动监听并添加对应前缀

多重值

可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 `flexbox`,那么就只会渲染 `display: flex`。

本站所有文章均由网友分享,仅用于参考学习用,请勿直接转载,如有侵权,请联系网站客服删除相关文章。若由于商用引起版权纠纷,一切责任均由使用者承担
极客文库 » Vue.js入门-2-模板语法

Leave a Reply

欢迎加入「极客文库」,成为原创作者从这里开始!

立即加入 了解更多