vue框架

    1.为什么选择这个框架？

​        1）中外合作

​        2）有一套规范简化我们的编程

​        3）提出理念---单页面组件化开发

​    2.认识vue

​        官网：https://cn.vuejs.org/guide/introduction.html

​        概念：用于构建界面的Javascript框架

​                    基于html,css,javascript

​                    提供一套声明式，组件化的编程模式

​        特点：

​            组件化

​            数据绑定：双向

​            状态管理

​            路由管理：单行链接

​            支持第三方的UI库的整合

​            响应式数据布局处理

​            单页面应用开发

​        vue的分类：

​            vue2：最早的vue技术--对js的无缝对接开发，

​                        脚手架开发打包服务端应用--webpack

​                        vue学习从基本的js框架到服务器化前端开发过度

​                        到2023年12月31号停止维护

​            vue3：开始应对js，后来主要支持typescript，

​                        脚手架服务器化开发--webpack--新的打包vit    【主流vue】

​    3.搭建vue的环境，编写第一个业务--体验vue的开发

​        1）环境搭建

​            常规引入vue库【直接用<script>引入】：常规前端项目开发，嵌入vue

​                    引入在线脚本

                <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

​                    下载脚本到本地

​                            [jsdelivr](https://www.jsdelivr.com/package/npm/vue) ：

​                            [cdnjs](https://cdnjs.com/libraries/vue)：

​                    使用最新的hbuilderX创建项目可以直接包含项目中

​            服务器化脚手架环境：命令行工具(CLI)或者 自带的脚手架，或者工具快捷方式 服务器化前端项目

​                    要求：

​                        A.基础必须熟练【html,css,javascript】

​                        B.熟悉nodejs工具和技术

​                        C.熟悉vite/webpack的打包工具

​        2）创建项目--普通项目

​                创建普通web项目---直接使用HBUILDERX的快捷方式

​                讲vue.js文件复制到项目中的就是目录下

​                在需要的页面中引入vue的js脚本

​                    <script src="脚本路径">

​        3）编写显示hello的功能，可以点击递增

​        4）入门程序的分析

​                获取vue的框架脚本---放到项目中---通过<script>引入页面使用  原生js的知识点

​                编写一个div块给一个id属性值---作为显示内容窗体

​                {{变量或者表达式}}    vue提供的用于在页面上显示数据，以及将变量中的数据获取显示

​                vi-model和@click是vue提供的用于将标签与变量绑定的指令和触发事件的指令

​        5）vue就是脚本编写规范

​                //创建预加载结构

​                    var vue对象名=Vue.createAPP(js对象);

​                //将vue应用对象与页面关联  挂载到页面上

​                    vue对象名.mount("#页面标签的id属性");

​        6）数据关联    

​                vue中js中变量数据和页面只用使用是强关联的---要变都变---双向绑定

​                通过案例我们也可以发现vue的核心功能---数据处理和数据到页面显示--一种开发模式--MVVM