android系统定制开发【Vue】Vue简介、引入、命令式和声明式编程

💭💭

✨： android系统定制开发开始陆陆续续更新vue啦
 
💟：
 
💜：android系统定制开发如果有幸和你一起学习一起进步，android系统定制开发那就太棒啦，一起学习吧。💜💜
 

一、初识Vue

1.1.

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

• 全称是Vue.js或者Vuejs；
• 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型；
• 帮助你高效地开发用户界面，无论任务是简单还是复杂；

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

Vue3命名为One Piece（海贼王）
 

1.2.Vue引入方式

1. 在页面中通过CDN的方式来引入；
    

<script src="https://unpkg.com/vue@next"></script>
1

3. 下载Vue的JavaScript文件，并且自己手动引入；

• 下载Vue的源码，可以直接打开CDN的链接复制所有代码到一个新的文件夹里vue.js
  然后引入
   

<script src="../vue.js"></script>
1

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

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

💡💡

• 原生js实现计数器功能

<h2>当前计数：<span class="counter"></span></h2><button class="add">+1</button><button class="sub">-1</button><script>//1.获取domconst 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;    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

步骤：

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

我们因此可以发现，在原生实现的过程中，我们每完成一个操作，都需要通过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");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

 
从两个对比来看，我们可以发现Vue是不是更为简洁，而原生JS就是根据命令一步步去执行

1.4.声明式编程和命令式编程

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

• 在原生js中：
  每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令；
  每一步的指令都是按顺序执行的，称为命令式编程

• 在vue的实现过程中：
  我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；称为是声明式编程；