属性绑定值和方法

Posted 2020-11-10 谁说程序猿很猥琐

  <div style="top:100px" id="app02">
        {{ Name }} <br />
        {{ Age }} <br />
        {{ MethodInfo() }}   <!-- 这里定义一个方法-->
    </div>

调用：
  StudyVue02(("#app02"));


实现：
//   Vue 构造器 02
function StudyVue02(obj) {
    // 定义一个对象 ，这里封装成了一个对象，只需要给对象赋值。面向对象的思想    
    var vm = new Vue({
        el: obj,
        data: {
            Name: ‘zhenghaonan‘,
            Age: ‘10‘,
            alexa: ‘学的不仅是技术，更是梦想‘
        },
        methods: {
            MethodInfo: function () {    // 这里对应前台定义的MethodInfo 方法
                return this.alexa;
            }
        }
    });
    // 这个改变属性的值，其实改变的是vm对象的引用，对象相应属相的值也将随之改变
    vm.Age = 222;
    //alert(vm.Age);
}