VUE学习笔记

1.基本绑定：

 new Vue(
        {
            el:'#elID',
            data:{
                // data obj
            },
            computed:{
                // computed obj
            },
            methods:{
                // methods obj
            },
        }
    );

2.指令：
前缀为v-
*v-if, v-for, v-bind, v-on…
*特性插值会转为v-bind绑定: href=’{{url}}’ –> v-bind:href=’url’

3.数据绑定只接受单个表达式：
{{number+1}} ok
{{ok?’yes’:’no’}} ok
{{message.split(”).reverse().join(”)}} ok
{{var a=1}} no
{{if(ok){return message}}} no

4.过滤器：
管道式的写法 –> {{message|capitalize}}
*可以串联: filterA|filterB
*可以带参数: filterA ‘arg1’ arg2

5.修饰符
前缀为.
*v-bind:href.literal=’a/b/c’

6.缩写
v-bind:href=’url’ –> :href=’url’
v-on:click=’dosomething’ –> @click=’dosomething’

7.计算setter

 computed:{
        fullName:{
            get:function(){
                // getter
            }
            set:function(newValue){
                //setter
            }
        }
    }

8.Class与Style绑定
*变量语法：v-bind:class=”{‘class-a’:isA, ‘class-b’:isB}” –> data:{isA:true, isB:false}
*对象语法：v-bind:class=”classObj” –> data:{classObj:{‘class-a’:true, ‘class-b’:false}}
*数组语法：v-bind:class=’[classA, classB]’ –> data:{classA:’class-a’, classB:’class-b’}

9.条件渲染
*v-if, v-show, v-else
*

Yes

No

*

Yes

No

*show只是简单的display:none

10.列表渲染
v-for
*内置变量：{{$index}}
*用法：v-for=’item in items’
v-for=’(index, item) in items’ *数组则是索引，遍历对象则是键

11.数组变动检测
能触发视图更新的方法：
*push, pop, shift, unshift, splice, sort, reverse // 变异方法
*filter, concat, slice // 替换数组
*尽可能复用DOM: track-by
v-for=”item in items” track-by=”_uid”
track-by=’$index’ // 根据index追踪，不是很明白！…片段不被移动，简单地已对应索引的新值刷新,也能处理数据数组中重复的值…

不能检测到以下变化：
    1.直接用索引设置元素：    vm.items[0]={};                    // vue解决方案：vm.items.$set(0, { childMsg: 'Changed!'}), vm.items.$remove(item)
    2.修改数据的长度：        vm.items.length=0;                // js中常见的清空, vue解决方案：直接用空数组替换

12.对象v-for
内置变量：$key

13.值域v-for
{{ n }}

14.内置的过滤器
filterBy 和 orderBy

15.方法与事件处理器
·v-on 监听DOM事件

 vue.component('my-component',{
       template:'<div>A custom component!</div>',
    });

局部注册：

     var c = Vue.extend({});
        var parentComponent = Vue.extend({
            components:{
                'my-component': c,
            }
        });

组件选项：

    var c = Vue.extend({
            data:function(){
                return {a:1};
            }
        });

is特性：
    *table中限制其他的节点不能放置其中

    <table>
            <tr is='my-component'></tr>
        </table>

Props:
    props用以从父组件接收数据:        
        使用：

    Vue.component('child',{
                    props:['msg'],
                    template:'<span>{{msg}}</span>'
                });

        声明：

    <child msg='hello!'></child>            // 字面量语法
    <child v-bind:msg='parentMsg'></child>    // 动态语法

        *如果props是myMsg, html中需要用my-msg(即：camelCase - kebab-case, 因为html的特性是不区分大小写)
        *字面量和动态语法稍有不同

    <comp some-prop="1"></comp>        // 传递了一个字符串 "1"
    <comp :some-prop="1"></comp>    // 传递实际的数字

Props绑定类型：
    <child :msg="parentMsg"></child>        // 默认为单向绑定
    <child :msg.sync="parentMsg"></child>    // 双向绑定
    <child :msg.once="parentMsg"></child>    //单次绑定
    *如果prop是一个对象或数组，是按引用传递。不管使用哪种绑定方式，都将是双向绑定

