Vue常用特性

物联网
• 阅读 863

Vue常用特性

  • 表单操作
  • 自定义指令
  • 计算属性
  • 侦听器
  • 过滤器
  • 生命周期

Vue之表单操作

  • input:单行文本
  • textarea:多行文本
  • select:下拉选项
  • radio:单选框
  • checkbox:多选框
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue之表单操作</title>
</head>

<body>
    <div id="app">
        <form action="http:///www.baidu.com">
            <p>姓名：<input type="text" v-model='username'></p>
            <p>性别：<input type="radio" name='sex' value="1" v-model='sex'>男<input type="radio" name='sex' value="2" v-model='sex'>女</p>
            <p>爱好： <input type="checkbox" name="hobby" value="1" v-model='hobby'>篮球<input type="checkbox" name="hobby" value="1" v-model='hobby'>足球<input type="checkbox" name="hobby" value="1" v-model='hobby'>乒乓球</p>
            <p>
                <span>职业</span>
                <select v-model='professional' multiple='true'>
                    <option value="0">请选择职业</option>
                    <option value="1">WEB前端</option>
                    <option value="2">java后端</option>
                    <option value="3">大数据</option>
                    <option value="4">人工智能</option>
                </select>
            </p>
            <p>
                留言板： <textarea v-model='board'></textarea>
            </p>
            <p><input type="submit" value="提交" v-on:click.prevent="handle"></p>


        </form>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                username: '请输入账号',
                sex: 2,
                hobby: [1, 2, 3],
                professional: [1, 2, 3, 4, ],
                board: 'hello vue'

            }
        },
    })
</script>

</html>

Vue常用特性

Vue之表单域修饰符

  • number:转换为数值
  • trim:去除开始及末尾的空格
  • lazy:将input事件转换为change事件

Vue常用特性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue之表单域修饰符</title>
</head>

<body>
    <div id="app">
        <p><input type="text" v-model.number='number'></p>
        <p><input type="text" v-model.trim='info'></p>
        <div>{{msg}}</div>
        <p><input type="text" v-model.lazy='msg'></p>
        <button v-on:click='handle'>按钮</button>
    </div>
</body>
<script src='../vue.js'></script>
<script>
    let vm = new Vue({
        el: "#app ",
        data() {
            return {
                number: '',
                info: '',
                msg: "hello vue"
            }
        },
        methods: {
            handle: function() {
                console.log(this.number + 20);
                console.log(this.info.length);
                console.log(this.msg);

            }
        },
    })
</script>

</html>

Vue常用特性

自定义指令

为什么需要自定义指令，因为内置指令不满足要求。

Vue之全局自定义指令

Vue常用特性
Vue常用特性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue之自自定义全局指令</title>
</head>

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    Vue.directive('focus', {
        inserted: function(el) {
            el.focus()
        }
    })
    let vm = new Vue({
        el: "#app",
        data() {
            return {

            }
        },
        methods: {

        },
    })
</script>

</html>

Vue常用特性

Vue之全局自定义指令传递参数

钩子函数

Vue常用特性
钩子函数的参数
Vue常用特性


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue之自自定义全局指令</title>
</head>

<body>
    <div id="app">
        <input type="text" v-focus>
        <input type="text" v-color='msg'>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    // vue自定义全局指令之获取元素的焦点
    Vue.directive('focus', {
        inserted: function(el) {
            el.focus()

        }
    })

    // Vue之全局自定义指令之改变输入框的颜色
    Vue.directive('color', {
        inserted: function(el, binding) {
            el.style.backgroundColor = binding.value.color
        }
    })
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: {
                    color: 'red'
                }
            }
        },
        methods: {

        }
    })
</script>

</html>

Vue常用特性

Vue之局部自定义参数

在Vue的实例化对象中，使用directives属性可以自定义一些指令。自定义的指令只能在本组件使用。

Vue常用特性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实例之局部自定义指令</title>
</head>

