Vue3框架

  一、vue简介

1. Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 
2. Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。
3. 通俗的来讲，Vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量。
4. 与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选，把自己不喜欢再一件件的扔了，甚至required 必须用且耗费空间的！

二、Vue的两核心 

1. 响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心数据操作。
2. 可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试

三、vue的模板语法

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1、插值

（1）文本

数据绑定最常见的形式就是使用 { {...}}（双大括号）的文本插值：

<div id="app">
  <p>{
  { message }}</p>
</div>

{ {...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{ {...}} 标签内容也会更新。

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {
  { message }}</span>

&#