计数器算不到你双向绑定的进度。
重要的更新公告
！！！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层，分离出的obj
const 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选项看节点属性。
实验心得
多注意防晒阿。
