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选项看节点属性。

实验心得

多注意防晒阿。

相关推荐
musk12126 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘35 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref