尤雨东

vue3学习之旅--邂逅vue3-了解认识Vue3(二)

续上文：
vue3学习之旅–邂逅vue3-了解认识Vue3

计数器案例（体验Vue）

<div id="app">div>
  <script src="../vue3/vue3.js">script>
  <script>
    Vue.createApp({
      template: `
      
        {{message}}
        {{counter}}
          
          
      
      `,
      // 数据
      data() {
        return {
          message: 'hello Vue3!',
          counter: 0
        }
      },
      // 方法
      methods: {
        increment() {
          this.counter++;
        }, 
        decrement() {
          this.counter--;
        }
      }
    }).mount('#app')
  script>

Vue的特点

声明式和命令式

原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：

命令式编程和声明式编程；

命令式编程关注的是 “how to do”，声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程；

在原生的实现过程中，我们是如何操作的呢？

我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令；
这样的编写代码的过程，我们称之为命令式编程；
在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；

在Vue的实现过程中，我们是如何操作的呢？

我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；
这样的编写代码的过程，我们称之为是声明式编程；
目前Vue、React、Angular的编程模式，我们称之为声明式编程。

MVVM 模型

MVC和MVVM都是一种软件的体系结构

MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；

MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；

通常情况下，我们也经常称Vue是一个MVVM的框架

Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

template属性

template属性概念

在使用createApp的时候，我们传入了一个对象，接下来我们详细解析一下之前传入的属性分别代表什么含义。

template属性：表示的是Vue需要帮助我们渲染的模板信息：

目前我们看到它里面有很多的HTML标签，这些标签会替换掉我们挂载到的元素（比如id为app的div）的 innerHTML；
模板中有一些奇怪的语法，比如 {{}}，比如 @click，这些都是模板特有的语法，我们会在后面讲到；
但是这个模板的写法有点过于别扭了，并且IDE很有可能没有任何提示，阻碍我们编程的效率。

Vue提供了两种方式：

方式一：使用script标签，并且标记它的类型为 x-template

方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置id。template元素是一种用于保存客户端内容的机制，该内容再加载页面时不会被呈现，但随后可以在运行时使用JavaScript实例化；

template写法

**注意：**在createApp的对象中，我们需要传入的template以 # 开头：

如果字符串是以 # 开始，那么它将被用作 querySelector，并且使用匹配元素的 innerHTML 作为模板字符串；

1. 使用script标签


  
  <script type="x-template" id="mao">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click='increment'>+</button>  
      <button @click='decrement'>-</button>  
    </div>
  script>

<script>
	// 模板template的使用
    Vue.createApp({
        template:'#mao'
    })
script>

2. 使用template标签