Vue学习3--数据绑定语法

个人博客插值文本数据绑定最基础的形式是文本插值，使用”Mustache” 语法(双大括号)<span>Message: {{ msg }}</span>Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时他也会更新。你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：<span> this well never change: {{* msg }} </sp

canglingyue

2697人浏览 · 2016-06-24 14:04:59

canglingyue · 2016-06-24 14:04:59 发布

个人博客

插值

文本

数据绑定最基础的形式是文本插值，使用”Mustache” 语法(双大括号)

<span>Message: {{ msg }}</span>

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时他也会更新。

你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

<span> this well never change: {{* msg }} </span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定语法</title>
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <input v-model = 'msg'><br/>
    改变：{{ msg }} <br/>
    不变：{{* msg }}
</div>
<script>
    var Vm = new Vue({
        el: '#app',
        data: {
            msg: 'qqqq'
        }
    })
</script>
</body>
</html>

原始的HTML

双Mustache 标签将数据解析为纯文本而不是 HTML 。为了输出真的 HTML 字符串，需要用三 Mustache 标签：

<div>{{{ raw_html }}}</div>

内容以 HTML 字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用 partials。

HTML 特性

Mustache 标签也可以用在 HTML 特性内

<div id = "item-{{ id }}"></div>

注意在 Vue.js 指令和特殊特性内不能用插值，不必担心，如果Mustache 标签用错了地方Vue.js 会给出警告。

绑定表达式

放在 Mustche 标签内的文本称为 绑定表达式 。在 Vue.js 中，一段绑定表达式由一个简单的 javascript 表达式和可选的一个或多个过滤器构成。

JavaScript 表达式

到目前为止，我们的模板只绑定到简单的属性键。实际上 vuejs 在数据绑定内支持全功能的 JavaScript 表达式：

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

过滤器

Vue.js 允许在表达式后添加可选的过滤器
{{ message | capitalize }}

指令

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

<p v-if="greeting">Hello!</p>

这里 v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素。

参数

有些指令可以在其名称后面带一个“参数”，中间放一个冒号隔开。例如：v-bind 指令用于响应地更新 HTML 特性：

<a v-bind:href="url"></a>

这里 href 是参数，它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定。可能你已注意到可以用特性插值 href=”{{url}}” 获得同样的结果：这样没错，并且实际上在内部特性插值会转为 v-bind 绑定。

缩写

v- 前缀是一种标识模板中特定的 Vue 特性的视觉暗示。当你需要在一些现有的 HTML 代码中添加动态行为时，这些前缀可以起到很好的区分效果。但你在使用一些常用指令的时候，你会感觉一直这么写实在是啰嗦。而且在构建单页应用（SPA ）时，Vue.js 会管理所有的模板，此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和 v-on 提供特别的缩写：

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^