1.Vue入门基础学习笔记-hello world

开始自己的第一个Vue应用

HTML部分

<div id="test">
    {{message1}}
    {{message2}}
    {{message3()}}
</div>

js部分

new Vue({
    el: '#test',
    data: {
      message1:"hello world"
    },
    computed: {
        message2: function () {

            return "computed:"+this.message1;
        }
    },
    methods:{
        message3:function(){
            return  "methods:hello world";
        }
    }
})

• {{属性}} 是“Mustache” 语法（双大括号）
• {{message1}}是数据属性data的占位符
  
  • 可以用vue.message1取到data属性中的message1属性的值
• {{message2}}是计算属性computed占位符
  
  • 可以用vue.message2取到computed属性message2方法的返回值
• {{message3}}调用了vue中的方法
  
  • 不可以用vue.message3取到methods中message3方法的返回值
  • 不可以调用 非vue methods属性中的方法

在这段代码中 {{属性}}表示一个占位符 ，占位符将会被替代为对应数据对象上相应属性的值。无论何时，绑定的数据对象上相应属性发生了改变，插值处的内容都会更新
可以使用方法对其赋值[必须带()]会调用methods里的方法 用其返回值作为数据