GDPU Vue前端框架开发计数器

计数器算不到你双向绑定的进度。

重要的更新公告

！！！GDPU的小伙伴，感谢大家的支持，希望到此一游的帅哥美女能有所帮助。本学期的前端框架及移动应用，采用专栏订阅量达到50才开始周更了哦( •̀ .̫ •́ )✧

计数器案例

1.实现计数器程序

前端新手必看，在vscode编译器中，新建一个html文件，按一个叹号，然后按回车，会出现一个模板。这里学的是vue的基础，修改body标签里的内容即可。

javascript 复制代码

  <body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
      <h2>当前计数：{{counter}}</h2>
      <button @click="add">+</button>
      <button @click="sub">-</button>
    </div>
    <script>
      App = {
        data() {
          return {
            counter: 0,
          };
        },
        methods: {
          add: function () {
            console.log("add被执行！");
            this.counter++;
          },
          sub: function () {
            console.log("sub被执行！");
            this.counter--;
          },
        },
      };
      const vm = Vue.createApp(App).mount("#app");
    </script>
  </body>

然后点执行，选浏览器。

或许你会看到这样的警告。

这是编辑器找不到你的浏览器，那咋办，可以安装一个插件，如

Open Browser Preview，然后点Ctrl F1即可。

修改计数器案例，实现Data与Vue实例的分离

javascript 复制代码

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    //view层，即dom层
    <div id="app">
      {{message}}
    </div>
    <script>
        const {createApp}=Vue;
      //model层，分离出的obj
        const obj={
            message:'你好，Vuejs！'
        }
      //viewmodel层，即vue实例，没有挂载到dom的对象
        const app=createApp({
            data(){
                return obj;
            }
        }).mount('#app')
    </script>
</body>

这段代码使用了 MVVM 模式，实现了 Vue 中的数据绑定。代码中的{{}}是插值语法，用于在视图层展示数据。在script标签内，定义了 Vue 实例，处理数据对象、属性和方法，利用这些属性和函数实现数据绑定和动态视图更新。

观察Vue的生命周期

javascript 复制代码

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">{{message}}</div>

    <script>
      const { createApp } = Vue; //const createApp = Vue.createApp;
      //   import { createApp } from 'vue'

      const App = {
        data() {
          return {
            message: "你好啊，小可爱！",
          };
        },
        beforeCreate() {
          console.log("before Create");
        },
        created() {
          console.log("created");
        },
        beforeMount() {
          console.log("before Mount");
        },
        mounted() {
          console.log("mounted");
          setTimeout(() => {
            app.unmount();
          }, 5000);
        },
        beforeUpdate() {
          console.log("before Update");
        },
        updated() {
          console.log("updated");
        },
        beforeUnmount() {
          console.log("before Unmount");
        },
        unmounted() {
          console.log("unmounted");
        },
      };
      //记得要分开写，这个app是vue实例
      const app = createApp(App);
      app.mount("#app");//挂载到dom
    </script>
  </body>

2.思考题：MVVM，在计数器案例中，哪个体现了Model？View？以及ViewModel？

View层：

视图层

在前端开发中，通常就是DOM层，主要的作用是给用户展示各种信息。

Model层：

数据层

数据可能是我们固定的数据，更多的是来自我们服务器，从网络上请求下来的数据。

在计数器的案例中，就是后面抽取出来的obj。

VueModel层：vue实例

视图模型层

视图模型层是View和Model沟通的桥梁。

一方面，它实现了Data Binding，即数据绑定，将Model的改变实时的反应到View中；

另一方面它实现了DOM Listener，即DOM监听，当DOM触发一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

在计数器案例中，View：DOM层，Model：抽离出来的obj，ViewMode：创建的Vue对象实例。

vue入门教程

作为一个vue前端框架的初学者，想学好vue，把前端三大件基础打好是不可少的，尤其是js。js常用的数组及对象的初始化还记得不，简单复习一下吧。

javascript 复制代码

//数组初始化
//使用字面量
let array = [1, 2, 3];
//使用Array构造函数：
let array = new Array(3); // 创建一个长度为3的空数组
let array2 = new Array(1, 2, 3); // 创建一个包含1, 2, 3的数组

javascript 复制代码

//对象初始化
//使用字面量
let obj = { key1: 'value1', key2: 'value2' };
//使用Object构造函数
let obj = new Object();
obj.key1 = 'value1';
obj.key2 = 'value2';

还有属性、回调函数、dom等基础，要注重复习------重vue之我学js，这一次，要夺回属于你的框架。此外，还要学习es6基本语法，数据绑定等，可以先下nodejs，学一下npm构建。学完基础语法后面就是主要学的部分如构建工具vue cli或vite、UI界面、前端路由、与服务端通信、状态管理等等，学完便可以做项目部署了。

在学的过程中，编辑器的一些插件也可以方便敲代码。浏览器的插件也可以帮助更好了解vue的一些数据属性，点击扩展，在应用商店下Vue.js devtools等，进入vue的界面，可以在F12后点击vue选项看节点属性。

实验心得

多注意防晒阿。

GDPU Vue前端框架开发 计数器

GDPU Vue前端框架开发计数器