Vue入门笔记#数据绑定语法
#数据绑定语法#
#文本：
数据绑定的基础表型形式，使用“Mustache”语法（双大括号）（特意查了一下Mustache同“moustache”释义为：髭；上唇的胡子，小胡子，最起码我觉得挺形象的）
实例：https://jsfiddle.net/miloer/035ase08/
#html
<div >
<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:用法：在表单控件上创建双向绑定。
- 另见：表单控件绑定
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。
- 另见：
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