Vue学习(day1-day2)

Vue中7大属性

Vue中属性
1.el
2.data
3.methods
4.watch
5.computed
6.component
7.filters

1.自定义指令

<div id="app">
    <input type="text" v-color='msg'>
</div>

Vue.directive('color',{
	bind:funciton(el,binding){
	el.style.backgroundColor=binding.value.color;
}
})

   var vm = new Vue({
          el: '#app',
          data: {
               msg: {
                    color: 'red'
               }
          },
     });

2.计算属性

<div id=app>
    <div>
        {{msg}}
    </div>
    <div>
        {{reverseString}}
    </div>
</div>

var vm=new Vue({
	el:"#app",
	data:{
		msg:"nihao"
	},
	computed:{
		reverseString(){
		return this.msg.split("").reverse().join('');
			}
	}
})

3.侦听器

<div id="app">
<div>
    <span>名：</span>
    <span>
        <input type="text" v-model="firstName">
    </span>

    <div>
        <span>姓：</span>
        <span>
            <input type="text" v-model="lastName">
        </span>
    </div>
    <div>{{fullName}}</div>
</div>
</div>


var vm=new Vue({
	el:"#app",
	data:{
	firstName:"jim",
	lastName:"green"
	},
	watch:{
		firstName(){
		this.fullName=val+' '+this.lastName;
}
}
})

v-model.lazy="uname"==>>延迟绑定

4.过滤器

<div id="app">
    <p>{{msg  | msgFormat}}</p>
</div>

Vue.filter('msgFormat',function(msg){
	return msg.replace(/单纯/g,'xx')
})

    var vm = new Vue({
         el: '#app',
         data: {
              msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人',
         },
         methods: {},
         //定义私用局部过滤器。只能在当前 vue 对象中使用
         // filters: {
         //      dataFormat(msg) {
         //           return msg+'xxxxx';
         //      }
         // }
    });

  ================//使用filters==>时间转换===================


<div id="app">
    <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
</div>

 Vue.filter('format', function(value, arg) {
          function dateFormat(date, format) {
               if (typeof date === "string") {
                    var mts = date.match(/(\/Date\((\d+)\)\/)/);
                    if (mts && mts.length >= 3) {
                         date = parseInt(mts[2]);
                    }
               }
               date = new Date(date);
               if (!date || date.toUTCString() == "Invalid Date") {
                    return "";
               }
               var map = {
                    "M": date.getMonth() + 1, //月份
                    "d": date.getDate(), //日
                    "h": date.getHours(), //小时
                    "m": date.getMinutes(), //分
                    "s": date.getSeconds(), //秒
                    "q": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
               };

               format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                    var v = map[t];
                    if (v !== undefined) {
                         if (all.length > 1) {
                              v = '0' + v;
                              v = v.substr(v.length - 2);
                         }
                         return v;
                    } else if (t === 'y') {
                         return (date.getFullYear() + '').substr(4 - all.length);
                    }
                    return all;
               });
               return format;
          }
          return dateFormat(value, arg);
     })
     var vm = new Vue({
          el: '#app',
          data: {
               date: new Date()
          }
     });

Vue的生命周期

  /*Vue实例的生命周期*/
    var vm=new Vue({
         el:"#app",
         data:{
              msg:'生命周期'
         },
         methods:{
              update:function(){
                   this.msg='hello'
              },
              destroy:function(){
                   this.$destroy();
              }
         },
         beforeCreate:function(){
              console.log('beforeCreate');
         },
         created:function(){
              console.log('created');
         },
         beforeMount:function(){
              console.log('beforeMount')
         },
         mounted:function(){
              console.log('mounted')
         },
         beforeUpdate:function(){
              console.log('beforeUpdate')
         },
         updated:function(){
              console.log('updated')
         },
         beforeDestroy:function () {
              console.log('beforeDestroy')
         },
         destroyed:function(){
              console.log('destroyed')
         }
    })

动态赋值

<div id="app">
    <ul>
        <li v-for='item in list'>{{item}}</li>
    </ul>
    <div>
        <div>{{info.name}}</div>
        <div>{{info.age}}</div>
        <div>{{info.gender}}</div>
    </div>
</div>

var vm=new Vue({
     el:"#app",
     data:{
          list:['apple','orange','banana'],
          info:{
               name:'list',
               age:12,
               gender:'123'
          }
     }
});

