认识Vue；vue使用和安装；声明式和命令式编程；MVVM模型；data属性；methods属性

龙猫呗

已于 2023-08-07 16:20:52 修改

阅读量272

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-08-07 15:55:12 首次发布

本文链接：https://blog.csdn.net/qq_54075517/article/details/132148095

版权

Vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

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>
    // 使用Vue
    const 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.创建app
    const app = Vue.createApp({
      template: `<h1>Hello Vue</h1>`
    })
    // 2.挂载app
    app.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.获取dom
    const h2El = document.querySelector("h2")
    const counterEl = document.querySelector(".counter")
    const addBtnEl = document.querySelector(".add")
    const subBtnEl = document.querySelector(".sub")
    // 2.定义一个变量记录数据
    let counter = 0
    counterEl.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>