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

这篇具有很好参考价值的文章主要介绍了认识Vue；vue使用和安装；声明式和命令式编程；MVVM模型；data属性；methods属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

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

(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>