Vue的一些指令

循环渲染指令

v-for指令：基础用法

v-for="(item,index)" in 数组，这是v-for的基础用法，在我们进行项目开发的时候，经常会接触到后端写的数据接口，这些接口一般都非常多而且复杂，我们就需要用到v-for来循环渲染这些数据到我们的页面上，这样可以大大简便我们的开发，具体的使用代码如下，这里渲染出了一个表格数据：

<body>
    <div id="app">
        <table class="table table-bordered table-hover table-striped">
                    <td>0</td>
                    <td>1</td>
                    <td>xxxx</td>
        </table>

            data: {
                list: [
                    {id:1,name:'张三'}
                ]
            }

2.过滤器

全局过滤器--vue.filter("名字",function(过滤器前面的值){return结果)
私有过滤器--定义到组件的filter节点之下
调用--{{message/dateFormat}}

watch监听器

分为两种格式

方法格式
对象格式

具体使用代码如下：

<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>
        watch: {
            username(newVal,oldVal){
                console.log('监听到了username值的变化',newVal,oldVal);
            }
        }
    })
    </script>
</body>

computed注意事项

在定义的时候，要定义为function
在使用的时候，当作普通属性使用即可。在template模板结构中可以使用，在methods方法中也可以使用，如： this.计算属性的名字使用的时候要return个结果，只要任何一个依赖的数据发生了变化，计算属性就会重新赋值。

5.vue的生命周期

生命周期指的是每一个组件从创建到运行到销毁的一个过程，是一个时间段，在生命周期的不同阶段，会按次序自动依次执行的函数，这种函数叫做生命周期函数，强调的是时间点，可以称为钩子函数。

vue基础day2

Vue的一些指令