Props验证：

    props:{            // 此时props是一个对象
            propA: Number,
            propB:{
                type: String,                    // 类型(原生构造器：String, Number, Boolean, Function, Object, Array)
                required: true,                    // 是否必须项
                default: 'thyiad',                // 默认值(如果是Object, 默认值需由一个函数返回)
                validator: function(value){        // 验证
                    return value === 'thyiad';   
                },
                coerce:function(val){
                    return val+'';                // 将值强制转换为字符串
                    return JSON.parse(val);        // 将JSON字符串转换为对象
                }
            }
        }

父子组件通信：

this.$parent        // 子组件访问父组件
this.$root            // 访问根实例
this.$children        // 父组件的所有子元素
*不建议在子组件中修改父组件的状态

自定义事件：

$on()                // 监听事件
$emit()                // 触发事件
$dispatch()            // 派发事件，沿着父链冒泡
$broadcast()        // 广播事件, 向下传递给所有的后代

    使用：
        子组件中绑定函数派发事件：

methods:{
    notify:function(){
        this.$dispatch('child-msg',this.msg);
    }
}

        父组件中定义事件：

events:{
    'child-msg':function(msg){
        this.messages.push(msg);
    }
}

        *更直观的声明方式：
            <child v-on:child-msg='handleIt'></child>        // 直观的为父组件定义事件(child-msg), 并且触发父组件的handleIt函数, 子组件只关注触发事件

子组件索引：

<child v-ref:profile></child>
var child = parent.$refs.profile;

使用Slot分发内容：
    单个Slot:
        父组件的内容将被抛弃，除非子组件包含<slot>.
        如果只有一个没有特性的slot, 整个内容将被插到它所在的地方, 替换slot.
            父组件：

<child>
 <p>parent content</p>
</child>

            子组件模板：

<div>
   <h1>child content</h1>
   <slot>
       如果父节点没有设置内容，这里才会被显示
   </slot>
</div>

    命名Slot：
        父组件模板：

<child>
  <p slot='one'>One</p>
  <p slot='two'>two</p>
  <p>Default A</p>
</child>

        子组件模板：

<div>
    <slot name='one'></slot>
    <slot></slot>                    // 默认slot, 找不到匹配内容的回退插槽, 如果没有默认的slot, 不匹配内容将被抛弃
    <slot name='two'></slot>
</div>

    动态组件：
        可以在不同组件之间切换：

new Vue({
    el:'body',
    data:{
        currentView:'home',
    },
    components:{
        home:{},
        posts:{},
        archive:{},
    }
});

            父组件：
                <component :is='currentView' keep-alive></component>        // component是Vue保留的元素
                *keep-alive用来把切换出去的组件保留在内存中, 可以保留它的状态避免重新渲染
        activate钩子：
            用以在切入前做一些异步操作：

activate:function(done){
    var self = this;
    loadDataAsync(function(data){
        self.someData=data;
        done();
    });
}

        transition-mode
            指定列两个动态组件之间如何过渡：
                <component :is='currentView' transition='fade' transition-mode='out-in'></component>
                *默认进入与离开平滑地过渡, 可以指定另外两种模式：in-out, out-in (先进入or先离开)

    组件和v-for:
        <child v-for='item in items' :item='item' :index='$index'></child>
        *因为组件的作用域是孤立的, v-for里的item无法直接传递给组件, 必须像上面一样使用props传递数据

    异步组件
    资源命名约定
    递归组件
    片段实例
        *推荐模板只有一个根节点(使用template选项时)
    内联模板
        组件把它的内容当做它的模板
        <child inline-template></child>
        *不推荐

19.深入响应式原理
·如何追踪变化
*使用Object.defineProperty设置getter/setter
·变化检测问题
*不能检测到对象属性的添加或删除
*vm.$set(‘b’, 2);
Vue.set(object, key, value);
·初始化数据
*推荐在data对象上声明所有的响应属性
·异步更新队列
*默认异步更新DOM, 下次事件循环时清空队列, 执行必要的DOM更新
*Vue.nextTick(callback);
·计算属性的秘密
*计算属性是有缓存的, 除非显示设置为不缓存

computed:{
    attr:function(){
        return Date.now()+this.msg;
    }
}
TO:
computed:{
    attr:{
        cache: false,
        get: function(){
            return Date.now()+this.msg;
        }
    }
}

        *但只是在JS中访问是这样的, 数据绑定仍是依赖驱动的。