命令行运行vue项目（【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; };

步骤：

获取事件 注册事件 绑定事件 添加事件处理程序

我们因此可以发现

 
 

 
 

 
 

 
 

 
 

 ，在原生实现的过程中










，我们每完成一个操作                 ，都需要通过JavaScript编写一个代码
 
 
 
 
 
 
 
 
 
 
 ，来给浏览器一个指令











。一步一步的步骤操作
















，一步一步的执行 
  
  
  
  
  。

  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；称为是声明式编程；