1、Vue会代理data对象里面所有的属性！！

这句话的意思就是，只有在data对象里面明确的写着的属性，Vue才会真的监听到属性的变化，当我们变化这个属性的值的时候，才会引发界面的渲染，否则，Vue无法监听到这种渲染，就不会引发界面渲染。
示例demo：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{{message}}</span>
    <span>{{message2}}</span>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello"
        }
    });
    vm.message = 'world';
    vm.message2 = 'world';
</script>
</body>
</html>

运行结果就是界面上只展示一个world。因为我们的data中只有message，而没有message2.

2、Vue的实例属性

什么是实例属性？顾名思义，实例属性就是实例化了的属性，相当于一个构造函数中this.name = name;this.age = age; 的意思。

实例的概念是针对JavaScript中的原型的概念来区别的。原型就是我没必要实例化这个对象，本身就存在的原型的方法或者原型的属性。

如果你学过java，实例的意思类似于java中的成员变量，而原型相当于java中的静态变量。

在Vue中，为了区分，把所有的实例属性或者方法，前面都加上了”$”符号。

var vm = new Vue({
    el:"#app",
    data:{
        message:"hello"
    }
});
console.log(vm.$el);//获取了id为app的节点。
console.log(vm.$data);//获取了属性为message的对象。

3、Vue的实例方法

// $watch 是一个实例方法
vm.$watch('message', function (newVal, oldVal) {
  // 这个回调将在 `vm.message`  改变后调用
})
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue