二:Vue基础

最新推荐文章于 2022-09-07 10:16:48 发布
最新推荐文章于 2022-09-07 10:16:48 发布
阅读量266 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hhytyq/article/details/104691083
版权

一:常用特性

1.表单操作

Input 单行文本
textarea 多行文本
select 下拉多选
radio 单选框
checkbox 多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        form div {
            height: 40px;
            line-height: 40px;
        }
        form div:nth-child(4) {
            height: auto;
        }
        form div span:first-child {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <form action="http://itcast.cn">
        <div>
            <span>姓名：</span>
            <span>
          <input type="text" v-model='uname'>
        </span>
        </div>
        <div>
            <span>性别：</span>
            <span>
          <input type="radio" id="male" value="1" v-model='gender'>
          <label for="male">男</label>
          <input type="radio" id="female" value="2" v-model='gender'>
          <label for="female">女</label>
        </span>
        </div>
        <div>
            <span>爱好：</span>
            <input type="checkbox" id="ball" value="1" v-model='hobby'>
            <label for="ball">篮球</label>
            <input type="checkbox" id="sing" value="2" v-model='hobby'>
            <label for="sing">唱歌</label>
            <input type="checkbox" id="code" value="3" v-model='hobby'>
            <label for="code">写代码</label>
        </div>
        <div>
            <span>职业：</span>
            <select v-model='occupation' multiple>
                <option value="0">请选择职业...</option>
                <option value="1">教师</option>
                <option value="2">软件工程师</option>
                <option value="3">律师</option>
            </select>
        </div>
        <div>
            <span>个人简介：</span>
            <textarea v-model='desc'></textarea>
        </div>
        <div>
            <input type="submit" value="提交" @click.prevent='handle'>
        </div>
    </form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    /*
      表单基本操作
    */
    var vm = new Vue({
        el: '#app',
        data: {
            uname: 'lisi',
            gender: 2,
            hobby: ['2','3'],
            // occupation: 3
            occupation: ['2','3'],
            desc: 'nihao'
        },
        methods: {
            handle: function(){
                // console.log(this.uname)
                // console.log(this.gender)
                // console.log(this.hobby.toString())
                // console.log(this.occupation)
                console.log(this.desc)

            }
        }
    });
</script>
</body>
</html>

表单域修饰符

number:转化为数值
<input v-model.number="age" type="number">
trim:去掉开始和结尾的空格
lazy:将input事件切换为change事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model.number='age'>
    <input type="text" v-model.trim='info'>
    <input type="text" v-model.lazy='msg'>
    <div>{{msg}}</div>
    <button @click='handle'>点击</button>
</div>
<script type="text/javascript">
    /*
    表单域修饰符
    */
    var vm =new Vue({
       el:'#app',
       data:{
           age:'',
           info:'',
           msg:''
       },
       methods:{
           handle:function () {
               console.log(this.age+13);
               console.log(this.info.length);
           }
       }
    });
</script>
</body>
</html>

1:自定义指令：

自定义指令的语法规则(获取元素焦点)
Vue.directive('focus'{
	inserted:function(el){
		//获取元素的焦点
		el.focus();
	}
})

自定义指令用法:

<input type="type" v-focus>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-focus>
    <input type="text" v-focus>
</div>
<script type="text/javascript">
    /*
    自定义指令
    */
    Vue.directive('focus',{
        inserted:function (el) {
            //el表示指令所绑定的元素
            el.focus();
        }
    });
    var vm =new Vue({
        el:'#app',
        data:{

        },
        methods:{
            handle:function () {

            }
        }
    })
</script>
</body>
</html>

2:自定义指令
1):带参数的自定义指令(改变元素背景色)

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

指令用法:

<input type="text" v-color='{color:"orange")'>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-color="msg">
</div>
<script type="text/javascript">
    /*
        自定义指令--带参数
    */
    Vue.directive('color',{
        bind:function (el,bining) {
            console.log(bining.value.color)
            //根据指令的参数设置背景色
            el.style.backgroundColor=bining.value.color;
        }
    });
    var vm =new Vue({
        el:'#app',
        data:{
            msg:{
                color:'blue'
            }
        },
        methods:{
            handle:function () {

            }
        }
    });
