使用"{{ }}"来插入文本
使用v-html来插入html元素
v-bind给元素绑定属性,例如下面的,将title属性指定为data.title相同的值。v-bind指令后面的属性可以是任意值
支持完整的js表达式,在{{}}中写
vue的指令以v-打头
v-on用于绑定事件,例如click,submit
v-model实现数据双向绑定
用管道符|作为过滤器,第一个参数,作为第二个参数(过滤函数),的参数。过滤器函数放在vue的filters当中
缩写:<a v-bind:href="url"> => <a :href="url"> <br><a v-on:click="doSomething"> => <a @click="doSomething">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 学习</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p><br> <div v-html="html"></div><br> <div v-bind:title="title">v-bind给元素绑定属性</div><br> {{1+1}}<br> {{message.split(‘‘).reverse().join(‘‘)}}<br> <div v-bind:id="html + id"></div><br> <div v-if="seen">seen的值为true,则显示该标签</div><br> <div ><a v-on:click="aclick()" href="#">点击我</a></div><br> <div ><input v-model="message"></div><br> <div >过滤器:{{ message | reverser}}</div><br> </div> <script> var data = { message: ‘hello, vue!‘, html: ‘<h1>你好!</h1>‘, title:‘div-title‘, id:100, seen:false } var app = new Vue({ el: ‘#app‘, data: data, methods: { print_message: function(){ return this.message; }, aclick: function(){ alert(‘you click me!‘) } }, filters: { reverser: function(str){ if ( str === ‘‘) return ‘‘; return str.split(‘‘).reverse().join(‘‘) } } }); </script> </body> </html>