Vue 学习笔记

在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>