</script>
</body>
</html>

3:局部指令

directives:(
focus:{
//指令的定义
	inserted:function(el){
		el.focus();
	}
}
)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-color="msg">
    <input type="text" v-focus>
</div>
<!--
    自定义指令---局部指令，只能在本组件中使用。
-->
<script type="text/javascript">
    var vm =new Vue({
        el:'#app',
        data:{
            msg:{
                color:'red'
            }
        },
        methods:{
            handle:function () {

            }
        },
        directives:{
            color:{
                bind:function (el,binding) {
                    el.style.backgroundColor =binding.value.color;
                }
            },
            focus:{
                inserted:function (el) {
                    el.focus();
                }
            }
        }
    });
</script>
</body>
</html>

4:计算属性
1):为何需要计算属性？
表达式的计算逻可能会比较复杂，使用计算属性可以使用模板内容更加简洁。
2):计算属性的用法:

computed:{
	reversedMessage:function(){
		return this.msg.split('').reverse().join('')
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <div>{{msg.split('')}}</div>
    <div>{{msg.split('').reverse().join('')}}</div>
    <div>{{reverseStrring}}</div>
</div>
<script type="text/javascript">
    /*
        计算属性
        join（) 方法用于把数组中的所有元素放入一个字符串。
    */
    var vm =new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        computed:{
            reverseStrring:function () {
                return this.msg.split('').reverse().join('');
            }
        }
    });
</script>
</body>
</html>

计算属性与方法的区别
1):计算属性是基于它们的依赖进行缓存的。
2):方法不存在缓存的。

二:侦听器

在这里插入图片描述
1):应用场景：
数据变化时执行异步或开销较大的操作。
2):侦听器的用法:

watch:{
	firstName:function(val){
		//val表示变化之后的值。
		this.fullName=val+this.lastName;
	},
	lastName:function(val){
		this.fullName=this.firstName+val;
	}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <span>名:</span>
        <sapn>
            <input type="text" v-model='firstName'>
        </sapn>
    </div>
    <div>
        <span>姓::</span>
        <sapn>
            <input type="text" v-model='lastName'>
        </sapn>
    </div>
    <div>{{fullName}}</div>
</div>
<script type="text/javascript">
    var vm=new Vue({
       el:'#app',
       data:{
           firstName:'Jim',
           lastName:'Green',
           fullName:'Jim Green'
       },
        watch:{
           firstName:function(val){
               this.fullName=val+''+this.lastName;
               //属性名称与方法名称一致。
           },
            lastName:function (val) {
                this.fullName=this.firstName+''+val;
            }
        }
    });
</script>
</body>
</html>

案例：验证用户名是否可用
需求:输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示重新输入，如果不存在，提示可以使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <span>用户名</span>
        <span>
            <input  type="text" v-model.lazy='uname'>
        </span>
        <span>{{tip}}</span>
    </div>
</div>
<script type="text/javascript">
    /*
    侦听器：
    1:采用侦听器监听用户名的变化。
    2:调用后台接口进行验证。
    3:根据验证的结果调整提示信息。
    */
    var vm =new Vue({
       el:'#app',
       data:{
           uname:'',
           tip:''
       },
        methods:{
           checkName:function (uname) {
               var that=this;
               setTimeout(function () {
                   //模拟接口调用
                   if(uname=='admin'){
                       that.tip='错误'
                   }else{
                       that.tip='错误';
                   }
               },2000);
           }
        },
        watch:{
           uname:function (val) {
               //调用后台接口验证。
               this.checkName(val);
               //修改提示信息。
               this.tip='正在验证';
           }
        }
    });
</script>
</body>
</html>

,三:过滤器

1.过滤器的作用是什么?
格式化数据,比如将字符串格式化为首字母大写，将日期格式化为指定的格式等。
在这里插入图片描述
自定义过滤器

Vue.filter('过滤器名称',function(value){
	//过滤业务逻辑
});

过滤器的使用

<div> {{msg |upper}}</div>
<div> {{msg |lower}}</div>
<div v-bind:id="id |formatId"></div>

局部过滤器

filters:{
 		capitalize:function(){}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model='msg'>
    <div>{{msg | upper}}</div>
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg'>测试</div>
</div>
<script type="text/javascript">
    /*
    过滤器
    */
  /*  Vue.filter('upper',function (val) {
       return val.charAt(0).toUpperCase()+ val.slice(1);
    });*/
    Vue.filter('lower',function (val) {
        return val.charAt(0).toLowerCase()+ val.slice(1);
    });
    var vm =new Vue({
        el:'#app',
        data:{
            msg:''
        },
        filters:{
            upper:function (val) {
                return val.charAt(0).toUpperCase()+ val.slice(1);
            }
        }
    });
</script>
</body>
</html>

2:带参数的过滤器

Vue.filter('format',function(value,arg1){
	//value就是过滤器传递过来的参数
});

过滤器的使用

<div>{{date |format('yyyy-MM-DD'}}</div>

案例:使用过滤器格式化日期


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      过滤器案例：格式化日期
      
    */
    // Vue.filter('format', function(value, arg) {
    //   if(arg == 'yyyy-MM-dd') {
    //     var ret = '';
    //     ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
    //     return ret;
    //   }
    //   return value;
    // })
    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()
      }
    });
  </script>