<body>
    <div id="app">
        <input type="text" v-color='msg'>
        <input type="text" v-focus>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: {
                    color: 'red'
                }
            }
        },
        directives: {
            color: {
                inserted: function(el, binding) {
                    el.style.backgroundColor = binding.value.color
                }
            },
            focus: {
                inserted: function(el) {
                    el.focus()
                }
            }
        }

    })
</script>

</html>

Vue常用特性

Vue之计算属性

使用计算属性可以让Vue的模板看起来更加简洁

Vue常用特性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue之计算属性</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: "hello word"
            }
        },
        computed: {
            reverseString: function() {
                return this.msg.split('').reverse().join('')
            }
        }


    })
</script>

</html>

Vue常用特性

Vue之计算属性与方法的区别

Vue的计算属性与方法的区别

  • 计算方法是基于它们的依赖产生宣存的
  • 方法不存在缓存
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue计算属性与methods的区别</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{reserveString}}</div>
        <div>{{reserveString}}</div>
        <div>{{reverseString()}}</div>
        <div>{{reverseString()}}</div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: 'hello word'
            }
        },
        methods: {
            reverseString: function() {
                console.log('methods');
                return this.msg.split('').reverse().join('')
            }
        },
        computed: {
            reserveString: function() {
                console.log('computed');
                return this.msg.split('').reverse().join('')
            }
        },
    })
</script>

</html>

Vue常用特性

Vue之侦听器方法

Vue常用特性

Vue常用特性


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>姓：<input type="text" v-model='firstName'></p>
        <p>名：<input type="text" v-model="lastName"></p>
        <div>{{fullName}}</div>
    </div>
</body>
<script src='../vue.js'></script>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                firstName: '',
                lastName: "",
                fullName: ''
            }
        },
        watch: {
            // 监听firstName的值的变化
            firstName: function(val) {
                this.fullName = val + '' + lastName
            },
            //监听lastNam的值的变化
            lastName: function(val) {
                this.fullName = this.firstName + '' + val
            }

        }
    })
</script>

</html>

Vue常用特性

Vue之留言板案例

思路
1.采用侦听器监听用户名的变化
2.当用户名发生改变时，调用后台接口
3.根据验证的结果修改提示信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        用户名： <input type="text" v-model.lazy='uname'> <span>{{tip}}</span>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {

            uname: '',
            tip: '',

        },
        methods: {
            //采用定时器的方法来模拟后台借口
            checkName: function(uname) {

                var that = this;
                setTimeout(function() {

                    if (that.uname == 'admin') {
                        that.tip = '该用户名已经存在，请重新输入'
                    } else {
                        that.tip = '该用户名可以使用'
                    }

                }, 2000)

            }
        },
        watch: {
            uname: function(val) {
                //当uname的值发生改变时 开始调用后台接口
                this.checkName(val);
                //修改提示信息
                this.tip = '正在输入中..'
            }
        },

    })
</script>

</html>

Vue常用特性

Vue过滤器

过滤器的作用：格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定格式。

Vue常用特性

全局过滤器及局部过滤器

Vue常用特性
Vue常用特性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue之自定义过滤器</title>
</head>

<body>
    <div id="app">
        <div>{{msg | upper}}</div>
        <div>{{msg | upper | lower}}</div>
        <div v-bind:test="msg | upper">test</div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    // 全局自定义过滤器
    Vue.filter('upper', function(val) {
        return val.charAt(0).toUpperCase() + val.slice(1);
    })


    let vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello word'
        },
        // 局部自定义过滤器
        filters: {
            lower: function(val) {
                return val.charAt(0).toLowerCase() + val.slice(1)
            }
        }

    })
</script>

</html>

Vue常用特性

带参数的自定义过滤器

Vue常用特性
Vue常用特性
Vue常用特性

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <div id="app">
       <div>{{ data | format('yyyy-MM--dd')}}</div>
   </div>
</body>
<script src='../vue.js'></script>
<script>
   Vue.filter('format', function(val, args) {

       if (args == "yyyy-MM--dd") {
           var ret = '';
           ret += val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate();
           return ret;

       }
       return val

   })
   let vm = new Vue({
       el: "#app",
       data() {
           return {
               data: new Date()
           }
       },
   })
