Vue MVVM模型与data及methods属性超详细讲解

<div id="root">
      <h1>school:{{name}}</h1>
      <h1>address:{{address}}</h1>
      <h1>test:{{1+1}}</h1>
 </div>
<script type="text/javascript">
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
      el: "#root",
      data: {
        name: "xiaozhao",
        address: "henan",
        a: 1,
      },
    });
console.log(vm);

      data: {
        name: "zj",
      },

      data() {
        console.log("@@@", this); //此处的this是vue实例对象
        return {
          name: "zj",
        };
      },

<div id="app">
      <h2>{{message}}</h2>
      <button @click="changeMessage">改变message</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return { message: "Hello Data" };
        },
        //函数式
        methods: {
          changeMessage: function () {
            this.message = "hello hhh";
          },
        },
      });
      app.mount("#app");

<script src="./lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            counter: 0,
          };
        },
        //methods:option api
        methods: {
          increment: function () {
            this.counter++;
          },
          increment() {},
          // methods中的函数不能写成箭头函数
          increment: () => {
            console.log(this);
          },
        },
      });
app.mount("#app");