</body>
</html>

四：Vue生命周期

1.主要阶段

挂载(初始化相关属性）
1):beforeCreate
2):created
3):beforeMount
4):mounted
更新(元素或组件的变更操作)
1）:beforeUpdate
2）:updated
销毁(销毁相关属性)
1):beforeDestory
2):destoryed

五:综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <span>
            <input type="text" v-model='fname'>
            <button @click='add'>添加</button>
            <button @click='del'>删除</button>
            <button @click='change'>替换</button>
        </span>
    </div>
    <ul>
        <li :key='index' v-for='(item,index) in list'>{{item}}</li>
    </ul>
</div>
<script type="text/javascript">
    /*
        Vue数组操作
    */
    var vm =new Vue({
        el:'#app',
        data:{
            fname:'',
            list:['apple','orange','banana']
        },
        methods:{
            add:function () {
                this.list.push(this.fname);
            },
            del:function () {
                this.list.pop();            },
            change:function () {
                this.list=this.list.slice(0,2);
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述
修改响应式数据

Vue.set(vm.items,indexOfItem,newValue)
vm.$set(vm.items,indexOfItem,newValu)
1)参数一表示要处理的数组名称
2)参数二表示要处理的数组的索引
3)参数三表示要处理的数组的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for='item in list'>{{item}}</li>
    </ul>
    <div>{{info.gender}}</div>
</div>
<script type="text/javascript">
    /*
        动态处理响应式数据
    */
    var vm =new Vue({
       el:'#app',
       data:{
           list:['apple','orange','banana'],
           info:{
               name:'lisi',
               age:12
           }
       }
    });
    //Vue.set(vm.list,2,'lemon');
    vm.$set(vm.list,1,'lemon'),
    vm.$set(vm.info,'gender','female');
</script>
</body>
</html>

在这里插入图片描述
图书列表:

1):实现静态列表效果
2):基于数据实现模拟效果
3):处理每行的操作按钮。

添加图书

1):实现表单的静态效果
2):添加图书表单域数据绑定
3):添加按钮事件绑定
4):实现添加业务逻辑

修改图书

1):修改信息填充到表单
2):修改后重新提交表单
3):
重新添加和修改的方法

删除图书

