vue学习笔记

vue学习笔记

想记录一下学习vue过程中的一些笔记，就用这边博客记录吧：

##v-model
使用v-model实现表格数据的双线绑定，eg:

    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue'
                }
            });
        };
    </script>
<div id="box">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
</div>

这样在修改input输入框内容时就修改了msg内容，并显示出来。
##v-for
使用v-for可以遍历数组和json形式的数组

   <script>
        window.onload=function(){
            new Vue({
                el:'.box',
                data:{
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                }
            });
        };
    </script>

<div class="box">
    <div v-for = "item in arr">
        {{item}}
    </div>
    <div v-for = "(item, key, index) in json">
        {{item}} {{key}} {{index}}
    </div>
</div>

可以看出遍历数组的时候我们可以通过遍历参数的个数获取相应的参数。比如这里的json数组，item输出的是json队形的值：apple banana orange，这里的可以输出的是对应的字段名：a b c，这里的index输出的是相应字段在json中的索引：0 1 2 。
##methods 方法
methods是实现方法的地方，在methods添加函数后，就可以调用执行这个函数了。

<script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'abc',
                    arr:['apple','banana','orange','pear'],
                    json:{a:'apple',b:'banana',c:'orange'}
                },
                methods:{
                    show:function(){
                        alert('d');
                    },
                    add:function(){
                        this.arr.push('aaa')
                    }
                }
            });
        };
    </script>

    <div id="box">
        <input type="button" value="按钮" v-on:click="add()">
    </div>

通过点击按钮就可以在数组中添加一个元素。这里的this是对象本身。
这里v-on对应的不仅click 还有mouseover , mouseout, mousedown等等，v-on可以简写成@来实现@click= “add()”
###vue-resource.js
实现http之类的交互的库
get post jsonp
###vue-router.js
vue路由
####v-cloak
解决闪烁问题 在使用{{}}时由于网上问题编译问题 会有延迟 用户可能会看到{{}}，使用v-cloak解决
###计算属性 computed
通过set get方法实现计算属性值的变化，computed可以设置逻辑代码，必须return
###$mount 手动挂载
###limitBy 和 filterBy 失效
替换 limitBy 过滤器

不再这样写：

{{ item }}

在 computed 属性中使用js内置方法： .slice method：

{{ item }}

computed: { filteredItems: function () { return this.items.slice(0, 10) } } 替换 filterBy 过滤器 ####vue.directive ###Vue.elementDirective 移除 ####Vue.directive('on').keyCodes 替换

新的简明配置 keyCodes 的方式是通过 Vue.config.keyCodes例如：
// v-on:keyup.f1 不可用
Vue.config.keyCodes.f1 = 112

####vm.$watch changed

通过 vm.$watch创建的观察器现在将在组件渲染时被激活。这样可以让你在组件渲染前更新状态，不用做不必要的更新。比如可以通过观察组件的prop变化来更新组件本身的值。如果以前通过vm.$watch 在组件更新后与 DOM 交互，现在就可以通过updated生命周期钩子来做这些。

####transition 实现过渡动画