GDPU Vue前端框架开发计数器

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

重要的更新公告

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

计数器案例

1.实现计数器程序

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

  <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实例的分离

<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层，分离出的objconst obj={message:'你好，Vuejs！'}//viewmodel层，即vue实例，没有挂载到dom的对象const app=createApp({data(){return obj;}}).mount('#app')</script>
</body>

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

观察Vue的生命周期

<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常用的数组及对象的初始化还记得不，简单复习一下吧。

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

//对象初始化
//使用字面量
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选项看节点属性。