vm.$set(vm.info,"gender",'female');

图书管理案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 530px;
            text-align: center;
        }
        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;
        }
        .grid th,td {
            padding: 10;
            border: 1px dashed #F3DCAB;
            height: 35px;
            line-height: 35px;
        }
        .grid th {
            background-color: #F3DCAB;
        }
        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }
        .grid .total {
            height: 30px;
            line-height: 30px;
            background-color: #F3DCAB;
            border-top: 1px solid #C2D89A;
        }
    </style>
</head>
<body>
<div id="app">
<div class="grid">
    <h1>图书管理</h1>
    <div class="book">
        <label for="id">编号：</label>
        <input type="text" id="id" v-model="id" :disable="flag" v-focus>
        <label for="name">名称</label>
        <input type="text" id="name" v-model="name">
        <button @click="handle" :disabled="submitFlag">提交</button>
    </div>
    <div class="total">
        <span>图书总数：</span>
        <span>{{total}}</span>
    </div>
    <table>
        <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for='item in books'  :key='item.id' >
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
            <td>
                <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                <span>|</span>
                <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//指令
Vue.directive('focus',{
     inserted:function(el){
          el.focus();
     }
});

Vue.filter('format',function(value,arg){
     function dateFormat(date,format){
          if(typeof date==="string"){
               var mts=date.match(/(\/Date\((\d+)\)\/)/)
               console.log(mts,111);
               if(mts&&mts.length>=3){
                    date=parseInt(mts[2]);
               }
          }
          date=new Date(date);
          if(!date||date.toUTCString()=="Invalid Date"){
               return "";
          }

          var map={
               "M": date.getMonth() + 1, //月份
               "d": date.getDate(), //日
               "h": date.getHours(), //小时
               "m": date.getMinutes(), //分
               "s": date.getSeconds(), //秒
               "q": Math.floor((date.getMonth() + 3) / 3), //季度
               "S": date.getMilliseconds() //毫秒
          };
          format=format.replace(/([yMdhmsqS])+/g,function(all,t){
               var v=map[t];
               if(v!==undefined){
                    if(all.length>1){
                         v='0'+v;
                         v=v.substr(v.length-2);
                    }
                    return v;
               }else if(t==='y'){
                    return (date.getFullYear()+"").substr(4-all.length);
               }
               return all;
          });
          return format;
     }
     return dateFormat(value,arg);
})

     var vm = new Vue({
          el: '#app',
          data: {
               flag: false,
               submitFlag: false,
               id: '',
               name: '',
               books: []
          },
          methods:{
               handle(){
                    if(this.flag){
                         //编辑图书
                         this.books.some((item)=>{
                              if(item.id==this.id){
                                   item.name=this.name;
                                   //完成更新操作之后，需要终止循环
                                   return true;
                              }
                         });
                         this.flag=false;
                    }else{
                         //添加图书
                         var book={};
                         book.id=this.id;
                         book.name=this.name;
                         book.date=2525609975000;
                         this.books.push(book);
                         //清空表单
                         this.id='';
                         this.name='';
                    }
               },
               toEdit(id){
                    this.flag=true;
                   var book= this.books.filter(function(item){
                         return item.id==id;
                    });
                    this.id=book[0].id;
                    this.name=book[0].name;
               },
               deleteBook(id){
                    this.books=this.books.filter(function(item){
                         return item.id!=id;
                    });
               }

          },
          computed:{
            total(){
                 return this.books.length;
            }
          },
          watch:{
               name(val){
                    var flag=this.books.some(function(item){
                         return item.name==val;
                    });
                    if(flag){
                         //图书名称存在
                         this.submitFlag=true;
                    }else{
                         this.submitFlag=false;
                    }
               }
          },
          mounted: function(){
               // 该生命周期钩子函数被触发的时候，模板已经可以使用
               // 一般此时用于获取后台数据，然后把数据填充到模板
               let data = [{
                    id: 1,
                    name: '三国演义',
                    date: 2525609975000
               },{
                    id: 2,
                    name: '水浒传',
                    date: 2525609975000
               },{
                    id: 3,
                    name: '红楼梦',
                    date: 2525609975000
               },{
                    id: 4,
                    name: '西游记',
                    date: 2525609975000
               }];
               this.books = data;
          },filters:{}
     });
</script>
</body>
</html>