删除按钮绑定事件处理方法
实现删除业务逻辑


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</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: 10px;
      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">
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id">
              编号：
            </label>
            <input type="text" id="id" v-model='id' :disabled="flag" v-focus>
            <label for="name">
              名称：
            </label>
            <input type="text" id="name" v-model='name'>
            <button @click='handle' :disabled="submitFlag">提交</button>
          </div>
        </div>
      </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 :key='item.id' v-for='item in books'>
            <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 type="text/javascript" src="js/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+)\)\/)/);
                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: function(){
            if(this.flag){
              //编辑操作
                //就是根据当前的ID去更新数组中对应的数据。
                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 = '';
                this.books.push(book);
                // 清空表单
                this.id = '';
                this.name = '';
            }
            // 清空表单
            this.id = '';
            this.name = '';
        },
          toEdit:function (id) {
            //禁止修改ID
              this.flag=true;
              //根据ID查询出要编辑的数据。
              var book=this.books.filter(function (item) {
                  return item.id==id;
              });
              console.log(book)
              //把获取到信息填充到表单
              this.id=book[0].id;
              this.name=book[0].name;
          },
          deleteBook:function (id) {
         /*     //删除图书
              //根据id从数组中查找元素的索引
             var index= this.books.findIndex(function (item) {
                 return item.id==id;
              });
             //根据索引删除数组元素
              this.books.splice(index,1);*/
         //方法二：通过filter方法进行删除
              this.books=this.books.filter(function (item) {
                  return item.id!=id;
              });
          }
      },
      computed:{
          total:function () {
              //计算图书总数。
              return this.books.length;
          }
      },
        watch: {
            name: function(val) {
                // 验证图书名称是否已经存在
                var flag = this.books.some(function(item){
                    return item.name == val;
                });
                if(flag) {
                    // 图书名称存在
                    this.submitFlag = true;
                }else{
                    // 图书名称不存在
                    this.submitFlag = false;
                }
            }
        },
        mounted:function () {
            //该生命周期钩子函数被触发的时候，模板已经可以使用。
            //一般此时用来获取后台数据，然后填充数据到模板。
            var data = [{
                id: 1,
                name: '三国演义',
                date: 2525609975000
            },{
                id: 2,
                name: '水浒传',
                date: 2525609975000
            },{
                id: 3,
                name: '红楼梦',
                date: 2525609975000
            },{
                id: 4,
                name: '西游记',
                date: 2525609975000
            }];
            this.books = data;
        }
    });
  </script>
</body>
</html>

在这里插入图片描述

