发表于

有时候，我们需要使用多个表达式来表示某个值，但在 Vue.js 是不允许的，它限制为一个表达式。因此，当需要多于一个表达式的逻辑时，应使用计算属性（computed）

基础栗子

<div id="example">
    a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
    el: '#example',
    data: {
        a: 10
    },
    computed: {
        // 一个计算属性的 getter
        b: funciton(){
            // this 指向 vm 实例
            return this.a + 1;
        }
    }
})

ps. 这里的 vm.b 依赖于 vm.a，当 a 的值变化时，vm.b 相应变化；但反过来 vm.b 变化时，vm.a 不会改变。

computed VS $watch

观察 Vue 实例的数据变化，当需要根据其他数据变化时改变相应的数据时，有两种方法：计算属性和 $watch。
While, “computed” way is better.

e.g.

<div id="demo">{{fullname}}</div>

/* $watch 监听 */
var vm = new Vue({
    el: 'demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
    }
});
vm.$watch('firstName', function(val){
    this.fullName = val + ' ' + this.lastName
});
vm.$watch('lastName', function(val){
    this.fullName = this.firstName + ' ' + val
});
/* $watch 监听 END */
/* computed 计算属性 */
var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: function(){
            return this.firstName + ' ' + this.lastName
        }
    }
})
/* computed 计算属性 END */

计算 setter

computed 对象里的属性值可以为一个函数，也可以是一个对象。
当为 function 的时候，默认是一个 getter 方法（用来获取值的方法）；
当值为一个对象的时候，对象有两个属性方法，get 和 set，通过 set 这个 setter，当该变量的数据改变时，有联系的数据也可以相应改变。
如：

computed: {
    fullName: {
        // getter
        get: function() {
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function(newValue) {
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    }
}
当调用 vm.fullName = 'D Wade'时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应更新。

发表于

插值

最基础的形式：文本插值（将数据解析为纯文本）

Mustache 语法（双大括号）

<span>Message: {{ msg }}</span>

单次插值（不会变化）

<span>This will never change: {{* msg }}</span>
* 要和 { 贴紧，不能有空格

输出 HTML

三括号

<div> {{{ raw_html }}} </div>

注意：

  • 数据绑定将被忽略。
  • 需要复用模版片段，应使用 partials。
  • 动态渲染 HTML 非常危险，易受 XSS 攻击。
  • 只对可信内容插值，永不用于用户提交的内容

表达式

JavaScript 表达式

支持全功能的 JavaScript 表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

但只能支持表达式，赋值语句、条件语句都不可以用
*表达式只在所属的 Vue 实例的作用域内计算

过滤器

一个 JavaScript 函数，用来对表达式的值进行过滤。以“|”隔开。
可以串联：

{{ message | filterA | filterB }}

可以接收参数：

{{ message | filterA 'arg1' arg2 }}

ps. 过滤器的变量 arguments 中，第一个参数为表达式的值，第二个为如上的’arg1’，第三则是 arg2。

指令

形如 v-*，其值限定为绑定表达式。职责是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。
指令在解析后，不会出现在最终渲染的标记中。

参数

部分指令可以在其名称后面带一个参数，以“:”隔开
传入参数可以让指令根据不同参数的情况来采取不同的行为。如：

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

在这里 v-bind 指令将 href 和表达式 url 进行绑定，其实也等于 href=，只不过后者最后也会内部转换为 v-bind 形式。

又如:

<a v-on:click="doSomething">button</a>

on 用来监听事件，:后面的“click”就是监听的事件名称。

修饰符

以“.”隔开，跟在指令后面，用来表示指令应当以特殊方式绑定。

缩写

v- 前缀是一个标识，但 Vue.js 为两个常用指令提供了特别的缩写

v-bind

<!-- 完整 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整 -->
<a v-bind:disabled="url"></a>
<!-- 缩写 -->
<a :disabled="url"></a>

v-on

<!-- 完整 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

发表于

Vue.js 应用的创建：
使用构造函数 ==> var vm = new Vue( optionObj )
optionObj 包括数据、模版、挂载元素、方法、生命周期钩子etc。

使用预定义选项创建可复用的组件构造器

var myComponent = Vue.extend( optionObj );			// 预定义扩展选项
var myComponentInstance = new MyComponent();		// 创建扩展

对于 optionObj 选项里的 data 属性，和 Vue 实例对象是关联的，两者谁的数据被改变，另一个也会相应改变。

Vue 实例暴露的实例属性和方法，都有前缀$

生命周期钩子，应该是在实例的不同阶段触发的函数

生命周期图示：

发表于

Vue.js 的组件系统，其实就是一个组件树——以独立可复用的小组件来构建大型应用

====>

发表于

状态码

100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
500-599 用于支持服务器错误。
常见的：

  • 200：一般用于相应GET和POST请求。这个状态码对servlet是缺省的；如果没有调用setStatus方法的话，就会得到200。
  • 302：指所请求的文档在别的地方；文档新的URL会在定位响应头信息中给出。浏览器会自动连接到新的URL。 只是定位头信息中所给的URL应被理解为临时交换地址而不是永久的。
  • 404：请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。