1_认识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript框架。
全称是Vue.js或者Vuejs；
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型；
帮助你高效地开发用户界面，无论任务是简单还是复杂；

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

Vue在国内市场占有率是最高的；几乎所有的前端岗位都会对Vue有要求；

2_vue使用和安装

Vue的本质，就是一个JavaScript的库：

刚开始不需要把它想象的非常复杂；
可以把它理解成一个已经封装好的库；
在项目中可以引入并且使用它即可。

安装和使用Vue的方式？

（1）方式一：在页面中通过CDN的方式来引入；

<body><h2>我是标题</h2><p>我是内容</p><div id="app"></div><!-- CDN地址 --><script src="https://unpkg.com/vue@next"></script><script>// 使用Vueconst app = Vue.createApp({template: `<h2>Hello World</h2><span>引入vue</span>`})// 挂载app.mount("#app")</script>
</body>

在这里插入图片描述

(2）方式二：下载Vue的JavaScript文件，并且自己手动引入；

可以直接打开CDN的链接。下载Vue的源码：

打开链接，复制其中所有的代码；
创建一个新文件，比如vue.js，将代码复制到其中；
通过script标签，引入刚才的文件：

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

案例：

<body><div id="app"></div><script src="./lib/vue.js"></script><script>// 1.创建appconst app = Vue.createApp({template: `<h1>Hello Vue</h1>`})// 2.挂载appapp.mount("#app")</script></body>

（3）方式三：通过npm包管理工具安装使用它；

（4）方式四：直接通过Vue CLI创建项目，并且使用它；

Vue计数器案例

点击+1，那么内容会显示数字+1；
点击-1，那么内容会显示数字-1；

对比原生和Vue的实现方式的不同。

原生实现方式

<body><h2>当前计数: <span class="counter"></span></h2><button class="add">+1</button><button class="sub">-1</button><script>// 1.获取domconst h2El = document.querySelector("h2")const counterEl = document.querySelector(".counter")const addBtnEl = document.querySelector(".add")const subBtnEl = document.querySelector(".sub")// 2.定义一个变量记录数据let counter = 0counterEl.textContent = counter// 2.监听按钮的点击addBtnEl.onclick = function() {counter++counterEl.textContent = counter}subBtnEl.onclick = function() {counter--counterEl.textContent = counter}</script>
</body>

Vue方式

<body><div id="app"><h2>当前计数: {{counter}}</h2><button @click="increment">+1</button><button @click="decrement">-1</button></div><!-- 引入，已经下载好Vue --><script src="./lib/vue.js"></script><script>const app = Vue.createApp({data: function() {return {counter: 0}},methods: {increment: function() {this.counter++},decrement: function() {this.counter--}}})app.mount("#app")</script>
</body>