【Vue】Vue简介、引入、命令式和声明式编程

发布时间：2023-04-25 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

💭💭

✨： 开始陆陆续续更新vue啦
 
💟：东非不开森的主页
 
💜：如果有幸和你一起学习一起进步，那就太棒啦，一起学习吧。💜💜
 

初识vue

      • 一、初识Vue
        • 1.1.vue简介
        • 1.2.Vue引入方式
        • 1.3.计数器案例原生js和vue开发不同
        • 1.4.声明式编程和命令式编程

一、初识Vue

1.1.vue简介

Vue 是一套用于构建用户界面的渐进式 JavaScript框架。

 
注：渐进式框架是表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；

Vue3命名为One Piece（海贼王）
 
【Vue】Vue简介、引入、命令式和声明式编程

1.2.Vue引入方式

  1. 在页面中通过CDN的方式来引入；
     
<script src="https://unpkg.com/vue@next"></script>
  1. 下载Vue的JavaScript文件，并且自己手动引入；
<script src="../vue.js"></script>

注意路径问题，根据自己的情况而定

1.3.计数器案例原生js和vue开发不同

💡💡

<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;
    };

步骤：

我们因此可以发现，在原生实现的过程中，我们每完成一个操作，都需要通过JavaScript编写一个代码，来给浏览器一个指令。一步一步的步骤操作，一步一步的执行。
 

<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.声明式编程和命令式编程

💡💡
从刚刚计数器的案例我们可以发现二者的不同点

标签 , ,