Vue变量

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>变量</title>

</head>

<body>

    <div id="app">

        <p>{{ msg }}</p>

        <p>{{ info }}</p>

        <h3>{{ msg }}</h3>

    </div>

    <div id="main">

        <p>{{ msg }}</p>

        <p>{{ info }}</p>

    </div>

</body>

<script src="js/vue.js"></script>

<script>

    // 实例成员中的data是为vue页面模板通过数据变量的

    let app = new Vue({

        el: '#app',

        data: {

            msg: 'message',

            info: 'vue变量信息'

        }

    });

    let main = new Vue({

        el: '#main',

        data: {

            msg: 'msg',

            info: 'info'

        }

    });

    console.log(app.info);

    console.log(main.info);

    // 创建vue实例（new Vue）传进去的字典(对象)的key，称之为vue实例成员(变量)

    // 访问实例成员，用 vue实例.$成员名, eg：app.$el

    console.log(app.$el);

    console.log(app.$data);

    console.log(app.$data.info);

</script>

</html>

分隔符成员

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>分隔符</title>

</head>

<body>

    <div id="app">

        <p>{{ num }}</p>

        <!--<p>{[ num ]}</p>-->

        <p>{ num ]}</p>

    </div>

</body>

<script src="js/vue.js"></script>

<script>

    new Vue({

        el: '#app',

        data: {

            num: 100

        },

        // 用来修改插值表达式符号

        // delimiters: ['{[', ']}'],

        delimiters: ['{', ']}'],

    })

</script>

</html>

计算属性成员

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="app">

        <input type="text" v-model="v1">

        +

        <input type="text" v-model="v2">

        =

        <button>{{ res }}</button>

    </div>

</body>

<script src="js/vue.js"></script>

<script>

    new Vue({

        el: '#app',

        data: {

            v1: '',

            v2: '',

            // res: '结果',

        },

        // 1、computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义(省略data中的)

        // 2、方法属性的值来源于绑定的方法的返回值

        // 3、方法属性必须在页面中渲染后，绑定的方法才会被启用(调用)

        // 4、方法中出现的所有变量都会被监听，任何变量发生值更新都会调用一次绑定的方法，重新更新一下方法属性的值

        // 5、方法属性值不能手动设置，必须通过绑定的方法进行设置

        computed: {

            res () {

                console.log('该方法被调用了');

                return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';

            }

        }

    })

</script>

<script>

    console.log(1 + '2');

    console.log(1 - '2');

    console.log(+'2');

</script>

</html>

属性监听

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>属性的监听</title>

</head>

<body>

    <div id="app">

        <p>

            姓名：<input type="text" v-model="full_name">

        </p>

        <p>

            姓：<span>{{ first_name }}</span>

        </p>

        <p>

            名：<span>{{ last_name }}</span>

        </p>

    </div>

</body>

<script src="js/vue.js"></script>

<script>

    new Vue({

        el: '#app',

        data: {

            full_name: '',

            first_name: '',

            last_name: '',

        },

        watch: {

            // 1、watch中给已有的属性设置监听方法

            // 2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑

            // 3、监听方法不需要返回值(返回值只有主动结束方法的作用)

            full_name() {

                if (this.full_name.length === 2) {

                    k_v_arr = this.full_name.split('');

                    this.first_name = k_v_arr[0];

                    this.last_name = k_v_arr[1];

                }

            }

        }

    })

</script>

</html>

Vue 变量，成员，属性监听的更多相关文章

  1. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

  2. Vue之计算属性Computed和属性监听Watch，Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  3. Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...

  4. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  5. vue watch关于对象内的属性监听

    vue可以通过watch监听data内数据的变化.通常写法是: data: { a: 100 }, watch: { a(newval, oldVal) { // 做点什么... console.lo ...

  6. vue对象属性监听

    对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...

  7. 微信小程序实现watch属性监听数据变化

    Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...

  8. vue2.x版本中Object.defineProperty对象属性监听和关联

    前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...

  9. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

随机推荐

  1. python3：csv的读写

    前言快要毕业那会儿,在下编写了一个招聘网站招聘岗位的爬虫提供给前女神参考,最开始我是存到mysql中,然后在到处一份csv文件给前女神.到了参加工作后,由于经常使用excel绘制图表(谁叫公司做报表全 ...

  2. java把含小数点的数字字符串转换为int类型

    String num ="1.00"; int abc =Double.valueOf(num).intValue();//转换为Int类型

  3. [LeetCode]-DataBase-Nth Highest Salary

    Write a SQL query to get the nth highest salary from the Employee table. +----+--------+ | Id | Sala ...

  4. leetcode-mid-sorting and searching -347. Top K Frequent Elements

    mycode   71.43% class Solution(object): def topKFrequent(self, nums, k): """ :type nu ...

  5. leetcode-mid-Linked list- 200. Number of Islands¶

    mycode  57.92% class Solution(object): def numIslands(self, grid): """ :type grid: Li ...

  6. Linux_ServicesManagement_RHEL7

    目录 目录 Network Manager RHEL7的服务管理systemctl指令 服务的启动停止重载重启 服务的分类 指令选项 Network Manager 注意:network servic ...

  7. Python学习之==>文件操作

    1.打开文件的模式 r,只读模式(默认)[不可写:文件不存在,会报错] w,只写模式[不可读:不存在则创建:存在则删除内容] a,追加模式[不可读:不存在则创建:存在则追加内容] r+,读写模式[可读 ...

  8. c# 跨应用程序域通讯

    public class MyTask { public class MyEventArgs : EventArgs { public object EventData { get; private ...

  9. (四) appium-desktop 脚本录制常用AW使用介绍

    通过使用appium-desktop录制脚本,编写app自动化脚本的过程中,会使用到一些AW,下面就这些AW的使用方法做详细的介绍.通过实践可以看到这几个AW可以完成测试工作. AWOpenGiveP ...

  10. POJ 1330 Nearest Common Ancestors （dfs+ST在线算法）

    详细讲解见:https://blog.csdn.net/liangzhaoyang1/article/details/52549822 zz:https://www.cnblogs.com/kuang ...