使用"{{ }}"来插入文本
使用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>
