本地网站地图生成器,流量网站制作,哈尔滨网站设计培训班,公司注册网上核名多久计数器算不到你双向绑定的进度。 重要的更新公告 #xff01;#xff01;#xff01;GDPU的小伙伴#xff0c;感谢大家的支持#xff0c;希望到此一游的帅哥美女能有所帮助。本学期的前端框架及移动应用#xff0c;采用专栏订阅量达到50才开始周更了哦( •̀ .̫ •́ )✧…计数器算不到你双向绑定的进度。 重要的更新公告 GDPU的小伙伴感谢大家的支持希望到此一游的帅哥美女能有所帮助。本学期的前端框架及移动应用采用专栏订阅量达到50才开始周更了哦( •̀ .̫ •́ )✧ 计数器案例 1.实现计数器程序
前端新手必看在vscode编译器中新建一个html文件按一个叹号然后按回车会出现一个模板。这里学的是vue的基础修改body标签里的内容即可。 bodyscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptdiv idapph2当前计数{{counter}}/h2button clickadd/buttonbutton clicksub-/button/divscriptApp {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实例的分离
bodyscript srchttps://unpkg.com/vue3/dist/vue.global.js/script//view层即dom层div idapp{{message}}/divscriptconst {createApp}Vue;//model层分离出的objconst obj{message:你好Vuejs}//viewmodel层即vue实例没有挂载到dom的对象const appcreateApp({data(){return obj;}}).mount(#app)/script
/body
这段代码使用了 MVVM 模式实现了 Vue 中的数据绑定。代码中的{{}}是插值语法用于在视图层展示数据。在script标签内定义了 Vue 实例处理数据对象、属性和方法利用这些属性和函数实现数据绑定和动态视图更新。 观察Vue的生命周期
bodyscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptdiv idapp{{message}}/divscriptconst { createApp } Vue; //const createApp Vue.createApp;// import { createApp } from vueconst 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在计数器案例中哪个体现了ModelView以及ViewModel
View层 视图层 在前端开发中通常就是DOM层主要的作用是给用户展示各种信息。
Model层 数据层 数据可能是我们固定的数据更多的是来自我们服务器从网络上请求下来的数据。 在计数器的案例中就是后面抽取出来的obj。
VueModel层vue实例 视图模型层 视图模型层是View和Model沟通的桥梁。 一方面它实现了Data Binding即数据绑定将Model的改变实时的反应到View中 另一方面它实现了DOM Listener即DOM监听当DOM触发一些事件(点击、滚动、touch等)时可以监听到并在需要的情况下改变对应的Data。
在计数器案例中ViewDOM层Model抽离出来的objViewMode创建的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选项看节点属性。 实验心得 多注意防晒阿。
