简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > vue.js的初学习
Blogger Information
Blog 40
fans 1
comment 0
visits 32438
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue.js的初学习
李明伟的博客
Original
1032 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>观察者/侦听器/监听器</title>
</head>
<body>
<!--在当前页面中创建一个挂载点-->
<div id="box">
    用户名：<input type="text" v-model="username">
    <h3>{{length}}</h3>
    <!--v-show指令，true显示，false显示-->
    <h3 v-show="isShow" :style="warning">{{messages}}</h3>
</div>
<script src="js/Vue.js"></script>
<script>
    //控制台中查看Vue实例,看到则表示Vue引入并实例化成功
    // console.log(new Vue());
    //创建Vue的示例
    new Vue({
        //绑定一个挂载点
        el: '#box',
        data: {
            username: '',
            length: 0,
            messages: '用户名太短了',
            isShow: false,
            warning: 'color:red'
        },
        //watch侦听器属性，监听是页面中的变量值的变化
        watch: {
            username: function () {
                this.length++;
                if (this.length < 6) {
                    this.isShow = true;
                }else{
                    this.isShow = false;
                }
            }
        }
    })
    ;
    //在当前页面中创建一个挂载点
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

创建挂载点

<!--在当前页面中创建一个挂载点-->
<div id="box"></div>

绑定挂载点

new Vue({
    //绑定一个挂载点
   el: '#box'
})
;

构造数据模型

data: {
    username: '',
    length: 0,
    messages: '用户名太短了',
    isShow: false,
    warning: 'color:red'
},

制作监听器

watch: {
    username: function () {
        this.length++;
        if (this.length < 6) {
            this.isShow = true;
        }else{
            this.isShow = false;
        }
    }
}

vue指令大全——https://www.jianshu.com/p/c4a87e1b4ef7

监听器的进阶（转自他人）

watch方法

值是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值

值是函数名：不过这个函数名要用单引号来包裹

值是包括选项的对象：选项有三个

第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。

第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）

第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

var vm = new Vue({ 

  data: { 

    a: 1, 

    b: 2 

  }, 

  watch: { 

    a: function (newVal, oldVal) { 

      console.log('new: %s, old: %s', newVal, oldVal) 

    }, 

    // 方法名 

    b: 'someMethod', 

    // 选项的对象 

    c: { 

      handler: function (newVal, oldVal) { /* ... */ }, 

      deep: true， 

      immediate: true 

    } 

  } 

})

--------------------- 

作者：肖ZE 

来源：CSDN 

原文：https://blog.csdn.net/lucky541788/article/details/83143482 

版权声明：本文为博主原创文章，转载请附上博文链接！


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！