Vue入门笔记#数据绑定语法

标签：

#数据绑定语法#

#文本：

数据绑定的基础表型形式，使用“Mustache”语法（双大括号）（特意查了一下Mustache同“moustache”释义为：髭；上唇的胡子，小胡子，最起码我觉得挺形象的）

实例：https://jsfiddle.net/miloer/035ase08/

#html
<div id="app">
<input type="text" v-model="message">
<div>没星星的： {{ message }}</div>
<div>来自猩猩的你：{{*message}}</div>
</div>
#js
new Vue({
    el: ‘#app‘,
    data: {
        message: ‘Hello World!‘
    }
})

前面有“+”了*的就是原始的数据了，今后的数据变化就不会再次引起更新了。

#JavaScript 表达式

绑定的数据支持Javascript表达式 ：

{{ name+ ” hi”}}
{{ message.split(”).reverse().join(”) }}

https://jsfiddle.net/miloer/035ase08/4/

#过滤器

{{msg||capitalize }}

过滤器可以串联
{{ message | filterA | filterB }}

过滤器也可以接受参数

{{ message | filterA ‘arg1’ arg2 }}

#指令

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，它的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。
<p v-if=“end”>Hello!</p>
//当end为真时，就显示Hello

#修饰符

修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定。例如 .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式<a v-bind:href.literal=“/a/b/c”></a>

#缩写

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

<a v-on:click="doSomething"></a>  =>  <a @click="doSomething"></a>

v-model

• 类型： 随表单控件类型不同而不同。
• 限制：
  • <input>
  • <select>
  • <textarea>
• Param Attributes:用法：在表单控件上创建双向绑定。
  • lazy
  • number
  • debounce
• 另见： 表单控件绑定

v-if

• 类型： *
• 用法：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。
• 另见： 条件渲染

v-bind

• 缩写： :
• 类型： * (with argument) | Object (without argument)
• 参数： attrOrProp (optional)
• 修饰符：用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。在绑定 class 或 style 时，支持其它类型的值，如数组或对象。在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时，可以绑定到一个对象。注意此时 class 和 style 绑定不支持数组和对象。
  • .sync – 双向绑定，只能用于 prop 绑定。
  • .once – 单次绑定，只能用于 prop 绑定。
  • .camel – 将绑定的特性名字转回驼峰命名。只能用于普通 HTML 特性的绑定，通常用于绑定用驼峰命名的 SVG 特性，比如 viewBox。
• 另见：
  • Class 和 Style 绑定
  • 组件 Props

v-on

• 缩写： @
• 类型： Function | Inline Statement
• 参数： event (required)
• 修饰符：用法：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性： v-on:click="handle(‘ok‘, $event)"。1.0.11+ 在监听自定义事件时，内联语句可以访问一个 $arguments 属性，它是一个数组，包含传给子组件的 $emit 回调的参数。
  • .stop – 调用 event.stopPropagation()。
  • .prevent – 调用 event.preventDefault()。
  • .capture – 添加事件侦听器时使用 capture 模式。
  • .self – 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} – 只在指定按键上触发回调。

• 示例：
  

  <!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat(‘hello‘, $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 --> <input @keyup.13="onEnter">

  在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）：

  <my-component @my-event="handleThis"></my-component> <!-- 内联语句 --> <my-component @my-event="handleThis(123, $arguments)"></my-component>

再放一个刚学Vue的小例子：https://coding.net/u/Miloer/p/weui_vue/git

参考：http://vuejs.org.cn/guide/

原文：http://www.cnblogs.com/moustache/p/5441928.html

Vue入门笔记#数据绑定语法

标签：

原文地址：http://www.cnblogs.com/moustache/p/5441928.html