VUE组件化编程

一、什么是vue?

        vue是一种声明式的，组件化的、基于HTML,CSS,JavaScript构建的，用于构建前端用户界面的渐进式 JavaScript框架，每个.vue文件都是一个组件，可以实现简单或复杂的界面。遵循MVVM模式。官网：https://vuejs.org/

        借鉴了Angular 的模板和数据绑定技术、 React 的组件化和虚拟 DOM 技术。

二、vue的基本使用

        1、使用方式

                首先你需要有node.js环境，他是JavaScript的运行环境，具有包管理器:npm(相当于python的pip/Java的maven)

                下载对应你系统的 Node.js 版本：https://nodejs.org/en/download/

                 下载后安装即可

                （1）CDN方式使用

                                步骤1：

                                在head标签内创建script标签，设置属性src，属性值为版本地址

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

                                步骤2：

                                在body体内创建script标签，在标签内写入构建代码：

                               

                                说明：const定义一个常量，定义createApp是一个vue实例，data是一个函 数，它返回一个对象。这个对象包含了组件的响应式状态。return语句是在data函数内部使用的，它返回了包含组件状态的对象。表示当前组件空间内有一个变量message，变量值为Hello vue，mount()表示挂载，要挂在到id值为box的标签上

                                步骤3：

                                             在body内创建一个元素，id值设置为刚才mount()引号内的值例：

                                        

                                             说明：{{}}代表绑定变量名为message的值，也称为差值表达式，他会将message的值显示在div中也就是页面中

                （2）VUE3 的 create-vue 脚手架创建项目

                                步骤1：

                                在你要创建项目的路径下打开power shell窗口，可使用快捷方式：在资源管理器创建项目的路径下在空白处按住shift右单击，在弹出的快捷菜单中选择打开power shell窗口

                                步骤2（以下操作均在power shell窗口操作）：

                                 创建项目：npm init vue@latest

                                配置项目信息：创建的项目名称。。。等

                                初始化项目（下载文件依赖包）:npm install

                                对项目操作：进入项目目录：cd [对应项目名称]

                                                      启动项目：npm run dev

                                                       可以复制地址到浏览器打开或Ctrl+单击地址访问

三、vue项目各个文件夹的作用

           1、node_modules：

                                依赖包文件夹，也就是执行npm install安装的依赖包

           2、src:

                                源代码文件夹

                                (1)assets:放置所有项目所需的静态文件的文件夹（图片、文字等）

                                (2)components:放置组件文件的文件夹

                                (3)router:用于配置路由

                                (4)views:视图文件夹

四、vue模板语法引入

              1、差值运算符：

                                {{}}：写法为{{变量名}}，用于绑定变量值

                                         例如：{{message}}

              2、强制数据绑定：

                                v-bind:属性名=变量名: 用于绑定页面元素属性的某个属性值，可以简写为(:bind=变量名)

                                                            例如：<input type="text" v-bind:value=username>

                                                                       script标签内data的return内语法：username:'初始值'

               3、绑定事件监听：

                                v-on:事件名="要执行的函数名(所需n个参数)":用于某个对象触发某个事件时要执行一些动作，也可以简写为：@:事件名

                                             例如:<button type="button" v-on:click="fillAdmin">使用                                        ADMIN 用户</button>：代表一个按钮在单击时执行fillAdmin函数

                                拓展：v-on:事件名.按键修饰符='函数名'