是翼不是一
关注
专栏目录
Vue基础篇二：Vue组件的核心概念
我的博客
10-03 1982
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 文章目录系列文章目录一、Vue组件的组成--属性二、Vue组件的组成--事件二、Vue组件的组成--插槽总结 一、Vue组件的组成–属性 属性可分为： 自定义属性 props export default { <!-- 属性todo,list,isVisible --> props: { todo: Object, list: { type: Array,
vue_qunaer：Vue2.5
02-20
Vue2.5在此基础上进行了优化，使得数据更新更加高效。 2. **组件化**：Vue2.5强化了组件的概念，组件可以被视为独立的可重用代码块，它们有自己的视图和数据逻辑。在“vue_qunaer”项目中，我们可以看到多个自定义...
【vue】Vue中的map()用法
qq_44727978的博客
04-18 5万+
前台数据处理。超详细的小白教程map()
Vue中—foreach/map/filter
好的文章我尽力写，大家的学习我尽力帮
03-05 2108
1.foreach—用来循环遍历数组,(会改变原数组，可以对每一个数据进行同一个操作 没有返回值）不能循环数组包含对象。 <script> export default { data() { return { Array: [1, 2, 3, 4, 5, 6], }; }, mounted() { let arr = []; this.Array.forEach((item, index, Array) => { //
Vue使用v-for遍历map
m0_54866636的博客
03-24 4400
功能： 遍历数据库中按钮的图片和名字，当页面打开时，触发查询事件，以下图形式显示出来。 前端代码： 遍历存在数据库中的按钮名称和图片名称。（其中按钮的click事件名称和按钮图片名称相同。） <template> <div class="more"> <!-- 其他 --> <van-button type="default" v-for="(value, key) in mor" :key="key" :icon="require(`../.
vue遍历Map，Map在vue中的使用方法
热门推荐
weixin_38897313的博客
11-27 6万+
Map在vue中的使用方法： html：遍历的时候要遍历两遍 <template> <div class="course"> <div class=""> <div class="pt0 ctRow"> <ul class="ctNavbar"> ...
前端Vue开发笔记
qq_43565368的博客
08-12 666
v-on:click=“xxx” 同 @click=“xxx” <style scoped> 局部样式 显示隐藏 v-show=“true/false” 数据处理 this.form.mktManagerList = this.form.mktManagerList.map(m=>m.name).join(’,’) data.data.map((m) => {retur...
vue2-empty:vue2基础开发框架
03-27
Vue 2.x 是其第二代版本，相较于初代，它提供了更多优化和改进。"vue2-empty" 是一个基于 Vue 2 的基础开发框架，旨在为开发者提供一个快速启动新项目的基础结构。在这个框架中，我们可以看到一些关键组成部分和最佳...
vue-admin-beautiful-template:vue-admin-beautiful-template基础版
03-21
不论您加或不加，您都可以享受到开源的代码，感谢您的支持和信任，群内部提供vue-admin-beautifu基础版本，开发工具自动配置教程和项目开发文档。 :seedling: vue3.x vue3.0-antdv分支（ant-design-vue） # 克隆...
monitor:vue + echarts 可视化拖拽图表项目
04-12
基础图表选择： 折线图 柱状图 饼图 配置项： 标题组件 图例组件 背景 支持背景添加 主题 支持主题添加 自定义背景上传 重置背景 导入 支持 e-charts 的 option 导入生成文件 待添加功能 保存文件背景 :check_mark_...
vue中map()使用
qq_41438838的博客
09-07 3097
vue中map()使用
vue Map的用法以及map更新后不重新渲染页面问题
buchishutiao的博客
03-30 2万+
map的用法以及map更新后不重新渲染页面的问题
Vue里使用Map键值对传参
qq_41497443的博客
11-09 1万+
Vue里使用Map键值对传参 问题描述：在参数传递时时候Map键值对key:value的形式进行传参。 1、date数据区定义声明map变量和中间数据变量temp： data(){ return{ //其他代码 map:'', temp:[] } }, 2、methods方法区接口传值：声明map为Map变量，接收接口传过来的key数据生成表单项数据项: this.map=new Map()
element-ui控制表头显示宽度,搭配el-tooltip鼠标移入提示全部表头
zjg
08-21 1454
111
vue map遍历_Vue 笔记整理09
weixin_39805180的博客
12-12 814
(九)综合练习? 图书馆购物车案例? 综合前面的知识，需要通过一个小demo来串联起知识。? 点击“+”按钮，总价增加，点击“-”按钮总价减少，点击移除，移除当列。? HTML代码：html><htmllang="en"><head><title>图书购物车小案例title><linkrel="stylesheet"...
vue map的用法
qq_35363709的博客
09-27 6万+
接口返回数据为： ['2018-8-14','2018-8-14'] 但我需要这样的数据格式： {data：“2018/08/13”,title:""}, {data：“2018/08/13”,title:""} 这样就能搞定是不是so easy let arr=res.data; let newArr=arr.map(val=>{ let json={}; json.da...
三十八、Vue中使用 v-for 遍历 对象（类似于Java的Map）
panchang199266的博客
05-15 4001
对象数据如下： "cities": { "A": [{ "id": 56, "spell": "aba", "name": "阿坝" }, { "id": 57, "spell": "akesu", "name": "阿克苏" }], "B": [{ "id": 58, "spell": "baiyin", ...
Map遍历k,v
Coding
06-14 1211
发现还Map接口中还有一个Entry的接口，对应的还有一个 Set entrySet();方法。也就是说其实Map中的每条key-value数据对应着一个Entry，这样的话遍历Map其实就是要取出每个Entry，也就有了第二种遍历方法 Set entries = testData.entrySet(); for (Entry entry : entries) { Syste...
nodejs .map(v =＞ {})中{}问题
weixin_43934494的博客
06-24 1354
nodejs .map(v => {})中{}问题 在项目中对list使用 // 对链表中每一项进行操作 const list = [xx, xx, xx] list // 加上括号会失败，无法执行，也不报错 .map(v => {console.log(v)}) // 只能换成(去掉{}) .map(v => console.log(v)) 暂时没有找到相关解释 ...
新手指南：Vue-cli搭建Vue项目详解
第二步，作者介绍了使用vue-cli创建项目的方法。用户可以选择npm或cnpm进行安装。对于npm，用户可以直接运行`npm install -g vue-cli`；而对于cnpm，需要先注册并安装，通过`npm install -g cnpm --registry=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值