vue基础知识--图书管理2

之前的一篇文章实现了一个图书管理小案例，也总结了vue常用的几个特性，这篇文章主要是将几个特性应用到图书管理中。

编号的输入框自动获取焦点：

<label for="id">
    编号：
</label>
<input type="text" id="id" v-model='id' :disabled='flag' v-focus>

        Vue.directive('focus',{
            inserted:function(el){
                el.focus()
            }
        })

计算属性：统计书籍总数

computed:{
                total:function(){
                    // 方法一：
                    // var count=0
                    // this.books.forEach(element => {
                    //     count++;
                    // });
                    // return count;
                    // 方法二：
                    return this.books.length
}

侦听：（验证图书名是否存在，不允许提交重复的图书名）

        watch:{
                name:function(val){
                    // 验证图书名称是否已经存在
                    this.sub_flag=this.books.some(function(item){
                        return item.name==val
                    })
                }
            },

生命周期函数mounted

          mounted:function(){
                // 该生命周期钩子函数触发时，模板已经可以使用
                // 一般用于获取后台数据，然后填充到模板
                var data=[{
                    id:1,
                    name:'三国演义',
                    date:new Date()
                },
                {
                    id:2,
                    name:'水浒传',
                    date:new Date()
                },
                {
                    id:3,
                    name:'西游记',
                    date:new Date()
                },
                {
                    id:4,
                    name:'红楼梦',
                    date:new Date()
                },]
                this.books=data
            },

data应该是从后台获取，这里只是模拟。