Vue简介、引入、命令式与声明式编程详解
作者：东非不开森
原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式:命令式编程和声明式编程,下面这篇文章主要给大家介绍了关于Vue简介、引入、命令式与声明式编程的相关资料,需要的朋友可以参考下
一、初识Vue
1.1.vue简介
Vue 是一套用于构建用户界面的渐进式 JavaScript框架。
- 全称是Vue.js或者Vuejs；
- 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型；
- 帮助你高效地开发用户界面，无论任务是简单还是复杂；
注：渐进式框架是表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；
Vue3命名为One Piece（海贼王）
1.2.Vue引入方式
在页面中通过CDN的方式来引入；
<script src="https://unpkg.com/vue@next"></script>
下载Vue的JavaScript文件，并且自己手动引入； 下载Vue的源码，可以直接打开CDN的链接复制所有代码到一个新的文件夹里vue.js
然后引入
<script src="../vue.js"></script>
注意路径问题，根据自己的情况而定
1.3.计数器案例原生js和vue开发不同
原生js实现计数器功能
<h2>当前计数：<span class="counter"></span></h2>
<button class="add">+1</button>
<button class="sub">-1</button>
<script>
//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;
};
步骤：
- 获取事件
- 注册事件
- 绑定事件
- 添加事件处理程序
Vue实现计数器功能
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<script src="./lib/vue.js"></script>
<script>
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；称为是声明式编程；
总结
到此这篇关于Vue简介、引入、命令式与声明式编程的文章就介绍到这了,更多相关Vue引入 命令式与声明式编程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！