Vue.js 模板语法
Vue.js 是一套构建用户界面的渐进式框架。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
插值
<body> <div id="vue"> <!--文本--> <span>{{message}}</span>
<!--Html--> <br> <div v-html="msg"></div>
<!--属性--> <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"> <br><br> <div v-bind:class="{'class1': class1}"> directiva v-bind:class </div>
<!--表达式--> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} </div> <script src="js/vue.js"></script> <script> var vue=new Vue({ el: '#vue', data: { message: 'Hello Vue!', msg:'<h1>Hello World!</h1>', class1:true, ok:true } }); </script> </body>
指令
指令（Directives）是带有 v- 前缀的特殊属性，指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
<body> <div id="vue"> <!--指令--> <p v-if="seen">出现</p> <!--#参数--> <a v-bind:href="url">其他页面</a> <!--缩写：<a :href="url">其他页面</a>--> <button v-on:click="say('hi')">soWhat</button> <!--缩写：<button @click="say('hi')">soWhat</button>--> </div> <script src="js/vue.js"></script> <script> var vue=new Vue({ el: '#vue', methods:{ say: function(a) { alert(a); } } }); </script> </body>
#修饰符
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():<form v-on:submit.prevent="onSubmit"></form>(取消事件的默认动作)
过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。
<body> <!--过滤--> <!--过滤器可以串联--> <div>{{ imissu | filt }}</div> <div>{{ imissu | filt | filt1}}</div> </div> <script src="js/vue.js"></script> <script> var vue=new Vue({ el: '#app', data: { imissu:"i miss u" }, filters:{ filt:function(value){ if (!value) return ''; value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); }, filt1:function(value){ if (!value) return ''; value = value.toString(); return value.split('').reverse().join(''); } } }); </script>
</body>
缩写
v-bind 缩写:
<!-- 完整语法 --> <a v-bind:href="url"></a>
<!-- 缩写 --> <a :href="url"></a>
v-on 缩写:
<!-- 完整语法 --> <a v-on:click="doSomething"></a>
<!-- 缩写 --> <a @click="doSomething"></a>
