在html中插入数据控件有2种方式，一种是{{}}双花括号，一种是directive,类似v-on:click这种写法
<span v-once>This will never change: {{ msg }}</span>
这样视图中的msg就不会变了。
过滤器
{{ float_number | toInt }
new Vue({
el: '#app',
data: {
float_number: 3433.45
},
filters: { //filters属性关键字，过滤器不过是一个方法，
toInt: function (aaa) {
return parseInt(aaa);
}
//toInt是一个方法
}
})
过滤器参数
既然过滤器是方法，当然可以加入参数：
{{ message | filterA 参数1，参数2 }}
参数不是用括号括起来，而是空格在后面直接写，不同参数用逗号分隔，参数这个地方可以写一个具体的值，也可以写一个表达式，具体可以看下面的示例
https://jsfiddle.net/z56q068g/5/
过滤器可以被串联执行（顺序执行）
{{ message | filterA | filterB }}
这个很好理解。
在{{}}中运行表达式
什么是JavaScript表达式呢，请看下面示例：
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}
它一般表达的是运算关系；如果运算很简单，一次性的，你可以不用filter，而采用这种简短的写法； 注意：{{}}里只能写单行表达式，不能写多行，更复杂的运算我们后面会介绍解决方案；
单次插值：<span v-once="name">{{name}}</span> v-once控制只能赋值一次， 更改了那么值 显示的还是 第一次name的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" v-once> <!-- 控制数据不变 一直为初始值 -->
{{msg}}
<div>
{{msg}}
</div>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
vu = new Vue({
el:"#box",
data:{
msg:"aaaac"
}
})
vu.$data.msg='2323'; 修改值的一种形式
//vu.msg="2323" 修改值的另一种形式
</script>
</html>
v-bind
<a v-bind:href="url"></a>
这是用来绑定html已有的属性，比如 class, style, src,href等等，url来自data，这样这些属性就变成动态，响应式的了。
v-html
<div v-html="rawHtml"></div>
这个是用来显示带html标签的内容的，例如文章的正文，rawHtml来自data。
v-text
<div v-text="stringText"></div>
把字符串加到div标签中，stringText来自data，这种写法等同于
<div>{{stringText}}</div>
v-on
<a v-on:click="doSomething">
这个我们已经见过，事件绑定肯定要输入事件参数。
计算属性 computed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>原来的小数: {{ float_number }}</p>
<p>计算过的动态属性（整数）: {{ int_number }}</p>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el: '#app',
data: {
float_number: 3433.45
},
computed: { //computed 计算属性 （翻译：计算的）属性名不可改
int_number: function () { //这里定义的int_number不再当做方法使用，而是一个属性，
return parseInt(this.float_number); //parseInt(this.float_number)注意这个this，指的就是vm;
}
},
filters: { //filters属性关键字，filters 是属性属性名不能改 过滤器不过是一个方法，
toInt: function (value) {
return parseInt(value);
}
}
})
</script>
</html>