快速入门Web开发（上） 黑马程序员JavaWeb开发教程（1）：https://developer.aliyun.com/article/1548535
Vue的生命周期
- 创建阶段（Creation Phase）：
- beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
- created：在实例创建完成后被调用。在这个阶段，实例已经完成数据观测、属性和方法的运算，但是尚未挂载到DOM上。
- 挂载阶段（Mounting Phase）：
- beforeMount：在实例挂载到DOM之前被调用。
- mounted：在实例挂载到DOM后被调用。在这个阶段，实例已经完成了挂载，可以访问到DOM元素。(提交表单)
- 更新阶段（Updating Phase）：
- beforeUpdate：在响应式数据更新之前被调用，即数据发生改变、重新渲染之前。
- updated：在数据更新完成后被调用。在这个阶段，DOM已经完成更新。
- 销毁阶段（Destroying Phase）：
- beforeDestroy：在实例销毁之前被调用。在这个阶段，实例仍然完全可用。
- destroyed：在实例销毁之后被调用。在这个阶段，实例的所有指令和事件监听器都已被解除，所有子实例也被销毁。
Vue项目
- 需要创建一个文件夹，在文件夹中打开命令行输入vue ui
- 将包管理器改为对应
启动
- 默认启动App.vue
npm run serve
访问http://localhost:8080/ 该默认网址会出现该页面
即以上页面
修改服务端口号
- 使用import导入，export组成一个模块
- 等价于下面
- vs6中，属性与名相同可以只写一半
导出export
- 其中，export default是导出语法
// utils.js export default function add(a, b) { return a + b; }
// main.js import add from './utils.js'; console.log(add(2, 3)); // 输出 5
export default没有指定名称是因为它导出的是一个对象字面量（即一个没有具体名称的对象）。当使用export default导出时，可以直接将对象字面量作为默认导出的内容，而不需要为它指定一个特定的名称。
在这种情况下，代码中的export default导出的是一个包含组件选项的对象，并且没有为这个对象指定一个名称。这样做的好处是，其他模块在使用import关键字引入这个默认导出时，可以为它指定任意的名称，使其更具可读性和语义化。
不指定名称的另一个原因是，通过将对象字面量作为默认导出，可以更方便地在其他模块中进行引用和使用。通过import关键字，可以为默认导出指定任意的名称，使代码更加灵活和易于维护。
导入export
如果要导入一个没有名称的 export，可以使用 import 语句，但是可以省略导入的变量名。
假设你有一个名为 myModule.js 的模块，并且在该模块中使用 export 导出了一个值，而没有为该导出指定名称。以下是导入这个没有名称的 export 的示例：
import './myModule.js';
在上述示例中，使用 import 语句导入了 myModule.js 模块，但并没有为导入的值指定变量名。这样做是为了执行 myModule.js 中的副作用，例如在模块中定义的全局变量、执行代码等。
需要注意的是，导入没有名称的 export 时，你不能直接使用导入的值，因为没有为其指定变量名。但是，它可以用作执行副作用的手段。例如，当导入的模块包含在浏览器环境中注册全局变量的代码时，可以使用这种方式导入模块，而不需要使用导入的值。
如果你需要使用导入的值，可以使用 import 语句为其指定一个变量名：
import myValue from './myModule.js'; console.log(myValue); // 使用导入的值
Vue路由
Element
左原生 右为Element
npm install element-ui@2.15.3
使用
1、在views中建element文件夹来存放
2、搭出vue文件所有内容
- 以下div中内容需要去找相应内容
- https://element.eleme.cn/#/zh-CN/component/layout
<template> <div> <!--button 样式-->> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </div> </template> <script> export default { } </script> <style> </style>
3、应用
<template> <div> <!-- <h1> {{ message }}</h1> --> <element-view></element-view>// </div> </template> <script> import ElementView from './views/element/ElementView.vue' export default { components: { ElementView }, data() { return { message: "Hello vue" } }, methods: { } } </script> <style></style>
- 想要添加组件方法，去官网复制后添加到以下位置
- 多看官网就能学会
<!-- 自定义对话框二 --> <el-button type="text" @click="dialogFVisible = true">打开嵌套表格的 Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogFVisible"> </el-dialog> //该对话框根据@click来决定。通过dialog来决定对话框中有无内容
alert(JSON.stringify(this.form)) //通过JSON将对象转换成字符串
插槽
路由
- 使用路由可以完成切换工能
import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' Vue.use(VueRouter) const routes = [ { path: '/EmpView1',//在浏览器导航栏后面输入什么 name: 'home',//该路由的名字 component: () => import('../views/tilas/EmpView1.vue')//访问的路径 }, { path: '/EmpView', name: 'home1', component: () => import('../views/tilas/EmpView.vue')//访问的路径 }, ] const router = new VueRouter({ routes }) export default router
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/',//默认的路径 name: 'home1', component: () => import('../views/tilas/EmpView.vue')//访问的路径 }, { path: '/EmpView1',//在浏览器导航栏后面输入什么 name: 'home',//该路由的名字 component: () => import('../views/tilas/EmpView1.vue')//访问的路径 }, { path: '/EmpView', name: 'home1', component: () => import('../views/tilas/EmpView.vue')//访问的路径 }, ] const router = new VueRouter({ routes }) export default router
// 以上功能都完成后，使用routeview标签来实现 <template> <div> <!-- <h1> {{ message }}</h1> --> <!-- <element-view></element-view> --> <!-- <emp-view></emp-view> --> <router-view></router-view> </div> </template> <script> // import EmpView from './views/tilas/EmpView.vue' // import ElementView from './views/element/ElementView.vue' export default { // components: { EmpView }, // components: { ElementView }, data() { return { message: "Hello vue" } } } </script> <style></style>
- 在Vue.js中，
<router-view>是一个特殊的组件，用于渲染匹配到的路由组件。当你使用<router-view>标签时，它会根据当前的路由路径匹配到对应的组件，并将其渲染到该位置。
在你提供的代码中，你创建了一个Vue Router实例，并定义了一些路由规则。每个路由规则都指定了一个路径和对应的组件。当访问特定的路径时，Vue Router会根据路由规则找到对应的组件，并将其渲染到<router-view>标签所在的位置。
项目的打包与部署
- 打包，命令行/终端输入
npm run build - 部署
进入以下网址下载nginx
nginx.org - 将打包好的文件夹 dist 放到nginx静态资源文件夹目录，然后双击exe来执行，该服务默认占用80端口
- 通过任务管理器可以查看nginx进程是否启动
- 没有启动则打开日志文件查看原因
- 使用
netstat -ano | findStr 80
查看占用80端口的服务（| 叫管道符） -
- 可以看到占用80端口的是 PID为 12492
- 若进程被占用，可以进入以下目录进入文件更改默认端口号
D:\nginx-1.24.0\conf\nginx.conf - server {
listen 80;
server_name localhost; - 以上为第三十六行
- 端口不占用后，可以在浏览器输入 localhost:端口号来访问到部署的工程
对应的组件。当访问特定的路径时，Vue Router会根据路由规则找到对应的组件，并将其渲染到<router-view>标签所在的位置。
项目的打包与部署
- 打包，命令行/终端输入
npm run build - 部署
进入以下网址下载nginx
nginx.org - 将打包好的文件夹 dist 放到nginx静态资源文件夹目录，然后双击exe来执行，该服务默认占用80端口
[外链图片转存中…(img-5JThRs2b-1713410731760)] - 通过任务管理器可以查看nginx进程是否启动
- 没有启动则打开日志文件查看原因
- 使用
netstat -ano | findStr 80
查看占用80端口的服务（| 叫管道符） - [外链图片转存中…(img-g4wvvzJb-1713410731761)]
- 可以看到占用80端口的是 PID为 12492
- 若进程被占用，可以进入以下目录进入文件更改默认端口号
D:\nginx-1.24.0\conf\nginx.conf - server {
listen 80;
server_name localhost; - 以上为第三十六行
- 端口不占用后，可以在浏览器输入 localhost:端口号来访问到部署的工程
- localhost:80