</script>

</html>

Vue常用特性

Vue生命周期

Vue常用特性

Vue常用特性


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <button @click='update'>更新</button>
    <button @click='destroy'>销毁</button>
  </div>
  <script type="text/javascript" src="../vue.js"></script>
  <script type="text/javascript">
    /*
      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');
      }
    });
  </script>
</body>
</html>

Vue常用特性

点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
•
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
2055
0
0
Alex799 Alex799
•
4年前
Vue面试题
1、Vue的生命周期？beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed（创建、挂载、更新、卸载）挂载中可以操作DOM，创建中不能操作DOM；常用挂载或者创建生命周期就行了2、methods和computed的区别？
1423
0
0
Easter79 Easter79
•
3年前
vue input复选框checkbox默认样式纯css修改
<divclass"data_list"vfor"(item,index)indata_list":key"index"<inputtype"checkbox"class"check_boxtuicheckbox":id"'id'item.id":value"item.id"vmodel
909
0
0
CuterCorley CuterCorley
•
4年前
uni-app入门教程（4）组件的基本使用
@toc前言本文主要介绍了uniapp中的组件，包括四大类：基础组件（scrollview、swiper、text等）、表单组件（button、checkbox、input等）、导航组件navigator和页面传参、媒体组件（audio、image和video等），详细说明了这些组件的常用属性和方法，并进行使用举例和演示。一、基础组件组件是视
2798
0
0
CuterCorley CuterCorley
•
4年前
uni-app入门教程（8）在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法，具体如下：Vue支持响应式数据操作，可以实现数据和事件的绑定，同时支持this传递；uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期；实现全局变量的3种方式，即公用模块、挂载Vue.prototype和globalData；Class和Style的动态绑定，包括对象
2385
0
0
Wesley13 Wesley13
•
3年前
02、Vue.js
1、插值    在Vue.js指令学习之前，先简单学习一下Vue插值    语法：_{{}}_，将vue实例中的数据写入到页面对应的位置。下面代码中hello、msg、num等均是在vue的data中定义的变量。1.1文本插值<div{{hello}}<div1.2HTML标签插
968
0
0
Stella981 Stella981
•
3年前
Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理
SpringBoot中Thymeleaf对表单处理的一些用法：(1)使用th:field属性：进行表单字段绑定(2)使用ids对象：一般用于lable配合radio或checkbox使用(3)表单提交处理开发环境：IntelliJIDEA2019.2.2SpringBoot版本：2.1.8新建一个名称为demo的Spr
1149
0
0
Wesley13 Wesley13
•
3年前
PIC中档单片机汇编指令详解（5）
位操作指令详述BCF数据寄存器指定位清0语法形式：BCFf，b操作数：f为数据寄存器的低7位地址（0x00~0x7F）B为数据位编号（0~7）执行时间：一个指令周期执行过程：使数据寄存器f的的b位清0状态标志影响：无说明：该指令可对任何数据寄存器的任意一个位置清0，常用于标志位的设定和清除，或者把某一管脚置成低电平。指
1261
0
0
Stella981 Stella981
•
3年前
ASP.NET MVC 4 之 Jquery Ajax
//前台界面，一个下拉框，一根文本框<select id"SEX"    <option男</option    <option女</option    <option未知</option</select<input id "DESC"  type"text"/
989
0
0
Wesley13 Wesley13
•
3年前
(selenium+python)_UI自动化05_定位select下拉列表
前言web网页大多选择功能使用下拉列表方式实现，在selenium进行自动化过程中，可通过Select类实现下拉列表的多种操作。Select常用方法select_by_index()通过索引定位选项select_by_value()通过value值定位选项select_by_visib
705
0
0
物联网
物联网
Lv1
我将被带上怎样的轨道走过怎样的路过完怎样的一生
文章
4
粉丝
0
获赞
0
热门文章
向量数据库Chroma极简教程
完全使用 Docker 开发 PHP 项目 （三）: 命令容器化
windows10 专业版 64 位系统安装 docker 并使用 laradock 搭建 laravel 环境