✨: 开始陆陆续续更新vue啦 :东非不开森的主页 :如果有幸和你一起学习一起进步,那就太棒啦,一起学习吧。
初识vue
一、初识Vue1.1.vue简介1.2.Vue引入方式1.3.计数器案例原生js和vue开发不同1.4.声明式编程和命令式编程
一、初识Vue
1.1.vue简介
Vue 是一套用于构建用户界面的渐进式 JavaScript框架。
全称是Vue.js或者Vuejs;它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型;帮助你高效地开发用户界面,无论任务是简单还是复杂;
注:渐进式框架是表示我们可以在项目中一点点来引入和使用Vue,而不一定需要全部使用Vue来开发整个项目;
Vue3命名为One Piece(海贼王)
1.2.Vue引入方式
在页面中通过CDN的方式来引入;
下载Vue的JavaScript文件,并且自己手动引入;
下载Vue的源码,可以直接打开CDN的链接复制所有代码到一个新的文件夹里vue.js 然后引入
注意路径问题,根据自己的情况而定
1.3.计数器案例原生js和vue开发不同
原生js实现计数器功能
当前计数:
//1.获取dom
const h2E1 = document.querySelector("h2");
const counterE1 = document.querySelector(".counter");
const addBtnE1 = document.querySelector(".add");
const subBtnE1 = document.querySelector(".sub");
// 2.定义一个变量记录数据
let counter = 100;
counterE1.textContent = counter;
//3.监听按钮的点击
addBtnE1.onclick = function () {
counter++;
counterE1.textContent = counter;
};
subBtnE1.onclick = function () {
counter--;
counterE1.textContent = counter;
};
步骤:
获取事件注册事件绑定事件添加事件处理程序
我们因此可以发现,在原生实现的过程中,我们每完成一个操作,都需要通过JavaScript编写一个代码,来给浏览器一个指令。一步一步的步骤操作,一步一步的执行。
Vue实现计数器功能
当前计数:{{counter}}
const app = Vue.createApp({
// @click 绑定
data: function () {
return {
counter: 0,
};
},
methods: {
increment: function () {
this.counter++;
},
decrement: function () {
this.counter--;
},
},
});
app.mount("#app");
从两个对比来看,我们可以发现Vue是不是更为简洁,而原生JS就是根据命令一步步去执行
1.4.声明式编程和命令式编程
从刚刚计数器的案例我们可以发现二者的不同点
在原生js中: 每完成一个操作,都需要通过JavaScript编写一条代码,来给浏览器一个指令; 每一步的指令都是按顺序执行的,称为命令式编程 在vue的实现过程中: 我们会在createApp传入的对象中声明需要的内容,模板template、数据data、方法methods;称为是声明式编程;
推荐链接
发表评论