我的 Vue.js 学习日记 （三）

上节回顾

写了两篇文字发现并没有什么实质性的收获，由于时间上的原因可能无法这样一点一点的看了，今天准备先了解一下模版与属性。

Mustache插值

语法{{}}

用法：

• <h3>{{title}}</h3>
• <p>{{num + 1}}</p>
• {{js表达式}}

额外信息：
<span v-once>{{num +1}}</span> 如此可以阻止数据更新。
<div v-html="hr"></div> 我们假设hr : '<hr/>'，那么这里将生成一个横线到html

v-bind 与 v-on

这里只介绍了两个常用的指令，我想我可以通过对其的学习来掌握那些以后将会用到的指令。
v-bind用法：

• v-bind:HTML特性
• 如：<div v-bind:id="id"></div>
• 如：<img v-bind:src="img">
• 如：<a v-bind:link="uri"></a>
• 缩写去掉v-bind，只写:
• 如：<a :link="uri"></a>

v-on用法：

• v-on:用来绑定事件
• 如：<button v-on:click="method">按钮</button>
• 缩写：<button @click="method">按钮</button>

计算属性与监听器

那么什么是计算属性？

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello world.',
        num : 1,
        hr: '<hr/>',
        seen:true,
        type:'a'
    },
    computed:{
        doSomething:{
            get : function () {
                return 1
            },
            set : function (value) {
                this.num=value
            }
        }
    }
})

通过观察可以看出

1. 计算属性与el、data是平级的
2. 计算属性可以有get与set属性访问器
3. 属性访问器的内部可以有逻辑运算

既然计算属性computed可以写逻辑，那么问题来了，他和方法methods有什么区别呢？

Vue给出了答案

当计算属性或方法内部用到的数据没有变化时，对他们进行重复调用，计算属性只会计算一次，之后的都是直接拿已有的结果返回，而方法每次都要重新跑一边

Vue将computed与watch拿来做了一下比较，其实我感觉computed是调用型，而watch是触发型，没什么好比的吧...

axios

本节的最后Vue提到了axios，它相当于Ajax，用途就不言而喻了。

小节

这样学感觉有些盲目，从明天起，开始以小Demo的方式来学习吧。
加油！