vuejs学习1

1. 构造器

var vm= new vue（{}）;

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看.

2. 属性和方法

var data={a:1};
        var vm=new Vue({
            data:data
        });
        //每个 Vue 实例都会代理其 data 对象里所有的属性：
        console.log(vm.a===data.a);
        //设置属性也会影响到原始数据
        vm.a=2
        console.log(data.a);
        // ... 反之亦然
        data.a=3
        console.log(vm.a);
        //注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

3. 实例生命周期

4. 双向数据绑定和插值

5. 常用指令

v-model

v-for

v-on

v-if/v-else/v-show

6. 计算属性

        var vm =new Vue({
            el:'#example',
            data:{
                message:'Hello'
            },
            computed:{
                reversedMessage:function(){
                    return this.message.split('').reverse().join('');
                }
            }
        });
        console.log(vm.reversedMessage);//olleh
        vm.message='goodbye';
        console.log(vm.reversedMessage);//eybdoog

 7. class与style的绑定

　　a. 对象语法

　　　　html

　　　　

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

　　js

data: {
  isActive: true,
  hasError: false
}　　

　　b. 数组语法

　　　　html 

　　

<div v-bind:class="[activeClass, errorClass]">

　　　　js

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

　　　　如果你也想根据条件切换列表中的 class ，可以用三元表达式：

<div v-bind:class="[{ active: isActive }, errorClass]">

8.  绑定内联样式

　　　　1. 

//html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
//js
data: {
  activeColor: 'red',
  fontSize: 30
}

　　　　2.

//html
<div v-bind:style="styleObject"></div>
//js
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

学习自:

　　　　http://cn.vuejs.org/v2/guide/instance.html

　　　　https://segmentfault.com/a/1190000003968020