首页 > 其他分享 >VUE&Tomcat服务器

VUE&Tomcat服务器

时间：2023-02-17 10:22:57浏览次数：47  
标签：VUE Tomcat 元素 Vue 数组 服务器 property data 模板

目录

一、Vue介绍

1、Vue是什么

Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

2、Vue的特点

(1) Vue 的核心库只关注视图层。
(2) 不仅易于上手，还便于与第三方库或既有项目整合。
(3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。

MVVM模式：就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。

二、Vue.js的安装

1、使用Vite创建

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。

它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。

快速的冷启动，不需要等待打包操作；
即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。
通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

在这里插入图片描述

完成！

三、Vue声明式渲染

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

main.js入口文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//创建Vue应用,将配置对象传入,用mount进行挂载
createApp(App).mount('#app')

App.vue

<script>
//声明式渲染，可以提高开发效率
export default {
  //局部变量，变量都是定义在data里
  data() {
    return {
      msg: "Hello vue"
    }
  }
}
</script>

<template>
  <div>
  <!-- 自动读取到data中的所有属性 -->
    <p>{{ msg }}</p>
  </div>
</template>

在这里插入图片描述

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的

示例：其中 每点击一次按钮，counter就会加一，你将看到渲染的 DOM 是如何变化的

<script>
//声明式渲染，可以提高开发效率
export default {
  //局部变量，变量都是定义在data里
  data() {
    return {
      msg: "Hello vue",
      counter: 0
    }
  }
}
</script>

<template>
  <div>
  <!-- 自动读取到data中的所有属性 -->
    <p>{{ msg }}</p>
    <h1>{{ counter }}</h1>
    <button @click="counter++">改变counter</button>
  </div>
</template>

在这里插入图片描述

注意：

  1. 想让Vue工作，就必须创建一个 Vue实例，且要传入一个 配置对象
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
  3. root容器里的代码被称为 Vue模板
  4. Vue实例与容器是一一对应的
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用
  6. {{xxx}} 中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
  7. 响应式 就是一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

四、Data Property 和方法

1、Data Property

组件的 data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为方便起见，该对象的任何顶级 property 也会直接通过组件实例暴露出来：

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

// 修改 vm.count 的值也会更新 $data.count
vm.count = 5
console.log(vm.$data.count) // => 5

// 反之亦然
vm.$data.count = 6
console.log(vm.count) // => 6

这些实例 property 仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。必要时，要对尚未提供所需值的 property 使用 null、undefined 或其他占位的值。

直接将不包含在 data 中的新 property 添加到组件实例是可行的。但由于该 property 不在背后的响应式 $data对象内，所以 Vue 的响应性系统不会自动跟踪它。

Vue 使用 $ 前缀通过组件实例暴露自己的内置 API。它还为内部 property 保留 _ 前缀。你应该避免使用这两个字符开头的顶级 data property 名称。

2、方法

我们用 methods 选项向组件实例添加方法，它应该是一个包含所需方法的对象：

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

vm.increment()

console.log(vm.count) // => 5

Vue 自动为 methods 绑定 this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this指向。在定义 methods时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this指向。

这些 methods和组件实例的其它所有 property 一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用：

<button @click="increment">Up vote</button>

在上面的例子中，点击 时，会调用 increment 方法。
也可以直接从模板中调用方法。通常换做计算属性会更好。但是，在计算属性不可行的情况下，使用方法可能会很有用。你可以在模板支持 JavaScript 表达式的任何地方调用方法：

<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>

如果 toTitleDate 或 formatDate 访问了任何响应式数据，则将其作为渲染依赖项进行跟踪，就像直接在模板中使用过一样。

从模板调用的方法不应该有任何副作用，比如更改数据或触发异步进程。如果你想这么做，应该使用生命周期钩子来替换。

五、Vue模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成 虚拟 DOM 渲染函数。结合响应性系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

1、插值

概述：在插值表达式中用户可以把vue中所定义的数据显示在页面上。 插值表达式允许用户输入"JS表达式"
语法：{{ 变量名/对象.属性名 }}

1）文本

数据绑定最常见的形式就是使用{{ xxx }} (双大括号) 语法的文本插值：

<p>{{ num }}</p>
<p>{{ name }}</p>

Mustache 标签将会被替代为对应组件实例中 property 的值。无论何时，绑定的组件实例上 property 发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

2）原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html 指令：

TIP
在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。

3）Attribute属性

Mustache 语法不能在 HTML attribute 中使用，然而，可以使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

4）使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

2、指令

概述：指令 (Directives) 是带有 v- 前缀的特殊 attribute，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM，指令用于解析标签（包括：标签属性、标签体内容、绑定事件等）
语法：v-xxx

1）参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
例如，v-bind 指令可以用于响应式地更新 HTML attribute，v-on 指令，它用于监听 DOM 事件

2）动态参数

可以在指令参数中使用 JavaScript 表达式，方法是用方括号括起来：

六、v-for列表渲染

v-for指令：

  1. 用于展示列表数据
  2. 语法：< li v-for=“(item, index) in xxx” :key=“yyy”>，其中key可以是index下标索引，也可以是遍历对象的唯一标识
  3. 可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

1、遍历数组

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

2、遍历对象

可以用 v-for 来遍历一个对象的 property。

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它在不同 JavaScript 引擎下的结果都一致。

3、维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key attribute：

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。

提示：不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

4、数组更新检测

1）变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push() 数组末尾增加单个或多个元素
  • pop() 删除数组末尾元素
  • shift() 删除数组首位元素
  • unshift() 数组首部增加单个或多个元素
  • splice() 可以插入元素，删除元素，替换元素
  • sort() 从小到大排序
  • reverse() 数组翻转
<script>
//声明式渲染，可以提高开发效率
export default {
  data() {
    return {
      list: [1, 5, 9, 4, 7, 3]
    }
  },
  methods: {
    changeList: function () {
      //下标索引值改变数组
      // this.list[6] = 99
      // push() 数组末尾增加单个或多个元素
      // this.list.push(99, 98, 97)
      // pop() 删除数组末尾元素
      // this.list.pop()
      // shift() 删除数组首位元素
      // this.list.shift()
      // unshift() 数组首部增加单个或多个元素
      // this.list.unshift(5, 6, 7)
      // splice() 可以插入元素，删除元素，替换元素
      //第一个参数是插入、删除或者替换元素的下标位置
      //删除元素 只需要两个参数 1.下标位置 2.删除元素数量
      //第二个参数是删除元素数量
      // this.list.splice(1, 3)
      //插入元素 1.下标位置2.第二个参数为0，3.插入单个或多个元素
      // this.list.splice(1, 0, 99, 98, 97)
      //替换元素 1.下标位置2.第二个参数为替换元素的数量，3.替换的元素
      // this.list.splice(1, 3, 99, 98, 97)
      // sort() 从小到大排序
      // this.list.sort()
      // reverse() 数组翻转
      // this.list.reverse()
      //从大到小排序
      this.list.sort().reverse()
    }
  },
};
</script>

<template>
  <div>
    <ul>
      <li v-for="item in list"> {{ item }}</li>
    </ul>
    <button @click="changeList">改变数组</button>
  </div>
</template >

七、v-model数据绑定

1、基本用法
你可以用 v-model 指令在表单 < input >、< textarea > 及 < select > 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

提示：
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值。它将始终将当前活动实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

  • text 和 textarea 元素使用 value property 和 input 事件；
  • checkbox 和 radio 使用 checked property 和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。

Tomcat 服务器

系统交互

image-20230215165324751

Tomcat安装

下载：https://tomcat.apache.org/

安装： 下载zip解压版本，直接解压即可。

image-20230215170031904

tomcat软件是用java语言写的，如果要运行，需要配置jdk环境变量：

（1）、配置JAVA_HOME

image-20230215170339085

（2）、添加到Path中

image-20230215170439248

启动Tomcat

执行文件：C:\soft\app\apache-tomcat-9.0.71\bin\startup.bat

启动方式1： 双击startup.bat文件

启动方式2：在cmd命令行窗口执行startup.bat命令，如下：

image-20230215170751377

访问：http://localhost:8080/

image-20230215170846868

访问的项目是？

image-20230215170956686

注意：访问ROOT项目，不需要加项目名称。

创建自己的项目，并访问：

image-20230215171313168

访问地址

访问本地地址： http://localhost:8080/

本机地址的表示：

1、localhost 其实是一个域名，经过本地hosts文件域名解析映射后的地址是127.0.0.1

C:\Windows\System32\drivers\etchosts文件内容127.0.0.1       localhost  ip地址           域名

2、127.0.0.1 也是本地地址，所以也可以这样访问：http://127.0.0.1:8080/

3、我的局域网IP： 192.168.8.11， 也可以： http://192.168.8.11:8080/test/1.html

修改tomcat默认端口

需求：同时启动2个tomcat！

15-Feb-2023 17:49:30.928 信息 [main] org.apache.catalina.startup.Catalina.start Server startup in 423 ms
15-Feb-2023 17:49:30.931 严重 [main] org.apache.catalina.core.StandardServer.await 无法在地址[localhost]和端口[8005]上创建服务器关闭套接字（基本端口[8005]和偏移量[0]）
    java.net.BindException: Address already in use: JVM_Bind
        at java.net.DualStackPlainSocketImpl.bind0(Native Method)
        at java.net.DualStackPlainSocketImpl.socketBind(DualStackPlainSocketImpl.java:106)
        at java.net.AbstractPlainSocketImpl.bind(AbstractPlainSocketImpl.java:387)
        at java.net.PlainSocketImpl.bind(PlainSocketImpl.java:190)
        at java.net.ServerSocket.bind(ServerSocket.java:375)
        at java.net.ServerSocket.<init>(ServerSocket.java:237)

因为已经启动了一个Tomcat，占用了8080等端口；再启动tomcat，如果没有修改tomcat端口的的话，默认占用8080等

修改tomcat端口： apache-tomcat-8.5.82\conf\server.xml

image-20230215175644623

image-20230215175649053

端口冲突，查杀端口：

netstat -ano | findstr 80
taskkill -f -pid xxx

标签：VUE,Tomcat,元素,Vue,数组,服务器,property,data,模板
From： https://www.cnblogs.com/amor2818/p/17129200.html

相关文章

  • vue中小写数字转大写汉字
    numTocoggle(money){//汉字的数字varcnNums=newArray('零','壹','贰','叁','肆','伍','陆','柒','捌','玖');//基本单位varcnIntRadice=ne......
  • Vue中.env|.env.development|.env.production文件说明【转载】
    0.介绍模式是VueCLI项目中一个重要的概念，默认情况下，一个VueCLI项目有三种模式：developemt模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduc......
  • vue 实现网页全屏
    screen(){constelement=document.documentElement;if(this.fullscreen){//退出全屏if(!document.exitFullscreen&&document.exitFullscreen){......
  • Vue3+vite项目在局域网内通过ip在手机端访问
    使用vite启动项目后，想在手机端访问项目，此时是访问不到的在网上查阅了相关内容，小结一下1.修改vite.confifg,js（未使用ts，使用的修改vite,config.ts）exportdefaultdefineCo......
  • Docker部属Ewomail邮件服务器
    属性 值操作系统 CentOSLinux发行版7.6.1810（核心）云服务器 畅行云（不要用阿里云，因为没有开放25端口，其他可咨询云提供商）域名 网海情网端口 鸽舍（110、143）后缀（25）......
  • vue生命周期和vue组件
    目录vue生命周期vue组件补充知识vue生命周期官方的生命周期图简易图从vue实例创建开始直到实例被销毁，总共经历了8个生命周期钩子【只要写了就会执行】函数钩子：反序......
  • 在 vuex 中建立一个 permission.js 文件用于合并静态和动态的路由规则
    结果会获取完整的用户的路由规则//新建一个vuex模块来专门处理权限相关操作import{constantRoutes,asyncRoutes}from"@/router";exportdefault{namespace......
  • Vue - 4 Vue中与后端交互
    目录Vue-4Vue中与后端交互1.购物车案例2.v-model的修饰符3.什么是跨域问题跨域问题同源策略跨域问题解决思路4.Vue中与后端交互1.使用JQuery中的ajax2.fetch3.axios发送......
  • Vue - 5 生命周期与组件
    目录Vue-5生命周期与组件1.Vue的生命周期钩子函数2.Vue组件Vue-5生命周期与组件1.Vue的生命周期钩子函数钩子函数描述beforeCreate创建Vue实例之前调......
  • VUE生命周期函数/axios与后端交互案例
    axios发送ajax请求与后端交互以后都用它，在vue上，第三方的模块Axios是一个基于promise的HTTP库，还是基于XMLHttpRequest封装的#跨越问题 -浏览器的原因，只要向不是......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99