Vue框架和Vue3简介

一.什么是Vue？

Vue是一款前端用来构建用户界面渐进式框架，是一个Javascript 的MVVM模式的库，可以提高前端开发效率。

特点：

1.双向数据绑定：vuejs会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。这也是vuejs最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。

2..组件化：vue通过组件，把一个单页应用中的各种模板拆分到一个一个单独的组件中，我们
只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数就叫做组件的属性），然后再分别写好各种组件的实例（填坑），整个应用就完成了。

3.视图，数据和结构的分离，使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。

二.Vue的使用

使用方式：

1.传统方式：在html页面导入vue库
2.使用架构工具（专业开发）：vue cli（vue脚手架），vite（新一代的架构工具）

安装途径：

1.官网下载：在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。

2.CDN加速器：

Vue2：
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

Vue3：
      <script src="https://unpkg.com/vue@next"></script>

三.Vue具体应用过程

（1）引入Vue库
（2）创建视图（View）
（3）创建模型（Model）
（4）创建Vue示例，将模型（Model）挂载到Vue上去--实现ViewModel双向数据绑定

四.模板与Vue指令

模板是帮助用户通过数据来驱动视图的渲染

模板的作用：

        （1）模板的插值：是通过使用"{{}}"运算符将模型中的数据插入到视图中
        （2）插入标签：使用v-html指令
        （3）插入普通文本：使用v-text指令
    注意：在Vue中使用v-开头的都是Vue指令。

Vue的指令：是带有v-前缀的特殊属性，通过属性来操作元素

模板的条件渲染：

        渲染：渲染就是将模型中的数据显示到视图中
        条件渲染就是根据表达式的值来决定是显示还是隐藏内容。
    （1）v-if：
    （2）v-show：
    （3）v-if和v-show的区别：
        a.实现方式不同：v-if底层采用DOM的appendChild方法创建一个元素添加到页面中，
                        v-show是通过css的display属性来控制是否显示元素。
        b.加载性能：v-if比较快，v-show比较慢。
        c.切换开销：v-if的开销大，v-show开销小。
    循环渲染：通过v-for指令将数组或集合中的数据渲染到视图中

vue内置指令：

 (1)v-bind：将页面元素的属性和模型中变量进行绑定
        

 (2)v-on：给元素绑定事件
        
            a、绑定一个事件
            
               <div v-on:事件名="函数名"></div>
               
            b、绑定多个事件：
            
               <div v-on="{事件名1:函数名,事件名2:函数名}"></div> 

 (3)v-model：将input的值和模型中的变量进行绑定。实现数据与视图的双向绑定