Vue.js学习笔记（一）

Vue

每个 Vue 应用都需要通过实例化 Vue 来实现：
var vm = new Vue({
//选项
})

el : DOM元素中的id，
data : 定义属性，
methods : 定义函数，可以用return返回函数值，

{{ }}用于输出对象属性和函数返回值，

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入
了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

Vue 中的实例属性和方法都有$，用来跟用户定义的属性区分。

Vue模板语法：

文本 ：使用{{…}}插值

html : 使用v-html指令输出html代码

属性 ：使用v-bind指令 [html属性不能使用双大括号形式绑定，只能使用v-bind指令

v-bind 指令被用来响应地更新 HTML 属性 v-bind : href = “url”

表达式 ： 支持js表达式

指令 ： v-if = true||false 决定是否插入p元素

参数 ：参数在指令之后以冒号指明，v-bind : href = “url” ，href就参数。

v-on 指令 ： 用于监听DOM事件 例如：v-on : click = “doSth”，这的参数是监听的事件名

修饰符 ： 以 . 指明的特殊后缀 用于指定应该以特殊方式绑定。

.prevent 修饰符告诉v-on指令对于书法事件调用event.preveventDefault();

用户输入 ：使用v-model指令实现双向数据绑定

过滤器 ：{{ message | capitalize }}
message : 传入的数据 capitalize : 过滤函数

过滤器串联：{{ message | filterA | filterB }}

过滤器接受参数 ： {{ message | filterA(‘arg1’, arg2) }}

message 是第1个参数，字符串 ‘arg1’ 将传给过滤器作为第2个参数， arg2 表达式的值将被求值然后传给过滤器作为第3个参数。

缩写：
v-bind缩写 ：

<a v-bind:href="url"></a>  ->  
<a :href="url"></a>

v-on缩写 ：

 <a v-on:click="dosth"></a> -> 
 <a @click="dosth"></a>

条件

v-if="seen" | v-else="seen" | v-else-if="seen" | v-show="seen" 

根据表达式seen的值决定是否插入此行元素

v-if与v-show的区别？

1. 在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

2. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

3. 相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

循环

1）v-for = "site in sites" (site为元素别名 sites为数组名)
2）v-for = "(value, key) in object" value为值 ，key为键名
3）v-for = "(value, key, index)" index为索引

例：

<div id = "app">
    <ul>
        <li v-for="(vlue, key, index) in object">
        {{index}}.{{key}}:{{value}}
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            object:{
                name:'aaa',
                url:'http://www.baidu.com',
                slogan:'12222'
            }
        }
    })
</script>

4）迭代整数：
v-for = “n in 10”